React学习笔记(六)——高阶Redux

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wuqingdeqing/article/details/86182103

6.1 高阶reducer

高阶reducer就是将reducer作为参数或者返回值的函数。

6.1.1 reducer的复用

6.1.2 reducer的增强

高阶reducer主要通过3点来增强reducer:

能够处理额外的action。

能够维护更多的state。

将不能处理的action委托给原始reducer处理。

6.2 Redux与表单

6.2.1 使用Redux-form-utils减少创建表单的冗余代码

Redux-form-utils提供了两个方便的工具函数——createForm(config)和bindRedux(config),前者可以当做decorate使用,传入表单的配置,自动为被装饰的组件添加表单相关props;而后者则生成Redux应用相关的reducer、initialState和actionCreate等。

6.2.2 使用Redux-form完成表单的异步验证

在使用和配置方面,与前者没有太多差异,唯一的不同是它需要在Redux应用的state树中挂载一个独立的节点。这意味着,所有使用Redux-form创建的表单中的字段都会在固定的位置。

6.2.3 使用高阶reducer为现有模块引入表单功能

需要用到另一个React-Redux的表单实现——react-redux-form。

6.3 Redux性能优化

6.3.1 Reselect

对于Redux来说,每当store发生改变时,所有connect都会重新计算。为了减少这样带来性能浪费,想到对connect中的这些selector函数做缓存。reselect库中自带了缓存属性。

6.3.2 Immutable Redux

如果要彻底使用不可变数据结构去做整体架构的话,可以尝试使用。

6.3.3 性能优化

由于Redux的可扩展性,可以轻易封装一些针对reducer的性能优化方法。

1. logSlowReducers

在生产环境中,可以使用此函数,它能够筛选出执行时间较高的reducer以及对应的action,从而有针对性地做优化。

2. specialActions

大多数情况下,应用的action都是和某个reducer对应。因此,可以指定特殊的情况,让Redux在特殊情况之外只执行与action对应的那个reducer。

3. batchActions

分发是一个较为复杂的过程。当同步分发多个action时,只想让界面渲染最终的状态而已,中间的状态并不想关系。则可以通过封装把这几个action合并。

6.4 解读Redux

6.4.1 参数归一化

6.4.2 初始状态及getState

6.4.3 subscribe

6.4.4 dispatch

6.4.5 replaceReducer

6.5 解读react-redux

提供react与redux的绑定。

6.5.1 provider

Provider是整个应用最外层的React组件,它接受一个store作为props。

6.5.2 connect

connect函数本身返回名为wrapWithConnect的函数,而整个函数才是真正用来装饰React组件的。而在装饰一个React组件时,其实就是把组件在Connect类的render方法中进行渲染,并获取connect中传入的各种额外数据。

6.5.3 代码热替换

代码热替换功能肯定发生在应用开发过程中,因此首先在最外层有一个对当前环境的判断。若在开发环境,则为connect定义一个componentWillUpdate的生命周期方法,判断当前组件的version是否与全局的version不同,若不同,则更新version并重新执行订阅等操作。

猜你喜欢

转载自blog.csdn.net/wuqingdeqing/article/details/86182103