本文介绍如何通过 react 内置的 memo 与 purecomponent 机制，在父组件统一管理状态的前提下，精准控制兄弟组件的重渲染行为，确保仅当相关 props 变化时才触发对应子组件更新。
本文介绍如何通过 react 内置的 memo 与 purecomponent 机制，在父组件统一管理状态的前提下，精准控制兄弟组件的重渲染行为，确保仅当相关 props 变化时才触发对应子组件更新。
在 React 应用中，兄弟组件间共享状态最自然的方式是将状态提升至共同父组件（Lifting State Up）。但若不加优化，父组件每次 setState 都会触发整棵子树重渲染——即使某些子组件接收的 props 实际未变化（如点击 Child1 仅修改 b，却导致依赖 c 的 Child3 也重渲染），这会显著影响性能。
核心解决方案是：对子组件进行浅层 props 比较，跳过无变化时的渲染。React 提供了两种官方推荐方式，分别适配不同组件类型：
✅ 函数组件：使用 React.memo + useCallback
React.memo 是函数组件的性能优化高阶组件，它会对当前 props 进行浅比较（shallow comparison），仅当 props 发生变化时才重新渲染。但需注意：函数型 props（如 onClick）必须稳定，否则每次父组件渲染都会生成新函数引用，导致 memo 失效。
import { useState, useCallback } from 'react';
const Child1 = React.memo(({ a, onClick }) => {
console.log('Child1 rendered');
return <button onclick="{onClick}">a: {a}</button>;
});
const Child2 = React.memo(({ b, onClick }) => {
console.log('Child2 rendered');
return <button onclick="{onClick}">b: {b}</button>;
});
const Child3 = React.memo(({ c, onClick }) => {
console.log('Child3 rendered');
return <button onclick="{onClick}">c: {c}</button>;
});
const Parent = () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
const [c, setC] = useState(3);
// ✅ 使用 useCallback 确保函数引用稳定
const handleChild1Click = useCallback(() => setB(prev => prev + 1), []);
const handleChild2Click = useCallback(() => setC(prev => prev + 1), []);
const handleChild3Click = useCallback(() => setA(prev => prev + 1), []);
console.log('Parent rendered');
return (
<div>
<child1 a="{a}" onclick="{handleChild1Click}"></child1><child2 b="{b}" onclick="{handleChild2Click}"></child2><child3 c="{c}" onclick="{handleChild3Click}"></child3>
</div>
);
};
? 验证效果：点击 Child1 后，仅 b 更新 → Child2 重渲染，Child1 和 Child3 的 console.log 不会再次执行，证明 memo 生效。
✅ 类组件：继承 PureComponent 或实现 shouldComponentUpdate
对于类组件，可直接继承 React.PureComponent（自动实现浅比较的 shouldComponentUpdate），或手动编写 shouldComponentUpdate 以支持更精细的逻辑（如忽略特定 prop 变化）。
class Child1 extends React.PureComponent {
render() {
console.log('Child1 rendered');
return <button onclick="{this.props.onClick}">a: {this.props.a}</button>;
}
}
class Child2 extends React.PureComponent {
render() {
console.log('Child2 rendered');
return <button onclick="{this.props.onClick}">b: {this.props.b}</button>;
}
}
class Child3 extends React.PureComponent {
render() {
console.log('Child3 rendered');
return <button onclick="{this.props.onClick}">c: {this.props.c}</button>;
}
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = { a: 1, b: 2, c: 3 };
// ✅ 绑定方法避免每次渲染创建新函数
this.handleChild1Click = this.handleChild1Click.bind(this);
this.handleChild2Click = this.handleChild2Click.bind(this);
this.handleChild3Click = this.handleChild3Click.bind(this);
}
handleChild1Click() {
this.setState(prev => ({ ...prev, b: prev.b + 1 }));
}
handleChild2Click() {
this.setState(prev => ({ ...prev, c: prev.c + 1 }));
}
handleChild3Click() {
this.setState(prev => ({ ...prev, a: prev.a + 1 }));
}
render() {
console.log('Parent rendered');
return (
<div>
<child1 a="{this.state.a}" onclick="{this.handleChild1Click}"></child1><child2 b="{this.state.b}" onclick="{this.handleChild2Click}"></child2><child3 c="{this.state.c}" onclick="{this.handleChild3Click}"></child3>
</div>
);
}
}
⚠️ 关键注意事项
- 函数 props 必须稳定：无论是 useCallback 还是 bind，目的都是避免函数引用频繁变更，这是 memo/PureComponent 正常工作的前提。
- 浅比较局限性：memo 和 PureComponent 默认只做浅比较。若 props 包含嵌套对象或数组，且仅内部属性变化，需自定义比较逻辑（memo(Component, areEqual) 或 shouldComponentUpdate 返回 false）。
- 避免滥用 shouldComponentUpdate：除非有明确性能瓶颈，优先使用 memo 或 PureComponent；手动实现易出错且维护成本高。
- 现代推荐方案：React 官方已将类组件标记为“legacy”，新项目应优先采用函数组件 + Hooks 组合，代码更简洁、逻辑更内聚。
通过上述方式，你无需引入 Redux、Context 或第三方库，即可在保持状态集中管理的同时，实现精细化的渲染控制——既保障数据一致性，又杜绝性能浪费。
