状态管理方案对比 (前端)

声明:

由于个人水平有限,很有限,这里只是个人学习的一点总结,欢迎指正。

 

无论是古代还是现代,状态管理都是开发逃不掉的话题。最早的时候,局部状态就直接用局部变量,几个不同的功能之间需要共享,就来个全局的变量存。其实那时候状态管理的概念还不是特别明确。也没有人特别关注这个。

标题写了个前端,其实也不一定吧,这种东西感觉哪里都可以参考借鉴。前端的那些道道肯定也是别处学的。但是相对于后端,后端只是响应请求,大多情况下不会有需要维护状态。又,因为最近看的都是前端的内容,那么就先这样加一个“前端”吧。

然后当业务越来越复杂的时候,框架三巨头逐渐占领了市场。各种各样的状态管理方案开始争霸。

Vue 算是用过时间比较久的,React 新碰了一下,Angular 完全没用过。但是从接触了两种之后我就一直在想他们之间的异同。后来发现还是状态管理的逻辑有点不一样。

Vue 组件内部的状态叫做data可以直接修改,并且直接映射到了 this 上,可以用 this.someData 访问,this.someData = something 这样来修改,并且可以被跟踪。

React 则是需要显式使用 this.setState() 来设置内部状态。给人一种不可变( immutable)的感觉。

那么虽然没有看过源码,也可以猜测一下两者内部实现的区别。Vue 大概是使用 Proxy 之类的技术来跟踪属性的变化,根据变化的属性来推断哪些东西需要更新。React 则应该是新老属性 diff 一下,然后推断。

React 自己并没有双向绑定这样的效果。需要自己监听事件、显式更新状态。这些 Vue 都会自动做好,我倒是觉得没有谁优谁劣,只是设计思路的不一样。

包括 React 钦点的状态管理 Redux 感觉和 React 浑然一体,设计思路就是把所有的变动都清清楚楚的写出来。通过 action 来分发(dispatch)事件,用 reducer 来响应事件,并返回新的状态。理解之后就会发现还是很直观的。

这类状态管理工具拥有的共性即将组件内部的可响应性扩大到了跨组件甚至全局。组件内部状态的修改可以触发视图的更新等,但是各组件之间共享的一些状态,除非以props的方式进行传递,否则无法触发数据变化的检查。当状态规模扩大或者结构变得复杂的时候这样就很难维护,所以就有这些全局的状态管理工具。

其实我觉得 Vuex 和 Redux 还是很像的,MobX 就有点像 Vue 的那种思路,可以去改变对象内部的属性而不用新对象替换。MobX 感觉也比较符合 Vue 设计思路,封装好了东西给你用,一个装饰器里面全搞定,虽然根本不知道里面是个啥原理。(其实猜得到)

而 Redux 你只要摸到门道就可以把它处理数据的流程看的比较清楚了,比较白箱。

发表评论

电子邮件地址不会被公开。 必填项已用*标注