问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

不想组件之间通信想要通过状态组件实现，比如：zustand, mobx 这样的状态库， 想要使用事件监听库，请问是否有推荐呢？

头像头饰
letier
    1.1k112531

    有一个需求，就是在React 页面中，比如有2个子组件，A和B，我想要通过一个三方库实现，B组件监听一个事件，A组件触发发送事件消息。
    ①不想要通过React默认的组件间通信实现
    ②也不想通过状态组件实现，比如：zustand, mobx 这样的状态库，
    想要使用事件监听库，请问是否有推荐呢？

    请问

    2f22cc1b82e6ebf67fc5b0fb4bf81278.png

    Microsoft前端javascripttypescriptreactnode.js
    阅读 909
    avatarAI BotBETA

    在React中，如果你想要在不使用默认的props和context进行组件间通信，也不使用像Zustand、MobX这样的状态管理库的情况下，实现事件监听和触发，你可以考虑使用自定义的事件系统或第三方的事件库。

    不过，请注意，React的哲学通常鼓励使用其内置的props和context作为主要的通信手段，因为它们与React的渲染和更新机制紧密集成。然而，对于某些特殊用例或第三方集成，你可能确实需要一种更灵活的事件机制。

    以下是一些你可以考虑的方案：

    1. 使用事件发射器（Event Emitter）模式

    你可以自己实现一个简单的事件发射器，或者使用像mitt、eventemitter3这样的第三方库。这些库通常提供了一个中央事件总线，你可以在其中注册监听器，并从任何地方触发事件。

    使用mitt的示例：

    首先，安装mitt：

    npm install mitt

    然后，在你的React应用中使用它：

    import mitt from 'mitt';

// 创建一个事件发射器实例
const emitter = mitt();

// 在组件A中触发事件
function ComponentA() {
  const handleClick = () => {
    emitter.emit('myEvent', 'some data');
  };

  return <button onClick={handleClick}>Trigger Event</button>;
}

// 在组件B中监听事件
function ComponentB() {
  useEffect(() => {
    function onMyEvent(data) {
      console.log('Received data:', data);
    }

    // 监听事件
    emitter.on('myEvent', onMyEvent);

    // 清理函数，确保在组件卸载时移除监听器
    return () => {
      emitter.off('myEvent', onMyEvent);
    };
  }, []);

  return <div>Listening for events...</div>;
}

    2. 使用Redux或Redux Toolkit的actions和reducers

    虽然Redux通常被视为一个状态管理库，但你也可以只使用它的actions和reducers作为事件系统。不过，请注意，这将引入Redux的整个架构和相关的复杂性，这可能并不是你想要的。

    3. 使用React的自定义Hooks

    你可以创建自定义的React Hooks来封装事件监听和触发的逻辑。这可以为你提供一种更声明式和可组合的方式来处理事件。然而，这仍然依赖于React的组件和渲染机制。

    4. 使用全局变量或localStorage/sessionStorage

    虽然这些方法通常不推荐用于组件间通信（因为它们可能导致难以追踪的副作用和状态管理问题），但在某些特殊情况下，它们可能是一个可行的选择。但是，请务必谨慎使用，并确保你完全理解它们的潜在问题。

    总结

    在选择任何方案之前，请确保你了解其优缺点，并考虑它是否适合你的具体用例和需求。在大多数情况下，使用React的内置通信机制（如props和context）可能是最简单、最可靠的选择。

    2 个回答
    得票最新
    头像
    42
      3.8k1623
      ✓ 已被采纳

      使用 CustomEvent

      父组件：

      const eventName = `event-${Math.random()}`

return <div>
    <CompA eventName={eventName} />
    <CompB eventName={eventName} />
</div>

      组件 A:

      dispatchEvent(new CustomEvent(eventName))

      组件 B:

      addEventListener(eventName, (e) => console.log(e))
      头像
      微笑的抽屉
        2
        新手上路，请多包涵

        可以用使用pubsub-js，

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        logo
        Microsoft
        子站问答
        访问
        宣传栏