React组件间通信：小例子为您揭秘事件总线！

2023-11-22 17:02:41

简介

组件通信是React开发中的常见挑战。事件总线提供了一种优雅的方式来处理组件通信。它允许组件通过发布和订阅事件来相互通信，而无需直接耦合。本文将通过一个简单的例子来演示如何使用事件总线实现组件通信。

组件

我们有两个组件：一个父组件App和一个子组件Child。App组件负责渲染Child组件，而Child组件负责处理用户交互。

// App.js
import React, { useState } from "react";
import Child from "./Child";

const App = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <Child count={count} incrementCount={incrementCount} />
    </div>
  );
};

export default App;

// Child.js
import React from "react";

const Child = ({ count, incrementCount }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  );
};

export default Child;

事件总线

为了实现组件通信，我们使用事件总线。事件总线是一个全局对象，它提供了一个发布和订阅事件的接口。组件可以通过发布事件来通知其他组件发生了什么，而其他组件可以通过订阅事件来监听这些事件并做出相应的反应。

// eventBus.js
const eventBus = {
  subscribers: {},

  publish(eventName, data) {
    if (this.subscribers[eventName]) {
      this.subscribers[eventName].forEach((subscriber) => {
        subscriber(data);
      });
    }
  },

  subscribe(eventName, subscriber) {
    if (!this.subscribers[eventName]) {
      this.subscribers[eventName] = [];
    }

    this.subscribers[eventName].push(subscriber);
  },
};

export default eventBus;

使用事件总线

现在，我们可以使用事件总线来实现组件通信。在App组件中，我们发布一个名为"incrementCount"的事件，并在Child组件中订阅这个事件。当Child组件收到这个事件时，它将调用incrementCount方法来增加计数器。

// App.js
import React, { useState } from "react";
import Child from "./Child";
import eventBus from "./eventBus";

const App = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
    eventBus.publish("incrementCount");
  };

  return (
    <div>
      <Child count={count} />
    </div>
  );
};

export default App;

// Child.js
import React from "react";
import eventBus from "./eventBus";

const Child = ({ count }) => {
  useEffect(() => {
    eventBus.subscribe("incrementCount", () => {
      setCount(count + 1);
    });
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
};

export default Child;