React 性能优化

React key、虚拟 DOM、memo、并发更新、列表渲染、运行时性能、资源加载和性能治理面试题。

本章内容

• 为什么在 React 中遍历时不建议使用索引作为唯一的 key 值？
• 为什么 React 使用虚拟 DOM 来提高性能？
• memo、useMemo、useCallback 应该什么时候用？
• 如何使用 React Profiler 定位组件性能问题？
• React 组件为什么会重渲染？如何系统减少无效重渲染？
• 为什么状态下沉和状态就近放置能提升 React 性能？
• React 大列表为什么需要虚拟化？如何设计虚拟列表？
• React 超大表格如何优化渲染和交互性能？
• React 代码分割、lazy 和 Suspense 如何配合优化首屏？
• React Compiler 会如何影响手动性能优化？
• startTransition 和 useDeferredValue 如何改善 React 交互性能？
• React 应用如何建立 Web Vitals 和 RUM 性能体系？
• React 应用如何消除数据请求瀑布并设计请求缓存？
• React 页面出现长任务和交互卡顿时如何优化？
• React 应用如何排查内存泄漏和 effect 清理问题？
• React 应用如何优化图片、字体和静态资源加载？
• React SSR 应用如何优化 hydration 性能和一致性？
• React 应用中的布局抖动和掉帧如何排查？
• 如何为 React 项目建立性能预算和回归门禁？