React-Redux性能优化

前面写了两篇文章《React组件性能优化》《Redux性能优化》，分别针对React和Redux在使用上的性能优化给了一些建议。可是React和Redux一块儿使用还须要一个工具React-Redux，这一篇就说一下React-Redux在使用上的一些性能优化建议。

React-Redux是官方的React和Redux连接工具

Provider

一个很简单的React组件，它主要的做用是把store放到context中，connect就能够获取store，使用store的方法，好比dispatch。其实没有被connect的组件经过声明contextTypes属性也是能够获取store，使用store的方法的，可是这个时候，若是使用dispatch修改了store的state，React-Redux并不能把修改后的state做为props给React组件，可能会致使UI和数据不一样步，因此这个时候必定要清楚本身在作什么。

connect

一个柯里化函数，函数将被调用两次。第一次是设置参数，第二次是组件与 Redux store 链接。connect 函数不会修改传入的 React 组件，返回的是一个新的已与 Redux store 链接的组件，并且你应该使用这个新组件。connect的使用方式是connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)，第一次调用的时候4个参数都是可选。

1. mapStateToProps在store发生改变的时候才会调用，而后把返回的结果做为组件的props。

2. mapDispatchToProps主要做用是弱化Redux在React组件中存在感，让在组件内部改变store的操做感受就像是调用一个经过props传递进来的函数同样。通常会配合Redux的bindActionCreators使用。若是不指定这个函数，dispatch会注入到你的组件props中。

3. mergeProps用来指定mapStateToProps、mapDispatchToProps、ownProps(组件自身属性)的合并规则，合并的结果做为组件的props。若是要指定这个函数，建议不要太复杂。

4. options里面主要关注pure，若是你的组件仅依赖props和Redux的state，pure必定要为true，这样可以避免没必要要的更新。

5. Component就是要被链接的React组件，组件能够是任意的，不必定是AppRoot。通常会是须要更新store、或者是依赖store中state的最小组件。由于被链接的组件在Redux的state改变后会更新，大范围的更新对性能不友好，并且其中有些组件多是不必更新也会更新，因此要尽可能拆分、细化，connect仅仅要更新store或依赖store的state的最小组件。

Reselect

mapStateToProps也被叫作selector，在store发生变化的时候就会被调用，而不论是不是selector关心的数据发生改变它都会被调用，因此若是selector计算量很是大，每次更新都从新计算可能会带来性能问题。Reselect能帮你省去这些不必的从新计算。
Reselect 提供 createSelector 函数来建立可记忆的 selector。createSelector 接收一个 input-selectors 数组和一个转换函数做为参数。若是 state tree 的改变会引发 input-selector 值变化，那么 selector 会调用转换函数，传入 input-selectors 做为参数，并返回结果。若是 input-selectors 的值和前一次的同样，它将会直接返回前一次计算的数据，而不会再调用一次转换函数。这样就能够避免没必要要的计算，为性能带来提高。

总结

谨慎使用context中的store

被connect组件更新的时候影响范围尽可能小，避免没必要要更新

使用Resselect避免没必要要的selector计算

参考

React-Redux

Reselect