状态管理的概念

状态管理是什么

近年来，随着单页面应用的兴起，JavaScript 需要管理比任何时候都要多的状态，或者可以说是数据，这些状态可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。

但是其实，无论系统如何复杂，前端页面的所要完成的事其实很简单，就是把业务的信息渲染出来，反馈给用户，并进行人机交互，返回给服务端，这是前端技术解决的核心问题。而几乎所有的 web 系统都不会把用户的一些数据和系统的状态维护在客户端，因为这些都是“转瞬即逝”的东西，用户换一个浏览器这些信息就会全部消失不见，所以这些数据（状态）必然会在服务器上存储起来，当用户重新登录的时候，页面会从服务器中重新拿到最新的数据，把页面渲染出来。

为什么需要状态管理

现代主流的前端框架，不管是 react 还是 vue，都是组件化开发。组件化虽然可以提高代码复用率，但是同时也带来一个问题，那就是组件之间的通信。

大家可以思考一下，组件之间的传值有哪些？有父子通讯，兄弟组件通讯等等。父子组件之间的通信我们可以从容应对，但是当组件之间的关系变得复杂，甚至组件之间没有关系时，要在他们之间通信就变得不太容易，传参对于多层嵌套就显得非常繁琐，代码维护也会非常麻烦。

如果不对状态进行有效的管理，状态在什么时候，由于什么原因，如何变化就会不受控制，就很难跟踪和测试了。

这个时候我们就需要把这些在多个组件中都用到的数据提取出来，独立于组件树，放在一个新的地方。这些数据往往会因为组件上事件的触发而发生变更，同时这些数据的变更又会作用到组件上，引起视图的变更。

因此，针对这些数据的管理就变更尤为重要，这里的数据也被称为状态（state），因此也叫状态管理。