第三节：React 基础篇-React组件通信方案

React 组件通信方案详解及使用场景

以下是 React 组件通信的常用方法及其适用场景，以层级结构呈现：

一、父子组件通信

1. Props 传递

• 实现方式 ：

• 父组件通过 props 向子组件传递数据。

• 子组件通过回调函数 (onEvent) 通知父组件更新。

• 示例：

jsx 复制代码

// 父组件
function Parent() {
  const [count, setCount] = useState(0);
  return <Child count={count} onIncrement={() => setCount(c => c + 1)} />;
}

// 子组件
function Child({ count, onIncrement }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={onIncrement}>+1</button>
    </div>
  );
}

• 适用场景 ：直接父子关系，数据流简单明确。

• 优化技巧 ：使用 React.memo 避免子组件无效渲染。

2. 子组件暴露方法 (useImperativeHandle)

• 实现方式 ：

• 父组件通过 ref 调用子组件暴露的方法。

• 示例：

```jsx

// 子组件

const Child = forwardRef((props, ref) => {

useImperativeHandle(ref, () => ({

reset: () => console.log("Reset triggered")

}));

return ;

});

复制代码

// 父组件
function Parent() {
  const childRef = useRef();
  return (
    <>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.reset()}>Reset</button>
    </>
  );
}
```

• 适用场景：父组件需主动触发子组件行为（如表单重置）。

二、兄弟组件通信

1. 状态提升 (Lifting State Up)

• 实现方式 ：

• 将共享状态提升至最近的共同父组件，通过 props 分发。

• 示例：
jsx function Parent() { const [theme, setTheme] = useState("light"); return ( <> <ThemeSwitcher theme={theme} setTheme={setTheme} /> <Content theme={theme} /> </> ); }

• 适用场景 ：兄弟组件共享简单状态，层级较近。

• 缺点：可能导致父组件臃肿（Prop Drilling）。

2. Context API

• 实现方式 ：

• 创建 Context 对象跨层级传递数据。

• 示例：

```jsx

const ThemeContext = createContext();

复制代码

function App() {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const { theme } = useContext(ThemeContext);
  return <button className={theme}>Apply Theme</button>;
}
```

• 适用场景 ：多层级组件共享状态（如主题、用户信息）。

• 优化方案 ：拆分 Context 或使用 useMemo 避免过度渲染。

三、复杂场景通信

1. 状态管理库 (Redux/Zustand)

• Redux 示例：

jsx 复制代码

// Store 配置
const store = configureStore({ reducer: counterReducer });

// 组件连接
function Counter() {
  const count = useSelector(state => state.value);
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(increment())}>{count}</button>
  );
}

• Zustand 示例：

jsx 复制代码

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>;
}

• 优势：集中管理复杂状态，支持中间件和调试工具。

• 选择建议 ：

• Redux ：大型应用，需严格状态追踪。

• Zustand：轻量级需求，快速集成。

2. useSyncExternalStore（React 18+）

• 实现方式 ：

• 订阅外部存储（如 Redux Store）并同步状态。

• 示例：
jsx function ReduxCounter() { const count = useSyncExternalStore( store.subscribe, () => store.getState().count ); return <div>{count}</div>; }

• 应用场景 ：集成外部状态管理库，确保并发模式兼容性。

• 优势：替代 useEffect 订阅，避免状态撕裂 (Tearing)。

四、方案对比与选择指南

通信方式	适用场景	优点	缺点
Props/Callback	简单父子组件	直接易用	Prop Drilling
Context	跨层级共享低频状态	避免层层传递	性能敏感场景需优化
Redux/Zustand	复杂全局状态（用户会话、主题）	可预测性强，工具链完善	学习成本较高
useSyncExternalStore	集成外部存储 + 并发模式支持	高性能，框架级集成	需手动管理订阅逻辑

五、最佳实践建议

优先局部状态 ：能用 useState/useReducer 解决的问题，不提升状态。
慎用 Context：避免高频更新数据（如每秒变化的计数器）通过 Context 传递。
按需选择库：中小项目优先考虑 Zustand，大型应用使用 Redux。
性能优化 ：对大型列表或复杂组件使用 memo/useMemo。