react 性能优化
- 最近的这个项目,是一个大屏项目类似蚂蚁的datav,有着大量的ui交互,在多个组件的拖拽旋转缩放等操作会有出现比较严重的卡顿, 这种操作会导致组件在极短的时间内render几十甚至上百次, 对于这部分问题,使用shouldComponentupdata生命周期配合immutable库使用,减少了一部分的性能问题
- 使用防抖减少对redux store的dispatch请求, 移动的状态都封装在每个组件的内部,当停止拖拽等操作的时候,会一瞬间向store发起数个改变数据的dispatch请求.会导致页面在一瞬间的卡顿,使用防抖,对极短时间内的dispatch做拦截,并进行合并,合成一次进行dispatch请求;
- 缓存,页面中有一些方法存在加量的计算,对入参和返回参数进行缓存, 如果传入的参数在入参列表中, 就直接返回缓存的结果.
- react的 virtual dom 使用 diff 算法比对actual dom(实际dom树) 进行最少的操作. 在某些场景使用key进行性能优化, react 的diff算法进行了3大diff策略使得传统的diff算法时间复杂度从o(n^3)降低到o(n) 传统的diff算法两两比较节点复杂度为o(n^2)乘以寻找最小的转换成本o(n)最终的结果为o(n3),
- tree diff
- component diff
- element diff
tree diff 规定virtual 树和 actual 树进行同一层次的节点比较,如果节点不存在就会删除该节点,不会再进行比较
Component diff 同一类型的两个组件按照策略层级继续比较, 不同类型的两个组件将直接删除,重现创建新组件, 比如ab组件结构类似,但是react 判断为不同类型的组件,就不会比较,直接删除, 浪费的性能,可以通过shouldcomponentupdata来判断是否需要重新渲染;
element diff 节点处于同一层级是, diff算法提供3种节点操作,删除,插入,移动.列表循环使用key值 进行移动操作比较节省性能.
- 使用懒加载. react-lazyload
- 使用React Loadable 代码拆分等
