React 避坑指南：彻底搞定不必要的重新渲染

404星球的猫
154 阅读4分钟

“我的页面就改了个弹窗开关，为什么整个列表都闪了一下？”
—— 如果你也曾这样怀疑人生，这篇内容就是为你写的。

一、为什么“重新渲染”这么贵？

React 的默认行为是：父组件一更新，所有子组件无条件跟着渲染。
在小型 Demo 里这没什么，但在真实业务里：

  • 列表 1000 项，每项 20 个 DOM，一次渲染就是 2 万次比对；
  • 图表、表格、富文本编辑器初始化一次要几百毫秒；
  • 低端手机掉帧、风扇狂转、用户开始骂娘。

性能优化第一性原理：
“不要阻止 React 更新，而是让它根本没必要更新。”

二、10 个实战招式，招招致命

招式一句话记忆典型场景代码片段
① React.memo“子组件 props 没变就别来烦我”纯展示组件export default React.memo(Card)
② useCallback“函数引用给我稳住”传给子组件的回调const onClick = useCallback(() => {}, [id])
③ useMemo“对象/数组也给我稳住”过滤、排序、映射const list = useMemo(() => filter(raw), [raw, key])
④ 状态下放“状态别放爷爷组件”弹窗、开关、表单把 isOpen 放到 <Modal> 父级，而非 App 根
⑤ 拆分小组件“大组件=大锅饭”列表项、卡片1000 行上帝组件拆成 20 行 Item 组件
⑥ 容器/展示“数据层与视图层离婚”任何页面容器取数 → 展示 memo
⑦ Context 拆值“Context value 别每次新对象”主题、用户用 useMemo 包 value，或拆成两个 Context
⑧ 禁用 render 新建组件“别在函数里写函数组件”动态渲染组件定义放顶层
⑨ 状态管理库“props drilling 超过 3 层就上库”跨页面共享Zustand / Redux / Jotai
⑩ Profiler 复盘“先量化，再优化”任何优化前后React DevTools → Profiler → 录制 → 对比

三、案例复盘：一个“搜索列表”从 450 ms 到 45 ms

1. 背景

  • 商品列表 500 条，支持关键字搜索、分类筛选；
  • 每次输入字符，整个页面闪一下，搜索框掉帧；
  • 测试手机：Redmi Note 9。

2. 问题定位（Profiler）

  1. 输入字符 → 根组件 setState → 整页重新渲染；
  2. 列表项组件未 memo，每条都执行 render；
  3. 过滤函数在 render 内执行，O(n) 复杂度 × 500；
  4. 回调函数每次新建，导致 memo 失效。

3. 四步优化

Step 1 状态下放
把搜索关键字 keyword 从 App 根级放到 <SearchList> 组件，其他模块不再受牵连。

Step 2 缓存计算

const filtered = useMemo(
  () => goods.filter(g => g.name.includes(keyword)),
  [goods, keyword]
);

Step 3 缓存回调

const onAddCart = useCallback((id) => cart.add(id), [cart]);

Step 4 列表项 memo

const Item = React.memo(({ goods, onAddCart }) => (
  <div>
    <span>{goods.name}</span>
    <button onClick={() => onAddCart(goods.id)}>加购</button>
  </div>
));

4. 结果

  • 输入字符时，仅 SearchList 与列表重新渲染，Header、Sidebar、Footer 纹丝不动；
  • 单次渲染耗时从 450 ms → 45 ms；
  • 掉帧率从 18% → 0%。

四、最容易踩的 5 个“反模式”

  1. 在 render 里写箭头函数
    <button onClick={() => handleClick(id)} />
    → 每次新引用，子组件 memo 失效。

  2. 在 render 里新建对象
    <Child style={{ color: 'red' }} />
    → 同上，用 useMemo 或提前声明常量。

  3. 把函数组件写在另一个组件内部
    见上文“新建组件类型”。

  4. 滥用 key 来“刷新”组件
    只有身份变更才改 key，局部数据更新请用状态。

  5. Context value 直接传对象字面量

    <AuthCtx value={{ user, setUser }}>

    → 每次渲染都生成新对象，所有消费者重渲染。
    解决：

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

五、checklist：上线前必查的 8 个问题

  1. 所有纯展示组件都包 React.memo 了吗？
  2. 传给 memo 组件的函数都用 useCallback 缓存了吗？
  3. 对象/数组 props 都用 useMemo 缓存了吗？
  4. 状态是否放在“最近公共祖先”？
  5. 列表 key 用的是稳定 ID 而不是索引？
  6. 过滤/排序放在 render 里了吗？挪进 useMemo！
  7. 有 props drilling 超过 3 层吗？考虑 Context 或状态库。
  8. 用 Profiler 录制一次主流程，确认没出现“黄色长条”。

六、写在最后

优化重新渲染，就像给 React 应用做“断舍离”：
少一点不必要的更新，多一点丝滑的体验。
把这 10 个招式练成肌肉记忆，你也能在 Code Review 时自信地留下那句：

“这段我 memo 过了，放心合并。”

祝你的下一次 npm start 不再闪屏，愿所有列表都如丝般顺滑。

avatar
文章
阅读
粉丝