react-redux性能优化问题

Question

react-redux将组件划分为容器组件和ui组件，容器组件使用mapStateToProps方法从store取数据,传递给ui组件。为了避免不必要的重渲染，ui组件最好使用shouldComponentUpdate方法来检查一下传进来的state。
但是react-redux提供的mapStateToProps方法自带shallowEqual来比较，相当于自带了shouldComponentUpdate方法来进行优化。
那么有一个疑问，为什么不把所有组件都connect(mapStateToProps, mapDispatchToProps)(component);呢？这样每个组件所需的数据在更新时，都不会影响其他的组件。。为什么不能这样做呢？

Answer 1

sf里有篇文章，挺好的，推荐给你看，或许你会明白。https://segmentfault.com/a/11...

Answer 2

楼主想法很好,但需要给你解释一下为什么不能做了:
1:connect的组件,在redux state树中任意一个状态变化,所有的mapStateToProps都会调用一变.你可以想想一下,你有100个connect后的组件,那么因为你fetch一次,只需修改store中的一项数据,而产生的后果就是你的100个组件中的mapStateToProps都会被调用一变,这紧紧是你的一个小操作而已.带来的直观后果就是app卡.
2:如果非要这么做,需要在connect后的组件,后者子组件中做好shouldComponentUpdate()判断.但是,问题又来了,js 对象是如果要比较是否一致,浅比较是不可行的,那么深比较是不是又会消耗运算的性能呢?回答是肯定的.

建议:
connect 订阅自己关心的数据.
UI 层只做数据展示,由父组件通过props传入(不关心数据从哪里来),做好自己需要的数据前后是否一致判断就可以了.
至于数据一致性判断,引用immtable.js 是不二之选(但 改动较大,请慎重.ps:如果上了immtable.js mapStateToProps的时候,immtable对象 toJS() 转js对象 万万使不得).

拙见,望能帮到你.