React中的状态管理

Posted 2023-04-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React中的状态管理相关的知识，希望对你有一定的参考价值。

参考技术A Redux是一个用于javascript状态容器，可提供与预测化的状态管理。Redux可以让你构建一致化的运用，运行于不同的环境（客户端、服务器、原生运用），并且易于测试。Redux除了和Redux一起使用外，还支持其它界面库，而且它的体积小精悍（只有2kb）

随着JavaScript单页面富运用开发的复杂，JavaScript需要管理更多的state（状态），这些state可能包括服务器响应、缓存数据、本地生成未生成持久化到服务器的数据，也包括UI状态等。管理不断变化的state非常麻烦，如果一个model的变化会引起另一个model变化，那么当vlew变化时，就可能引起对应的model以及另一个model的变化，依次可能引起另一个vlew的变化，所以就会产生数据混乱。而Redux就是解决这个问题。

1、单一数据源：

                    整个应用的state被存储在object tree中，并且这个object tree只存在于唯一一个state中

2、State是只读的：

唯一改变state的方法就是调用action,action是一个用于描述已发生事件的普通对象。

这样确保了视图和网络请求都不能直接去修改state，相反，它们只能表达想要修改的意图，因为所有的修改都被集中化处理，并且严格按照一个接一个的顺序执行。



3、使用纯函数来执行修改:

为了描述action如何改变state tree，你需要去编写reducers

Reducers只是一些纯函数，它接收先前的state和action，并返回新的state。可以复用、可以控制顺序、传入附加参数。



      State就是我们传递的数据，那么我们在用React开发项目的时候，大致可以把State分为三类：

1、DomainDate：可以理解成服务器端的数据，比如：获取用户的信息，商品的列表等等。

2、UIState：决定当前UI展示的状态，比如：弹框的显示隐藏，受控组件等等。

3、App State：App级别的状态，比如：当是否请求loading，当前理由信息等可能被多个组件去使用的到的状态。

Action是把数据从应用传到state的载体，它是state数据的唯一数据源，一般来说，我们可以通过store.dispatch()将action传递给state。

Action特点：

1、Action的本质就是一个JavaScript的普通对象

2、Action对象内部必须要有一个type属性来表示要执行的动作

3、多数情况下，这个type会被定义成字符串常量

4、除了type字段之外，action的结构随意进行定义

5、而我们在项目中，更多喜欢使用action创建函数（就是创建action的地方）

            6、只是描述了有事情要发生，并没有描述如何去更新state

Reducer本质就是一个函数，它用来响应发送过来的actions，然后经过处理，把state发送给Store

注意：在Reducer函数中，需要return返回值，这样Store才能接收到数据，函数会接收两个参数，第一个参数是初始化state，第二个参数是action。

Store就是把action与reducer联系到一起的对象

主要职责：

1、维持运用的state。

                2、提供 getState（）方法获取state。

                3、提供dispatch（）方法发送action。

                4、通过subscribe（）来注册监听。

                 5、通过subscribe（）返回值来注销监听。