React常用的性能优化

组件加载优化

组件按需加载（需要使用再加载）

1.组件库按需加载

Webpack做Code Split

2.路由组件懒加载

Lazy与Suspence的使用

组件懒渲染（视图可见再加载）

图片懒加载

虚拟列表

---

API层面优化

• setState 的合并更新优化
• useMemo，useCallBack 缓存值优化
• memo，pureComponent 跳过不必要更新
• useMemo返回组件跳过不必要更新
• Fragement减少不必要层级

---

状态管理优化

• 状态放到公共父组件
• 状态下沉到自身组件

---

减少接口请求优化

1.Debounce,Throttle 

2.Modal弹窗优化

点击按钮，弹窗展示之后再发请求回显内容，而不是按钮展示时发请求，减少不必要的请求

---

其他层面

1.列表Key值选取

• 列表仅作展示时，index作为key比id作为key更快（在分页情况下）
• 其他情况都应该使用id作为key值

2.避免内联样式

需要转换为等效的 CSS 样式属性，然后才应用样式。这样就需要额外的脚本处理和 JS 执行工作。且会造成样式不一致的情况（覆盖问题）。更好的办法是将 样式 文件导入。

3.避免内联函数定义

4.为组件创建错误边界

5.CDN

6.CSS动画代替JS操作DOM