React 组件通信：使用 Hooks 实现

在 React 中，组件之间的通信是非常常见的需求。本文将介绍如何使用 Hooks 实现组件之间的通信，并结合实际项目中的函数组件进行讲解。

父子组件通信

父子组件之间的通信是 React 中最基本的通信方式。我们可以通过 props 将父组件的数据传递给子组件。

jsx复制
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

function Child({ count }) {
  return <p>Count from Parent: {count}</p>;
}

在父组件中定义一个 count 状态，并将其作为 props 传递给子组件 Child。子组件可以通过 props.count 访问到父组件传递的数据。

子父组件通信

子组件向父组件传递数据的方式，是通过在子组件中定义一个回调函数，并将其作为 props 传递给子组件，在子组件中调用该回调函数并传递数据。

jsx复制
function Parent() {
  const [message, setMessage] = useState('');

  function handleMessage(msg) {
    setMessage(msg);
  }

  return (
    <div>
      <p>Message from Child: {message}</p>
      <Child onMessage={handleMessage} />
    </div>
  );
}

function Child({ onMessage }) {
  function handleClick() {
    onMessage('Hello, Parent!');
  }

  return <button onClick={handleClick}>Send Message</button>;
}

在父组件中定义一个 handleMessage 回调函数，并将其作为 props 传递给子组件 Child。在子组件中，当按钮被点击时，调用 onMessage 回调函数并传递数据。

跨层级组件通信

如果需要在不同层级的组件之间进行通信，我们可以使用 Context API 来实现。Context API 可以让我们在父组件中定义一个全局的状态，并将其传递给子孙组件，从而实现跨层级的数据共享。

jsx复制
const MyContext = createContext();

function Parent() {
  const [message, setMessage] = useState('');

  return (
    <MyContext.Provider value={{ message, setMessage }}>
      <div>
        <p>Message from Child: {message}</p>
        <Child />
      </div>
    </MyContext.Provider>
  );
}

function Child() {
  const { setMessage } = useContext(MyContext);

  function handleClick() {
    setMessage('Hello, Parent!');
  }

  return <button onClick={handleClick}>Send Message</button>;
}

在父组件中，使用 createContext 创建一个上下文对象，并将其传递给子孙组件。在子组件中，使用 useContext Hook 访问上下文对象中的数据，并更新数据。