react/component-communication-practice

React 组件间通信实践

在 React 开发中，组件间的通信是至关重要的。良好的通信机制可以使得组件之间更加灵活和可维护。以下是一些常见的 React 组件间通信方式：

1. 父子组件通信

Props 传递：这是最基本的通信方式，父组件通过 props 向子组件传递数据。
回调函数：父组件向子组件传递一个函数，子组件在适当的时候调用这个函数。

2. 兄弟组件通信

通过共同父组件：兄弟组件可以通过它们的共同父组件进行通信。
Context：使用 React Context 提供了一种无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

3. 跨组件通信

全局状态管理库：如 Redux、MobX 等，可以用于跨组件通信。
自定义事件：使用自定义事件在组件间传递信息。

例子

以下是一个简单的例子，展示了如何使用 Props 传递数据：

// 父组件
function ParentComponent() {
  const data = "Hello from Parent!";
  return <ChildComponent message={data} />;
}

// 子组件
function ChildComponent({ message }) {
  return <div>{message}</div>;
}

更多关于 React 组件间通信的细节，可以参考我们的React 组件间通信指南。

希望这些信息能帮助你更好地理解 React 组件间通信。