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

先上图

文章系列主要内容如下：

• 减少重复渲染
• 列表懒加载
• 动画和数据请求分离
• 导航闪动

本次主要内容：减少重复渲染

在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就行了，这是的判断结果才会是正确的。

这个时候我们又遇到了新的问题

如果组件中一部分需要渲染，一部分不需要渲染怎么办？

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

欢迎大家关注我的简述，我后续会根据我们项目继续更新这个系列文章^_