React 性能陷阱：未优化子组件重新渲染

—— 从“全员重绘”到“精准更新”的急救指南

当你在 React DevTools Profiler 里看到：

ChildComponent 渲染了 200 次，但 props 没变？

99% 是「父组件状态变化 → 所有子组件跟着重渲染」——未优化渲染范围。
本文用「原理 → 检测 → 优化」三步法，3 分钟拆掉性能炸弹。

---

一、为什么会“全员重渲染”？

React 默认策略：

1. 父组件 setState → 整棵树重新 render；
2. 只有 React.memo / shouldComponentUpdate 能跳过子树；
3. 若子组件引用未变但未包裹 memo，仍会执行函数体。

---

二、4 个高频翻车现场 & 修复

1️⃣ 父组件传「新引用」给子组件

function Parent() {
  const [count, setCount] = useState(0);
  const style = { color: 'red' }; // ❌ 每次 render 都是新对象
  return <Child style={style} />;
}

修复：用 useMemo 稳定引用

const style = useMemo(() => ({ color: 'red' }), []);

---

2️⃣ 函数回调每次新建

function Parent() {
  const handleClick = () => console.log('click'); // ❌ 新函数
  return <Child onClick={handleClick} />;
}

修复：useCallback 缓存

const handleClick = useCallback(() => console.log('click'), []);

---

3️⃣ 列表项无 key 或 key 用 index

{todos.map((todo, i) => (
  <TodoItem key={i} todo={todo} />   // ❌ index 变化 → 整列重渲染
))}

修复：用唯一 id

{todos.map(todo => (
  <TodoItem key={todo.id} todo={todo} />
))}

---

4️⃣ 子组件未包裹 memo

function Child({ data }) {
  console.log('Child render'); // ❌ 每次父组件更新都会执行
  return <div>{data.name}</div>;
}

修复：React.memo + 稳定引用

export default React.memo(Child);

---

三、性能检测 2 件套

工具	用法	效果
React DevTools Profiler	录制 → 查看“Why did this render?”	发现多余渲染
ahooks useWhyDidYouUpdate	打印变化 props	定位不稳定引用

---

四、决策树（贴在屏幕）

子组件纯展示？ → 是 → 包 React.memo
│
依赖引用稳定？ → 否 → useMemo / useCallback
│
列表渲染？ → 是 → 唯一 key + memo

---

五、一句话总结

「只让变化的部分重渲染」——用 React.memo + 稳定引用 + 唯一 key，
其余直接写，让 React 飞得更快。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《 React开发实践：掌握Redux与Hooks应用 》