javascript - 在 React 全局组件(例如 AppRoot 中的 snackbar )中使用 CustomEvent 是一个坏主意吗？

Question

需要一个像通知处理程序一样的全局snackbar，它可以从任何地方触发，而不仅仅是 react 组件。

我的想法是制作一个监听CustomEvent的组件，并在触发事件时仅显示snackbar。我制作了一个简单的事件调度程序类，可以在项目的每个部分中导入。它运作良好并且非常易于使用。

全局 React 组件的一部分

componentDidMount() {
  document.addEventListener("onGobalMessage", this.onSnackMessage);
}

componentWillUnmount() {
  document.removeEventListener("onGobalMessage", this.onSnackMessage);
}

onSnackMessage = evt => {
  const { detail } = evt;
  this.setState({ open: true, ...detail });
};

调度程序对象

export const globalMessage = {
  success: message => {
    let event = new CustomEvent("onGobalMessage", {
      detail: {
        message,
        variant: "success"
      }
    });
    document.dispatchEvent(event);
  },
  error: message => {
    let event = new CustomEvent("onGobalMessage", {
      detail: {
        message,
        variant: "error"
      }
    });
    document.dispatchEvent(event);
  }
};

我的问题是:在react项目中使用这种方式是否是邪恶的？ :)

Answer 1

Is it from evil to use this way in a react project?

没有。使用事件是一种模式 - “The Observer Pattern ”。它不是反模式，而是riotjs states in in v4 ，它是:

"[…] an opinionated decision that might not work for all users."

Riot 的灵感来自于 React，现在独立于 observable-package解释如下:

By using the observable the extensions can listen to these events and react to them. They extend the core so that the core is not aware of these modules. This is called "loose coupling".

虽然 react 开发人员建议组件对状态变化使用react(响应式(Reactive))，但他们将最终决定留给用户 "you can use as little or as much React as you need"

简而言之:如果您的心智模型能够很好地处理文档中的事件，那就去做吧! React 使您能够做到这一点。

<小时/>

附注根据我的个人经验补充:

• 仅使用内部状态的 React 方式，向下传递 props/向上回调并将组件连接到 redux 也会导致一些困惑的代码库。 “函数式”和“响应式(Reactive)”并不是干净代码的秘诀。
• 使用事件时，一个陷阱是事件名称不唯一。您可以通过在它们前面加上 js-module-name 前缀，或者从一个文件导入字符串常量来解决这个问题，例如 import { ON_GLOBAL_MESSAGE } from src/events.js
• 您可能想要use hooks for un-/subscribing

import React, { useEffect } from 'react';

export const MyComponent = () => {
  const onSnackMessage = (event) => {…}

  useEffect(() => {
    document.addEventListener("onGobalMessage", onSnackMessage);
    return () => {
      // Clean up the subscription
      document.removeEventListener("onGobalMessage", onSnackMessage);
    };
  });

…
}