聊一聊主流前端框架的状态管理

当今前端最火的三个框架要数Angular2+、Vue、React。它们全部都用到了组件化、模块化的思想，让前端开发变得更加规范。

但缺点也是明显的。除了文档不齐全、缺乏案例、学习成本高以外，组件之间的状态管理也是一个大问题。组件化是好事，但是如果没有处理好组件之间的数据流动，就会造成项目混乱、维护困难的负面影响。

先来说说为什么要进行状态管理：

比如说两张列表都引用了同一个数据源，用户在其中一张列表上做修改，另外一张列表上的数据也要跟着变。用angular1的时候要解决很简单，使用$rootScope即可。但是到了三大框架，没有$rootScope这个概念，想要实现数据的同步更新，怎么办？

有人可能会说，这简单，用户在第一张表做修改的时候我们发一个消息给第二张表，让它把相应的数据改了不就完事了。但是如果有10张表，20张表呢？都去一张张通知吗？要是其他组件也有用到这个数据源，也都去通知更新吗？

所以这个方案在项目简单的时候或许可行，但是项目一复杂，问题立马就会暴露出来。为了以防未来项目推翻重来，我们还是应该一开始就考虑好。

状态管理这个概念，就是为了应对复杂的数据流动。

三大框架实现状态管理的方法分别为：

Vue：Vuex

React：Redux（dva.js）

Angular2+：Redux（ngrx）

虽然三大框架实现状态管理的方案不同，但是底层的思想都是一致的。这里大致的来讲一下：

项目为了实现状态管理，新增了几个模块：reducers、effects、services、models。如果是angular2+的话还有actions。

先来说说这几个模块的作用：

models：数据模型。存放了数据本身和修改数据的方法。在angular2+中models存放的是实体（entity）。学过后端的应该会很熟悉。是对数据的一种声明。

reducers：负责进行同步的操作。比如把请求来的表单数据存到数据模型中，用户添加/删除了某条数据，对原有数据进行修改。

services：对请求数据这一动作的封装，一般包含获取数据的方法。如getList()，getUsers()。

effects：负责进行异步操作。比如接到用户的请求动作后，调用service，向服务器请求数据，成功了就调用reducers保存数据，如果失败了就执行另一个动作。

angular2+中还抽象出了一层actions，是对各种动作的封装。比如加载数据，数据加载成功，用户删除数据等。包含了数据的type以及payload（修改数据用到的数据）

 

一个用户操作，比如搜索相应商品，当用户按下确认键的时候，整个流程可以概括为：

用户发出指令 -> dispatch调用redurcers修改状态，相应组件进入loading状态 -> effects调用services获取数据 -> 获取数据成功，调用redurces保存数据并结束loading -> 渲染到视图。

当调用reducers更新数据的时候，所有跟model绑定的视图都会同步更新，每个处理逻辑也变得相当清晰明了。虽然在项目复杂度上会有所增加，但是维护起来肯定是要方便很多的。

如果觉得难以理解，可以先从这两个案例入手：

vuex 计数器+列表展示：http://www.cnblogs.com/axel10/p/8536688.html

dva.js 计数器+列表展示：http://www.cnblogs.com/axel10/p/8503782.html

其中最适合入门的是Vue，然后是React（使用dva.js），最难的是angular2+。angular2+涉及到Rxjs和TypeScript，知识点较多。无论难还是不难，永远记得由浅入深，不要幻想一步登天。如果你连angular1都用不熟，那就请你先用好angular1，好好理解mvc思想，再去涉足三大框架，不然很有可能事倍功半，浪费大量时间。

作为前端工程师，如果有条件还是建议学习一门后端语言，比如java，c#，这对理解前端框架有很大的帮助。