react 组件性能优化

影响网页性能最大的因素是浏览器的重绘(reflow)和 重排 (repaint)。react 背后的 virtual dom 就是尽可能的减少浏览器的重绘与重排。

1、纯函数组件

输入一样,输出就一样,减少了判断是否需要重新渲染的过程

2、shouldComponentUpdate

通过条件判断减少重新渲染

3、PureComponent

自带浅比较

4、key 

可以依据 key 来进行节点的更新

5、Immutable 数据持久化?

数据可变性可以起到节省内存的目的,但是也有很多隐患,使得优点变的得不偿失

Immutable.is  进行值的深度比较性能更好,所以可以用在 shouldComponentUpdate  中进行数据的深度比较

state 不能直接修改,修改前要先深拷贝一份,如果用 Immutable 会相对简单

react 组件性能优化_第1张图片

7、如果使用 redux

reselect

redux-immutable?

你可能感兴趣的:(react 组件性能优化)