面试react 篇 -性能优化怎么回答

哪些 React 性能优化的手段？

• 问法：  如何解决 React 列表卡顿？

• 参考答案：

  • 组件层面：  使用 React.memo 包裹函数组件，避免父组件更新导致子组件不必要的重渲染（浅比较 props）15。
  • 函数引用：  使用 useCallback 缓存函数引用，防止传递给子组件的函数每次都变，导致子组件 React.memo 失效。
  • 计算缓存：  使用 useMemo 缓存复杂的计算结果，避免每次渲染都重新计算。
  • 代码分割：  使用 React.lazy 和 Suspense 实现路由或组件的懒加载，减少首屏加载体积13。
  • 列表优化：  使用 key 优化列表复用，对于长列表可以使用 react-window 等库实现虚拟滚动，只渲染可视区域的内容1。

 React 18 相比之前版本有哪些重大变化？

• 问法：  你了解 React 18 的新特性吗？

• 参考答案：

  • 并发渲染：  这是核心。React 18 开启了并发特性，允许渲染过程被中断和恢复，从而优先处理高优先级任务（如用户输入）。
  • 自动批处理：  在 React 18 之前，只有 React 事件处理函数内的多次 setState 会合并（批处理）。在 React 18 中，Promise、setTimeout、原生事件中的多次状态更新也会自动合并，只触发一次重渲染，大幅提升性能。
  • 新的根 API：  使用 createRoot 替代了 ReactDOM.render。
  • 新的 Hooks：  如 useId（用于生成唯一 ID，解决 SSR 问题）、useTransition（标记非紧急更新，让界面响应更流畅）5。