摘要：但是和一起使用还需要一个工具，这一篇就说一下在使用上的一些性能优化建议。如果的改变会引起值变化，那么会调用转换函数，传入作为参数，并返回结果。如果的值和前一次的一样，它将会直接返回前一次计算的数据，而不会再调用一次转换函数。
前面写了两篇文章《React组件性能优化》《Redux性能优化》，分别针对React和Redux在使用上的性能优化给了一些建议。但是React和Redux一起使用还需要一个工具React-Redux，这一篇就说一下React-Redux在使用上的一些性能优化建议。
ProviderReact-Redux是官方的React和Redux链接工具
一个很简单的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的最小组件。
ReselectmapStateToProps也被叫做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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/86475.html
摘要：简介创建的函数，返回一个对象，包含等方法合并多个中间件处理，在实际的前调用一系列中间件，类似于绑定和函数式编程中常见的方法，介绍官方提供的绑定库。 前言 在学习了React之后， 紧跟着而来的就是Redux了~ 在系统性的学习一个东西的时候， 了解其背景、设计以及解决了什么问题都是非常必要的。接下来记录的是， 我个人在学习Redux时的一些杂七杂八~ Redux是什么 通俗理解 h...
摘要：本文转载至今日头条技术博客众所周知，的单向数据流模式导致状态只能一级一级的由父组件传递到子组件，在大中型应用中较为繁琐不好管理，通常我们需要使用来帮助我们进行管理，然而随着的发布，新成为了新的选择。 本文转载至：今日头条技术博客showImg(https://segmentfault.com/img/bVbiNJO?w=900&h=383);众所周知，React的单向数据流模式导致状态...
摘要：的优势保证不可变每次通过操作的对象都会返回一个新的对象丰富的性能好通过字典树对数据结构的共享的问题与原生交互不友好通过生成的对象在操作上与原生不同，如访问属性，。 Immutable.js Immutable的优势 1. 保证不可变（每次通过Immutable.js操作的对象都会返回一个新的对象） 2. 丰富的API 3. 性能好 （通过字典树对数据结构的共享） Immutab...
摘要：我们可以为元素添加属性然后在回调函数中接受该元素在树中的句柄，该值会作为回调函数的第一个参数返回。使用最常见的用法就是传入一个对象。单向数据流，比较有序，有便于管理，它随着视图库的开发而被概念化。 面试中问框架，经常会问到一些原理性的东西，明明一直在用，也知道怎么用， 但面试时却答不上来，也是挺尴尬的，就干脆把react相关的问题查了下资料，再按自己的理解整理了下这些答案。 reac...
摘要：前言是一个非常实用的状态管理库，对于大多数使用库的开发者来说，都是会接触到的。在使用享受其带来的便利的同时，我们也深受其问题的困扰。只支持同步，让状态可预测，方便测试。粗暴地级联式刷新视图使用优化。 前言 Redux是一个非常实用的状态管理库，对于大多数使用React库的开发者来说，Redux都是会接触到的。在使用Redux享受其带来的便利的同时， 我们也深受其问题的困扰。 redux...
阅读 1360·2021-10-08 10:04
阅读 2655·2021-09-22 15:23
阅读 2707·2021-09-04 16:40
阅读 1143·2019-08-29 17:29
阅读 1472·2019-08-29 17:28
阅读 2943·2019-08-29 14:02
阅读 2196·2019-08-29 13:18
阅读 813·2019-08-23 18:35
