微信号:ardays

介绍:android每日绝对干货

react + redux性能优化之重复渲染

2017-12-04 12:55 azothaw

文章系列主要内容如下:

  • 减少重复渲染

  • 列表懒加载

  • 动画和数据请求分离

  • 导航闪动



本次主要内容:减少重复渲染
在react +redux 架构的项目中,只要state发生改变,整个项目都会被渲染,
那么如何减少重复渲染呢?

列表重复渲染

react 的生命周期提供了一个方法判断组件是否更新

//true表示更新,false表示不更新
shouldComponentUpdate:
function(nextProps, nextState) {    return true; }


对于不需要重复渲染的组件我们可以:
shouldComponentUpdate:
function(nextProps, nextState) {
    return false;

}

对于需要通过对某个数值判断是否渲染的,我们可以:
shouldComponentUpdate:

function(nextProps, nextState) {    return this.props.value !== nextProps.value; }

对于需要对数组判断的情况,上面的做法可能不正确

因为在操作数组是我们是操作的同一个数组,在操作的过程中nextPropsnextState的值已经相同了,
如果要让他不同,必须用redux的提供的官方操作,先拷贝数组对象再操作,或者
[].concat()(concat会返回一个新数组,类似拷贝对象)。
然后我们在
shouldComponentUpdate中判断nextPropsnextState就行了,这是的判断结果才会是正确的。


这个时候我们又遇到了新的问题
如果组件中一部分需要渲染,一部分不需要渲染怎么办?

这个时候就改考虑组件拆分的问题了,其实组件拆分不仅能提高代码的可读性,也可以对组件优化起一臂之力。


 
Android每日干货 更多文章 探索ES2015:箭头函数(Arrow Functions) 微信浏览器踩坑集锦 详解Object.defineProperty() 基于css选择器设计交互效果时的一些思考 CSS学习笔记(渐变色文本)
猜您喜欢 十分钟带你上手fabric 点融斯坦福CTO孔令欣讲创业:技术驱动文化建设 OpenStack CI\/CD之Solum使用 如何向 Hyperledger Fabric 项目贡献代码 论人生之转折