面试官：React 性能优化怎么做？

参考链接：React 函数式组件的性能优化
参考链接：React性能优化总结
参考链接：React组件设计之性能优化篇

减少render次数

• React.memo缓存组件
• 避免匿名函数，使用React.useCallback缓存函数
• PureComponent
• ShouldComponentUpdate
• 合理使用Context，只定义被大多数组件所共用的属性

减少计算量

• React.useMemo 缓存值
• 使用 Fragment 来避免添加额外的 DOM
• 使用key
• 合理使用css，性能上：CSS Module > CSS Classes > Inline Style
• 防抖节流

减少渲染量

• 懒加载组件（Suspense，Lazy）
• 虚拟列表
• 优化条件渲染，只针对最小化的部分进行if判断
• 预加载
• 可见性加载（react-loadable-visibility）

减少资源大小

• 懒加载代码（动态 import）

避免内存泄漏

• componentWillUnmount / useEffect return

合理的设计

• 组件合理拆分
• 合理使用props和state
• 减少组件嵌套

服务端渲染