本文介绍如何通过 React 内置的 memoization 机制（如 React.memo 或 PureComponent）在父组件中集中管理状态的同时，确保仅当相关 props 变化时才触发对应子组件重渲染，从而彻底避免兄弟组件间的无效更新。
本文介绍如何通过 react 内置的 memoization 机制（如 `react.memo` 或 `purecomponent`）在父组件中集中管理状态的同时，确保仅当相关 props 变化时才触发对应子组件重渲染，从而彻底避免兄弟组件间的无效更新。
在 React 中，将共享状态提升至共同父组件是最自然、最符合数据流原则的方案。但若不加优化，父组件每次 setState 都会触发全量子树重渲染——即使某些子组件接收的 props 根本未变（例如点击 Child1 只修改 b，却导致 Child3（依赖 c）也重新渲染）。这种低效行为可通过 React 提供的浅比较优化机制轻松解决。
✅ 正确做法：结合稳定 props + 浅比较优化
核心要点有两个：
- 确保传给子组件的 props 是稳定的（尤其是函数类 prop），否则即使使用 memo 或 PureComponent，也会因引用变化而强制重渲染；
- 为子组件启用浅比较：函数组件用 React.memo，类组件用 PureComponent 或自定义 shouldComponentUpdate。
以下是以现代函数组件写法为主的推荐实现（React 官方已将类组件标记为 legacy）：
import { useState, useCallback } from 'react';
// 使用 React.memo 包裹子组件，仅当 props 浅相等时跳过渲染
const Child1 = React.memo(({ a, onClick }) => {
console.log('Rendering Child1'); // 仅当 a 或 onClick 引用变化时执行
return <button onclick="{onClick}">Value A: {a}</button>;
});
const Child2 = React.memo(({ b, onClick }) => {
console.log('Rendering Child2');
return <button onclick="{onClick}">Value B: {b}</button>;
});
const Child3 = React.memo(({ c, onClick }) => {
console.log('Rendering Child3');
return <button onclick="{onClick}">Value C: {c}</button>;
});
const Parent = () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
const [c, setC] = useState(3);
// 使用 useCallback 确保 onClick 函数引用稳定
const handleChild1Click = useCallback(() => setB(prev => prev + 1), []);
const handleChild2Click = useCallback(() => setC(prev => prev + 1), []);
const handleChild3Click = useCallback(() => setA(prev => prev + 1), []);
console.log('Rendering Parent'); // 每次状态更新都会执行（父组件必然重渲染）
return (
<div>
<child1 a="{a}" onclick="{handleChild1Click}"></child1><child2 b="{b}" onclick="{handleChild2Click}"></child2><child3 c="{c}" onclick="{handleChild3Click}"></child3>
</div>
);
};
export default Parent;
? 关键原理说明：
- React.memo 默认对 props 做浅比较（shallow equality）。若 a、b、c 是基础类型（number/string），且 onClick 函数引用不变，则 Child1 在 b 或 c 更新时完全不会重渲染；
- useCallback 防止每次渲染都创建新函数，保证 onClick prop 的稳定性；
- 父组件仍会重渲染（这是 React 渲染机制决定的），但子组件是否更新由 memo 控制——这才是性能优化的关键层。
⚠️ 常见错误与注意事项
-
❌ 错误写法（内联函数）：
<child1 a="{a}" onclick="{()"> setB(b => b + 1)} /> // 每次渲染都生成新函数 → memo 失效</child1> - ❌ 忘记 memo 或 PureComponent：子组件默认无优化，父重渲染即全部重渲染；
- ⚠️ 注意 memo 的局限性：它只做浅比较。若传入对象/数组且内容变更但引用未变（如 state.items.push()），需配合 useMemo 或深比较逻辑（极少数场景才需）；
-
? 进阶控制：可为 memo 提供自定义比较函数：
const Child = React.memo(({ value, onChange }) => { /* ... */ }, (prevProps, nextProps) => prevProps.value === nextProps.value );
? 总结
无需引入 Redux、Context 或第三方库（如 memoize-one），React 自带的 React.memo + useCallback 组合即可优雅解决兄弟组件状态共享与精准更新问题。其本质是：让父组件承担状态协调职责，让子组件自主决定“是否值得更新”。这既保持了单向数据流的清晰性，又实现了细粒度的渲染性能控制——是 React 应用性能优化的基石实践。
