react项目性能优化实践经验总结

1. 代码片段执行时间

console.time('xxx')

// 代码片段

console.timeEnd('xxx')

在代码片段包裹上述代码，执行后，命令行会输出该段代码的执行时间，非常方便。

2. react Profile

react的<Profiler/>包裹组件后，并传入id和onRender回调函数。

id是一个唯一标识符，用于区分不同的Profiler实例；onRender是一个回调函数，每次组件树渲染完成时都会被调用，提供大量关于渲染过程的信息‌。

回调函数参数

• ‌id‌：标识正在测量的UI部分。
• ‌phase‌：表示组件树的挂载（mount）、更新（update）或嵌套更新（nested-update）。
• ‌actualDuration‌：本次更新渲染树所花费的时间（毫秒）。
• ‌baseDuration‌：估算在不使用记忆化（如memo和useMemo）的情况下重新渲染整棵子树所需的时间。
• ‌startTime‌：React开始渲染的时间戳。
• ‌commitTime‌：React提交更新的时间戳‌12。

性能数据解读和优化建议

通过分析Profiler收集的数据，可以了解到哪些组件渲染较慢，从而有针对性地进行性能优化。常见的优化方式包括：

• ‌避免不必要的组件重新渲染‌：使用React.memo进行组件的浅比较。
• ‌减少组件层级‌：尽量避免过深的组件嵌套。
• ‌懒加载组件‌：使用React.lazy和Suspense实现组件的懒加载。
• ‌减小组件大小‌：拆分大型组件，优化组件内部的代码逻辑‌