先上图
文章系列主要内容如下:
减少重复渲染
列表懒加载
动画和数据请求分离
导航闪动
本次主要内容:减少重复渲染
在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; }
对于需要对数组判断的情况,上面的做法可能不正确
因为在操作数组是我们是操作的同一个数组,在操作的过程中nextProps
和nextState
的值已经相同了,如果要让他不同,必须用redux的提供的官方操作,先拷贝数组对象再操作,或者[].concat()
(concat会返回一个新数组,类似拷贝对象)。然后我们在shouldComponentUpdate
中判断nextProps
和nextState
就行了,这是的判断结果才会是正确的。
这个时候我们又遇到了新的问题
如果组件中一部分需要渲染,一部分不需要渲染怎么办?
这个时候就改考虑组件拆分的问题了,其实组件拆分不仅能提高代码的可读性,也可以对组件优化起一臂之力。
作者:azothaw
链接:https://www.jianshu.com/p/b9b311f04707
。