如何在 React 中正确地在子组件间传递状态数据

在React应用开发中，子组件之间共享状态数据是非常常见的需求，不同的场景适合不同的传递方案，选择合理的方案可以减少不必要的组件重渲染，提升应用性能。

方案一：状态提升（Lifting State Up）

状态提升是React官方推荐的最基础的状态共享方案，核心思路是把需要共享的状态放到这些子组件的共同父组件中，父组件通过props把状态和修改状态的方法传递给子组件，子组件之间就可以通过父组件间接实现状态共享。

这种方式适合只有少数几个子组件需要共享状态的简单场景，逻辑清晰，没有额外的依赖。

实现示例

假设有两个子组件ChildA和ChildB，需要共享一个计数状态：

import React, { useState } from 'react';

// 子组件A，接收计数和修改计数的方法
const ChildA = ({ count, setCount }) => {
  return (
    <div>
      <p>ChildA中的计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>ChildA增加计数</button>
    </div>
  );
};

// 子组件B，接收计数和修改计数的方法
const ChildB = ({ count, setCount }) => {
  return (
    <div>
      <p>ChildB中的计数：{count}</p>
      <button onClick={() => setCount(count - 1)}>ChildB减少计数</button>
    </div>
  );
};

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

  return (
    <div>
      <h3>状态提升示例</h3>
      <ChildA count={count} setCount={setCount} />
      <ChildB count={count} setCount={setCount} />
    </div>
  );
};

export default Parent;

方案二：Context API

当共享状态的子组件层级比较深，或者多个不相邻的子组件都需要使用同一个状态时，状态提升会导致props层层传递，出现props钻透的问题，这时候可以使用React内置的Context API。

Context API可以创建一个全局的状态容器，所有订阅了这个Context的组件都可以直接获取状态，不需要通过中间组件传递props。

实现示例

还是以共享计数状态为例，使用Context实现：

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

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

// Context提供者组件
const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);

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

// 子组件A，通过useContext获取状态
const ChildA = () => {
  const { count, setCount } = useContext(CountContext);
  return (
    <div>
      <p>ChildA中的计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>ChildA增加计数</button>
    </div>
  );
};

// 子组件B，通过useContext获取状态
const ChildB = () => {
  const { count, setCount } = useContext(CountContext);
  return (
    <div>
      <p>ChildB中的计数：{count}</p>
      <button onClick={() => setCount(count - 1)}>ChildB减少计数</button>
    </div>
  );
};

// 根组件，用Provider包裹需要共享状态的组件
const App = () => {
  return (
    <CountProvider>
      <h3>Context API示例</h3>
      <ChildA />
      <ChildB />
    </CountProvider>
  );
};

export default App;

方案三：第三方状态管理库

如果应用的状态非常复杂，多个组件之间需要共享大量状态，且状态的修改逻辑比较复杂，那么可以使用Redux、MobX等第三方状态管理库。

这类库提供了更完善的状态管理机制，包括状态修改的可预测性、调试工具、中间件支持等，适合中大型应用使用。

简单对比

注意事项

• 不要过度使用Context，只有真正需要全局共享的状态才放在Context中，避免不必要的重渲染。
• 状态提升时，尽量把状态放在最近的共同父组件中，减少props传递的层级。
• 使用第三方状态管理库时，遵循库的最佳实践，避免随意修改状态。

选择子组件状态传递方案时，优先从简单方案开始，只有简单方案无法满足需求时再考虑更复杂的方案，避免过度设计。

React子组件通信状态提升ContextuseContext修改时间：2026-07-08 12:12:34