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

news2025/4/15 14:43:31

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

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

一、父子组件通信

1. Props 传递

• 实现方式：
• 父组件通过 props 向子组件传递数据。
• 子组件通过回调函数 (onEvent) 通知父组件更新。
• 示例：

// 父组件
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 示例：

// 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 示例：

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	集成外部存储 + 并发模式支持	高性能，框架级集成	需手动管理订阅逻辑