React.js 如何实现组件间通信

在 React.js 中，组件间通信可以通过多种方式实现，具体取决于组件之间的关系。以下是一些常见的组件间通信方法：

1. Props（属性）:
   • 父组件通过 props 向子组件传递数据。
   • 子组件可以通过调用父组件传递给它的回调函数来向父组件发送消息。

// 父组件
function ParentComponent() {
  const message = "Hello from Parent";
  const handleMessageFromChild = (childMessage) => {
    console.log(childMessage);
  };

  return (
    <div>
      <ChildComponent message={message} onSendMessage={handleMessageFromChild} />
    </div>
  );
}

// 子组件
function ChildComponent(props) {
  const sendMessageToParent = () => {
    props.onSendMessage("Hello from Child");
  };

  return (
    <div>
      <p>{props.message}</p>
      <button onClick={sendMessageToParent}>Send Message to Parent</button>
    </div>
  );
}

2. Context API:
   • 当组件层级较深时，可以使用 Context API 来避免逐层传递 props。
   • 创建一个 Context 对象，并通过 Provider 组件向子组件提供数据。
   • 子组件可以通过 useContext 钩子来访问 Context 中的数据。

// 创建 Context
const MyContext = React.createContext();

// 父组件
function ParentComponent() {
  const sharedValue = "Shared Value";

  return (
    <MyContext.Provider value={sharedValue}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件
function ChildComponent() {
  const value = useContext(MyContext);

  return <div>{value}</div>;
}

3. State Management Libraries（状态管理库）:

   • 对于大型应用，可以使用如 Redux、MobX 或 Recoil 等状态管理库来集中管理状态。
   • 这些库提供了一种在组件之间共享状态的方法，通常通过订阅状态变化来实现。

4. Event Bus（事件总线）:

   • 事件总线是一种设计模式，它允许组件发布和监听事件。
   • 可以使用第三方库如 mitt 或自定义事件系统来实现。

5. Refs（引用）:

   • 通过 refs，可以直接访问 DOM 节点或在组件之间共享数据。
   • 通常用于管理焦点、文本选择或媒体播放。

6. Higher-Order Components（高阶组件）:

   • 高阶组件是一个函数，它接收一个组件并返回一个新的组件。
   • 可以用来共享逻辑或状态，但这种方法现在较少使用，因为 Hooks 提供了更简洁的解决方案。

7. Custom Hooks（自定义钩子）:

   • 自定义钩子允许你在组件之间重用状态逻辑。
   • 可以创建一个钩子来管理共享状态，并在需要的组件中调用这个钩子。

选择哪种通信方式取决于具体的应用场景和组件的关系。对于简单的父子组件通信，props 和回调函数通常就足够了。而对于复杂的应用，可能需要考虑使用 Context API 或状态管理库。