父子组件通信

在 React 中，父子组件通信是最常见的交互方式。父组件可以向子组件传递数据，子组件也可以通过事件或回调函数向父组件传递信息。React 提供了非常灵活和简洁的方式来实现父子组件之间的通信。

本章将介绍几种常见的父子组件通信方式，包括通过 props 传递数据、通过回调函数传递事件，以及使用 Context 进行深层组件间的通信。

1. 通过 Props 传递数据

props 是 React 中父子组件通信的最基本方式。父组件通过 props 向子组件传递数据，子组件通过 props 接收数据并进行展示或使用。

1.1 父组件传递数据给子组件

import React from 'react';

function Parent() {
  const message = "Hello from parent!";
  
  return (
    <div>
      <h1>Parent Component</h1>
      <Child message={message} />
    </div>
  );
}

function Child({ message }) {
  return <p>Message from parent: {message}</p>;
}

export default Parent;

说明：

  • 在 Parent 组件中，父组件通过 message 这个 prop 向 Child 组件传递数据。
  • Child 组件通过 props 接收并展示父组件传递的 message。

2. 通过回调函数传递数据（子传父）

在 React 中，子组件无法直接修改父组件的状态或传递数据给父组件。但是，可以通过回调函数实现子组件向父组件传递数据。父组件将回调函数作为 props 传递给子组件，子组件通过调用这个函数将数据传递给父组件。

2.1 父组件提供回调函数给子组件

import React, { useState } from 'react';

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

  // 回调函数：子组件通过调用该函数传递数据
  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Message from child: {message}</p>
      <Child onMessageChange={handleMessageChange} />
    </div>
  );
}

function Child({ onMessageChange }) {
  const handleClick = () => {
    onMessageChange("Hello from child!");
  };

  return (
    <div>
      <button onClick={handleClick}>Send message to parent</button>
    </div>
  );
}

export default Parent;

说明：

  • Parent 组件通过 onMessageChange 将回调函数传递给 Child 组件。
  • Child 组件通过调用 onMessageChange 将消息传递给父组件，更新父组件的状态。

3. 通过 Context 进行深层组件通信

Context 提供了一种方式，可以在组件树中传递数据，而不必通过 props 层层传递。它非常适合处理跨越多层组件的共享数据，例如主题、认证信息等。

3.1 创建 Context 并在父组件中提供数据

import React, { createContext, useState, useContext } from 'react';

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

function Parent() {
  const [message, setMessage] = useState("Hello from parent!");

  return (
    <MessageContext.Provider value={message}>
      <h1>Parent Component</h1>
      <Child />
    </MessageContext.Provider>
  );
}

function Child() {
  const message = useContext(MessageContext);

  return <p>Message from parent via Context: {message}</p>;
}

export default Parent;

说明：

  • MessageContext.Provider 用于在父组件中提供数据。
  • Child 组件通过 useContext(MessageContext) 来访问 Context 中的数据，无需通过 props 层层传递。

3.2 使用 Context 进行子组件传递数据（通过 Context 更新数据）

import React, { createContext, useState, useContext } from 'react';

// 创建 Context
const MessageContext = createContext();
const UpdateMessageContext = createContext();

function Parent() {
  const [message, setMessage] = useState("Hello from parent!");

  return (
    <MessageContext.Provider value={message}>
      <UpdateMessageContext.Provider value={setMessage}>
        <h1>Parent Component</h1>
        <Child />
      </UpdateMessageContext.Provider>
    </MessageContext.Provider>
  );
}

function Child() {
  const message = useContext(MessageContext);
  const setMessage = useContext(UpdateMessageContext);

  const handleClick = () => {
    setMessage("Hello from child!");
  };

  return (
    <div>
      <p>Message from parent via Context: {message}</p>
      <button onClick={handleClick}>Send message to parent via Context</button>
    </div>
  );
}

export default Parent;

说明：

  • MessageContext 提供了父组件的消息数据，UpdateMessageContext 提供了更新消息的函数。
  • Child 组件通过 useContext 获取父组件的数据和更新函数，从而实现子组件向父组件传递数据。

4. 父子组件通信的最佳实践

4.1 使用 Props 进行数据传递

  • 使用 props 是父子组件通信的标准方式，特别适用于数据结构简单、传递层次较浅的场景。
  • 在父组件中传递数据给子组件，子组件通过 props 接收并渲染。

4.2 使用回调函数（子传父）

  • 当需要从子组件向父组件传递数据时，父组件提供回调函数作为 props，子组件通过调用回调函数将数据传递给父组件。
  • 这种方式使得父组件能够控制子组件的行为，并保持状态的单向流动。

4.3 使用 Context 进行跨层级传递

  • Context 适合跨越多个层级的父子组件通信，避免了通过 props 一层层传递数据的问题。
  • 通过 useContext 可以直接访问共享数据，非常适合管理全局状态（如主题、认证信息等）。

5. 小结

  • 通过 Props：父组件通过 props 向子组件传递数据，适用于简单的数据传递。
  • 通过回调函数（子传父）：子组件通过调用父组件传递的回调函数将数据传递给父组件。
  • 通过 Context：适用于跨越多层组件传递共享数据，避免了 props 层层传递。

React 提供的父子组件通信方式非常灵活，可以根据不同的需求选择合适的方式。对于简单的数据传递使用 props，对于复杂的状态或深层嵌套的组件使用 Context，而当需要从子组件传递数据到父组件时，回调函数是一个很好的选择。

Last Updated::