关于React性能优化

Posted 2021-01-11 xiaoweihuang

这几天陆陆续续看了一些关于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

转载地址：https://www.f2ecoder.net/857.html