Redux的mimi

iaog
741 阅读1分钟

1.useContext

image.png

声明createContext

image.png

使用useContext

image.png

2.renducer规范state创建流程

image.png

3.dispatch规setState流程

所有使用到userModefier的地方用外部组件Wrapper包裹，这样读写的数据直接到Wrapper中了，userModefier里操作数据

image.png

4.connect高阶组件

避免了用写死的外部组件Wrapper包裹userModifier，在用的时候使用connect函数即可实现数据和操作分离的效果

image.png

5.有效减少render

image.png

当我们操作数据时所有组件全都进行了render

方式一 使用useMemo或useCallback

image.png

方式二 修改setState

增加subscrib订阅函数

image.png

在connnct中setState会进行重新render

image.png

抽出我们封装的redux

image.png

5.selecctor

connect新增参数selector

image.png

传参时使用

image.png

不传参数

image.png

6.实现selecctor的精准渲染

声明grouo并在幺儿子中使用

image.png

image.png

这时当user变化时，幺儿子组件也重新render

image.png

重新封装connct，判断data和newData是否变化

image.png

image.png

7.connct的第二个参数-- MapDispatchertoProps

image.png

修改connct

image.png

使用

image.png

优化使用方式

image.png

8.CreateStore(reducer,initState)

将reducerhestate变成外部参数

image.png

导出读写接口

image.png

使用

image.png

9.封装provider

image.png

使用

image.png

10.让redux支持异步action（支持函数action）

普通函数

image.png image.png

promise函数

image.png

使用

image.png

avatar
文章
阅读
粉丝