vue与react的简单比较（全局状态管理）

上一篇文章《vue与react的简单比较》中我们对比了vue和react的动态绑定、渲染更新、逻辑复用。本篇文章我们从使用的角度来对比两个框架在全局状态管理方面有哪些异同。

之前有发过一篇文章《源码分析vuex如何维护多个组件的数据共享》讲解vuex在vue中的工作原理，本次我们用一个todoList的例子演示vuex如何在vue3中使用。示例的效果很简单，初始化的时候页面从mock接口中获取静态数据，在页面中渲染出来。也可以在输入框中输入内容，点击ADD按钮添加到待办事项列表中。

1.vue

首先我们通过vue-cli脚手架来搭建vue3的开发环境，输入命令：

vue create myapp

选择第三个preset："Manually select features" ，选中Vuex使其包含在初始化代码框架中。框架装好，安装完依赖，我们就可以通过脚手架代码来演示如何在vue3中使用vuex了。

首先我们需要初始化store对象中的state、mutations、actions。然后都传入createStore函数再把生成的store实例导出。

关于state、mutations、actions三者的关系可以去官网自行查看（https://next.vuex.vuejs.org/guide/state.html#single-state-tree）。vue3中必须使用vuex4.x但是目前只有英文版，还没来得及翻译。比较核心的就是这张图，Vue组件通过Dispatch调用Action，在Action中可以执行异步任务比如访问后端接口，然后再把需要state更新的数值结果通过Mutations再同步修改State，在Mutations中可以追踪State的修改。

在actions中可以包含异步请求，所以通过：

await getList();

来请求了后端接口，把返回数据通过commit函数调用initList的Mutation来对state进行初始化。接口请求和mock数据如下所示，当请求本域名下的/api/list.json时就会请求到public目录下的api/list.json文件：

最后我们来看下vue组件的写法：

在模板的<input>中，使用v-model来双向绑定填写的内容，这点和react不同，在react中只能作为受控通过事件监听把变化同步到绑定的数据上，很麻烦。但是也可以作为非受控组件利用DOM节点的属性来控制输入的内容，后面会详细演示。

在js代码中，我们通过组合API的setup()，初始化了一个响应式数据todo、计算属性todoList。在DOM挂载后，请求了initItems的Action。而在点击ADD按钮时，会回调addItem按钮，请求addItem的Mutation，然后把响应式的todo赋成空字符串。

2.react

在react中我们一般使用redux和redux-saga中间件来做全局状态管理，但是我们目前有一个插件集成了这两个包的功能，它就是dva插件，这个插件需要使用umi脚手架来安装，官网地址：https://umijs.org/zh-CN/docs。在安装的时候已经默认支持了dva插件。只要我们在项目目录里配置下就好。其中hmr为支持热模块更新，immer等下会讲：

与vue相同，react也是有这样的一个初始化store的文件，只不过在返回出来的对象中多了namespace、subscriptions。剩下的三个state、effects、reducers大家可以对应着vuex的State、Actions、Mutations来理解。

同样，dva也有这样的一个图，但是个人感觉这个图所表达的整体数据流程和vuex的差不多。

但是有三点不同：1.通过dispatch方法中action对象的type属性，可以根据名字调用Reducer或者Effect。所以Effect和Reducer不能重名，如上文所述，Effect中可以通过yield来执行异步函数，而reducers只能是同步的纯函数。2.在model中加入了订阅功能，这个Subscription订阅的数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化。3.每个store有自己的命名空间就是namespace，多个namespace可以隶属于一个页面，也可以隶属于全局，不同页面之间如何相互使用state后面会提。

在redux中是不支持在reducers中直接操作传进来的state对象，必须深拷贝之后返回一个新的state对象，但是如果之前设置了immer：true，就可以直接修改传入的state来达到修改效果。

mock接口和数据同vue的逻辑是一样的就不再赘述了，下面来看一下页面，通过connect方法，在最底部把store中index空间下的todoList数组引入了函数组件，并且更新的时候会自动同步到组件模板中。通过useState的Hook定义了一个组件内部的响应式数据，为了避免受控组件<input>改变输入时需要监听change事件，所以通过react.createRef()通过DOM属性访问数据。（受控组件和非受控组件：https://react.docschina.org/docs/uncontrolled-components.html）在jsx模板中，可以看到input失焦时会触发saveInput，在saveInput组件函数中，为inputValue赋值。在点击ADD按钮后，把inputValue的值添加到store的todoList列表中，并且通过DOM方法把输入值清空。

以上就完成了vue和react中全局状态管理的初步介绍，可以看出他们的大体使用方式还是基本相同的，只是redux多了命名空间、订阅的属性。

对于出入职场的你想知道行业内技术水平如何么？遇到的技术点有没有由于长期没有再接触容易忘记呢？『全栈编程』刷题小程序就是专门来解决上述两个问题的，其中题目全部出自一线大厂小哥的工作实践，每月刷题最多的同学可以任选100元以内图书一本哦~

好知识，才能预见未来

赞赏

0人进行了赞赏支持

好知识，才能预见未来

更多相关文章

随机推荐