React 应用的性能怎么优化？怎么定位渲染问题？

详细解析#

先定位#

1. React DevTools Profiler：录制一次卡顿的操作，火焰图里能看到每次提交中渲染了哪些组件、各自耗时。在设置里打开"Record why each component rendered"，可以看到渲染原因：props 变了、state 变了、Hook 变了，还是父组件渲染了
2. 高亮更新：DevTools 设置中勾选"Highlight updates when components render"，操作时闪烁的区域就是重新渲染的组件，一眼能看出影响范围是否过大
3. Performance 面板：看有没有超过 50ms 的长任务、时间花在脚本执行还是样式布局上。较新的 React 版本还会在这里显示 React 自己的轨道（Performance Tracks），能看到各优先级的调度和组件渲染
4. <Profiler> 组件：onRender 回调拿到每次提交的耗时，可以在代码里统计。它在默认的生产构建中不生效，线上采集需要专门开启 profiling 构建

性能问题要在生产构建下验证，开发构建有大量额外检查，会慢很多。

为什么会多余地渲染#

• 父组件渲染，子组件默认全部跟着渲染，不管 props 有没有变
• Context 的 value 变化：所有读取它的组件都会渲染，memo 也挡不住，见 Context 的性能问题
• 每次渲染创建新的对象、数组、函数作为 props，memo 的浅比较永远不相等
• 状态放得太高：一个输入框的 state 放在页面根组件，每输入一个字符整页都渲染

优化手段#

React Compiler#

React Compiler 在构建时自动插入记忆化，原理见 memo 的用法。接入时要知道三点：编译器发现可能违反 React 规则的代码会跳过优化，但不能保证发现所有违规，配合它的 ESLint 规则检查更稳妥；已有项目建议逐步开启并充分测试，原有的手写记忆化先保留，删掉可能改变编译结果；它只能减少"新引用导致的多余渲染"，解决不了状态放错位置、列表太长、包太大这类问题。

代码示例：状态下放和 children#

// 优化前：每次输入，ExpensiveTree 都会重新渲染
function Page() {
  const [color, setColor] = useState('red')
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <ExpensiveTree />
    </div>
  )
}

// 优化后：color 只影响 ColorPicker，ExpensiveTree 作为 children 传入
function ColorPicker({ children }) {
  const [color, setColor] = useState('red')
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      {children}
    </div>
  )
}

function Page() {
  return (
    <ColorPicker>
      <ExpensiveTree />
    </ColorPicker>
  )
}

ColorPicker 的 state 变化时，children 是 Page 上次渲染时创建的同一个元素对象，React 发现它没变，就跳过 ExpensiveTree，不需要任何 memo。

面试官可能追问#

易错点#

• 不测量就到处加 memo、useMemo，优化了不慢的地方，真正慢的地方没动
• 在开发构建下测性能，开发模式的额外检查和 StrictMode 的双重渲染会让数据失真
• 以为用了 React Compiler 就不会有性能问题，结构性的问题仍然要自己解决