【React】父子组件如何高效传递数据？

在 React 中，父子组件之间的数据传递是通过 props 进行的，这是 React 的核心机制之一。为了实现高效的数据传递，我们可以根据应用场景和需求选择不同的优化策略。以下是父子组件高效传递数据的最佳实践和方法：

1. 直接通过 props 传递数据，是最基础也是最常见的方式。
2. 使用 React.memo 优化子组件，避免不必要的重渲染。
3. 通过回调函数实现子组件向父组件传递数据。
4. 使用 Context 解决深层嵌套传递问题。
5. 使用局部状态管理（useState 或 useReducer），集中更新逻辑。
6. 在复杂场景中使用全局状态管理工具（如 Redux、Zustand）。
7. 避免匿名函数和对象，使用 useCallback 和 useMemo 优化性能。

根据实际需求选择合适的方法，既能保持代码清晰，又能提高性能。

---

1. 使用 Props 传递数据（基础方法）

父组件通过 props 将数据传递给子组件，子组件通过 props 接收数据。

• 示例：

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

• 适用场景：

  • 数据流简单。
  • 父组件直接将数据传递给子组件，无需复杂逻辑。

• 注意：

  • 父组件重新渲染时，子组件也会重新渲染（即使数据没有变化）。可以通过以下优化方法减少不必要的更新。

---

2. 使用 React.memo 优化子组件

如果子组件的 props 没有变化，可以使用 React.memo 避免子组件的重复渲染。

• 示例：

  import React from "react";
  
  const Child = React.memo(({ message }) => {
    console.log("Child rendered");
    return <div>{message}</div>;
  });
  
  function Parent() {
    const data = "Hello from Parent!";
    return <Child message={data} />;
  }
  

• 效果：

  • 如果 message 没有变化，Child 组件不会重新渲染。
  • React.memo 通过浅比较（shallow comparison）判断 props 是否变化。

• 适用场景：

  • 子组件需要避免不必要的渲染。
  • 父组件频繁更新，但子组件依赖的 props 不变。

---

3. 使用回调函数传递数据

如果子组件需要将数据传递给父组件，可以通过回调函数实现。

• 示例：

  function Parent() {
    const handleChildData = (data) => {
      console.log("Data from child:", data);
    };
  
    return <Child sendData={handleChildData} />;
  }
  
  function Child({ sendData }) {
    const handleClick = () => {
      sendData("Hello from Child!");
    };
  
    return <button onClick={handleClick}>Send Data</button>;
  }
  

• 适用场景：

  • 子组件需要向父组件传递数据（如表单提交、按钮点击等）。

---

4. 使用 Context 解决深层嵌套传递问题

当父组件需要将数据传递给多个子组件，或者嵌套层级较深时，直接通过 props 逐层传递会变得繁琐（即“props drilling”）。此时可以使用 React Context。

• 示例：

  import React, { createContext, useContext } from "react";
  
  const DataContext = createContext();
  
  function Parent() {
    const data = "Hello from Parent!";
    return (
      <DataContext.Provider value={data}>
        <Child />
      </DataContext.Provider>
    );
  }
  
  function Child() {
    return <GrandChild />;
  }
  
  function GrandChild() {
    const data = useContext(DataContext);
    return <div>{data}</div>;
  }
  

• 效果：

  • 父组件通过 Context.Provider 提供数据，子组件通过 useContext 消费数据。
  • 无需逐层传递 props，减少代码冗余。

• 适用场景：

  • 数据需要在多个子组件之间共享。
  • 组件嵌套层级较深，props drilling 过于复杂。

---

5. 使用 useReducer 或 useState 管理局部状态

在父组件中使用 useReducer 或 useState 管理状态，并通过 props 或 Context 将状态和更新函数传递给子组件。

• 示例：

  import React, { useReducer } from "react";
  
  function Parent() {
    const [count, setCount] = React.useState(0);
  
    return (
      <div>
        <h1>Count: {count}</h1>
        <Child increment={() => setCount(count + 1)} />
      </div>
    );
  }
  
  function Child({ increment }) {
    return <button onClick={increment}>Increment</button>;
  }
  

• 适用场景：

  • 父组件需要集中管理状态，并将部分更新逻辑下放到子组件。

---

6. 使用 Redux 或 Zustand 进行全局状态管理

如果数据需要在多个组件之间共享，或者跨越多个层级传递，可以使用状态管理工具（如 Redux、Zustand）。

• Redux 示例：

  import { Provider, useSelector, useDispatch } from "react-redux";
  import { createStore } from "redux";
  
  const reducer = (state = { count: 0 }, action) => {
    switch (action.type) {
      case "INCREMENT":
        return { ...state, count: state.count + 1 };
      default:
        return state;
    }
  };
  
  const store = createStore(reducer);
  
  function Parent() {
    return (
      <Provider store={store}>
        <Child />
      </Provider>
    );
  }
  
  function Child() {
    const count = useSelector((state) => state.count);
    const dispatch = useDispatch();
  
    return (
      <div>
        <h1>Count: {count}</h1>
        <button onClick={() => dispatch({ type: "INCREMENT" })}>
          Increment
        </button>
      </div>
    );
  }
  

• 适用场景：

  • 数据需要在全局范围内共享。
  • 应用规模较大，组件间的依赖复杂。

---

7. 避免不必要的重渲染

即使使用了 props 或 Context，仍需注意优化渲染性能：

• 使用 React.memo 优化子组件。

• 避免匿名函数和对象：

  • 每次渲染时，匿名函数和对象会创建新的引用，导致子组件重新渲染。
  • 错误：

    <Child onClick={() => console.log("clicked")} />
    

  • 正确：

    const handleClick = useCallback(() => console.log("clicked"), []);
    <Child onClick={handleClick} />;
    

• 拆分组件：

  • 将需要频繁更新的部分拆分为独立组件，减少不必要的渲染范围。