React 性能优化

[coleava]

渲染性能的三个方向

• 减少计算的量。 -> 对应到 React 中就是减少渲染的节点 或者 降低组件渲染的复杂度

  减少渲染的节点/降低渲染计算量(复杂度) 1 不要在渲染函数都进行不必要的计算 2 减少不必要的嵌套

  3. 虚拟列表

     • 无限滚动列表，grid, 表格，下拉列表，spreadsheets
     • 无限切换的日历或轮播图
     • 大数据量或无限嵌套的树
     • 聊天窗，数据流(feed), 时间轴

  4. 惰性渲染 常用 Tab 组件，没有必要一开始就将所有 Tab 的 panel 都渲染出来，而是等到该 Tab 被激活时才去惰性渲染。 还有很多场景会用到惰性渲染，例如树形选择器，模态弹窗，下拉列表，折叠组件等等

  5. 选择合适的样式方案

  6. 避免重新渲染

     • 简化 props
     • 不变的事件处理 避免使用箭头函数形式的事件处理器 使用useCallback来包装事件处理器，尽量给下级组件暴露一个静态的函数
     • 简化 state

• 利用缓存。-> 对应到 React 中就是如何避免重新渲染，利用函数式编程的 memo 方式来避免组件重新渲染

• 精确重新计算的范围。 对应到 React 中就是绑定组件和状态关系, 精确判断更新的'时机'和'范围'. 只重新渲染'脏'的组件，或者说降低渲染范