这几天陆陆续续看了一些关于React性能优化的博客,大部分提到的都是React 15.3新加入的PureComponent ,通过使用这个类来减少React的重复渲染,从而提升页面的性能。使用过React的朋友都知道,React组件只有在state和props发生改变时才会触发render,如果state和props没有发生改变,render就不执行。通常在写页面的时候,如果没有使用PureComponent类,为了避免重复渲染而产生的性能问题,我们会使用shouldComponentUpdate手动来比较页面是否需要重新渲染,这时我们是可以进行深比较的,也就是将当前的state与nextState或者props与nextProps一层一层进行比较,如果比较发现不相等,这个函数就返回true从而使组件重新渲染,如果比较后发现值没有改变则返回false来阻止组件重新渲染。当我们使用了PureComponent类后,就不再需要手动检查组件是否需要重新渲染了,因为PureComponent会帮我们检查state和prop是否发生改变,从而决定是否要调用render方法,从而提高性能。但是需要注意的是,使用PureComponent时,React只是做了最外层的浅比较:
if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}
shadowEqual只会浅检查组件的props和state,所以嵌套对象和数组是不会被比较的。所以使用了PureComponent的时候,我们要特别注意这一点。
好了,今天要分享的除了上面的关于PureComponent的原理外,还要分享一篇关于React性能优化的干货博客,
英文原文: React Performance Fixes on Airbnb Listing Pages:https://medium.com/airbnb-engineering/recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4
译文:Airbnb 爱彼迎房源详情页中的 React 性能优化:https://juejin.im/entry/5bab390c5188255c8a06013f