React-Redu性能优化

2016-07-30 23:46:00

前面写了两篇文章《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个参数都是可选。

mapStateToProps在store发生改变的时候才会调用，然后把返回的结果作为组件的props。
mapDispatchToProps主要作用是弱化Redux在React组件中存在感，让在组件内部改变store的操作感觉就像是调用一个通过props传递进来的函数一样。一般会配合Redux的bindActionCreators使用。如果不指定这个函数，dispatch会注入到你的组件props中。
mergeProps用来指定mapStateToProps、mapDispatchToProps、ownProps(组件自身属性)的合并规则，合并的结果作为组件的props。如果要指定这个函数，建议不要太复杂。
options里面主要关注pure，如果你的组件仅依赖props和Redux的state，pure一定要为true，这样能够避免不必要的更新。
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 的值和前一次的一样，它将会直接返回前一次计算的数据，而不会再调用一次转换函数。这样就可以避免不必要的计算，为性能带来提升。