掌握 4 种方法，畅通 React 组件通信之路

2023-09-26 07:44:17

前言

在 React 应用中，组件之间的通信至关重要。理解和掌握不同类型的通信方式有助于构建高效且易于维护的应用程序。在这篇文章中，我们将深入探讨四种常见的 React 组件通信方法，从父子通信到跨级和同级组件通信，提供详细的解释和示例。

1. 父子组件通信

传递 Props： 父子组件之间的最简单通信方式是通过 props。父组件将数据作为 props 传递给子组件，子组件使用这些 props 渲染其界面。
处理变更： 当子组件的状态发生变化时，它可以使用 onChange 处理程序向父组件发送数据。父组件监听子组件的 onChange 事件，并在接收数据时更新其状态。

代码示例：

// 父组件
const ParentComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <ChildComponent count={count} onCountChange={setCount} />
  );
};

// 子组件
const ChildComponent = ({ count, onCountChange }) => {
  const handleClick = () => onCountChange(count + 1);

  return (
    <button onClick={handleClick}>增加计数</button>
  );
};

2. 跨级组件通信

当组件之间没有直接的父子关系时，使用 Context 是一种在跨级组件之间进行通信的有效方式。Context 提供了一个全局数据存储，允许组件访问和修改共享状态，无论其在组件树中的位置如何。

代码示例：

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

// 父组件
const ParentComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// 跨级组件
const ChildComponent = () => {
  const { count } = useContext(MyContext);

  return (
    <p>计数：{count}</p>
  );
};

3. 同级组件通信

同级组件之间的通信通常通过 共享父组件状态 或 使用状态管理库（如 Redux） 来实现。当共享父组件状态时，子组件可以从父组件接收数据和修改数据。Redux 提供了一个集中式存储，允许组件访问和修改全局状态。

代码示例（使用共享父组件状态）：

// 父组件
const ParentComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <SiblingComponent1 count={count} />
      <SiblingComponent2 count={count} />
    </>
  );
};

// 同级组件
const SiblingComponent1 = ({ count }) => {
  return (
    <p>计数 1：{count}</p>
  );
};

const SiblingComponent2 = ({ count }) => {
  return (
    <p>计数 2：{count}</p>
  );
};

代码示例（使用 Redux）：

// Redux store 创建
const store = createStore({ count: 0 });

// 组件连接 Redux store
const ConnectedComponent1 = connect(state => ({ count: state.count }), { incrementCount })(Component1);
const ConnectedComponent2 = connect(state => ({ count: state.count }), { incrementCount })(Component2);

// 组件
const Component1 = ({ count }) => {
  return (
    <p>计数 1：{count}</p>
  );
};

const Component2 = ({ count }) => {
  return (
    <p>计数 2：{count}</p>
  );
};