react.js如何防止重复渲染

在 React 中，“防止重复渲染（不必要的重新渲染）”是性能优化的核心问题。下面从原理 → 常用手段 → 实战建议系统讲一下。

一、先理解：React 为什么会重复渲染

1. 组件自身 state 变化
2. 父组件重新渲染（默认子组件也会渲染）
3. props 引用变化（即使值一样）
4. Context 变化
5. 强制渲染（forceUpdate）

React 默认策略：
父组件渲染 → 所有子组件都会重新渲染（不管 props 是否变化）

二、防止重复渲染的核心方法

✅ 1. React.memo（函数组件）

避免props 没变却重新渲染

const Child = React.memo(function Child({ value }) {
  return <div>{value}</div>;
});

✅ 适用于：

• 纯展示组件
• props 是基本类型或稳定引用

⚠️ 注意：

• 默认是浅比较
• 如果 props 是对象/函数，引用变了仍会渲染

✅ 2. useMemo：缓存计算结果

避免重复计算 + 重复生成对象

const data = useMemo(() => heavyCompute(props), [props]);

也可用于稳定 props：

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

✅ 3. useCallback：缓存函数引用

防止函数 props 变化导致子组件渲染

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

配合 React.memo 使用效果最好：

<Child onClick={handleClick} />

✅ 4. 拆分组件（组合优于嵌套）

❌ 错误示例（一个 state 影响整个组件）：

function Page() {
  const [count, setCount] = useState(0);
  return (
    <>
      <ExpensiveComponent />
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
    </>
  );
}

✅ 优化：

function Page() {
  const [count, setCount] = useState(0);
  return (
    <>
      <Expensive />
      <Counter count={count} setCount={setCount} />
    </>
  );
}

✅ 5. 状态下沉（state 不要放太高层）

// ❌ 全局 state
function App() {
  const [open, setOpen] = useState(false);
}

// ✅ 局部 state
function Modal() {
  const [open, setOpen] = useState(false);
}

✅ 6. 使用 key 控制重建而不是更新

{isEdit ? <Form key="edit" /> : <Form key="create" />}

✅ 用于：

• 表单重置
• 避免状态污染

✅ 7. Context 优化（非常重要）

❌ 错误用法（一个小变化全量刷新）：

<Context.Provider value={{ user, theme }}>

✅ 拆分 Context：

<UserContext.Provider value={user}>
<ThemeContext.Provider value={theme}>

或使用 useMemo：

const value = useMemo(() => ({ user, theme }), [user, theme]);

✅ 8. 列表渲染优化

{list.map(item => (
  <ListItem key={item.id} item={item} />
))}

✅ 给稳定 key ✅ ListItem 用 React.memo

三、类组件方案（补充）

class Child extends React.PureComponent {}

等价于 React.memo

四、什么时候“不要”优化？

❌ 不要过早优化
❌ 不要为了少渲染写复杂代码
✅ 先保证正确，再优化慢的地方

五、调试工具

• React DevTools → “Highlight updates”
• why-did-you-render
• Profiler API

六、一句话总结

React 防止重复渲染的核心：
减少 state 影响范围 + 稳定 props 引用 + 合理使用 memo / useMemo / useCallback

如果你愿意，可以贴一段你的 React 代码，我可以直接帮你指出“哪里在重复渲染、怎么改”。