Web开发编程网
分享Web开发相关技术

关于React性能优化

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

译文:Airbnb 爱彼迎房源详情页中的 React 性能优化

未经允许不得转载:WEB开发编程网 » 关于React性能优化

WEB开发编程网

谢谢支持,我们一直在努力

安全提示:您正在对WEB开发编程网进行赞赏操作,一但支付,不可返还。