应该如何理解mobx_理解mobx

mobx是什么？

mobx是一个用来管理前端状态变更的js库。这里强调状态的变更，是应为在复杂的前端应用里面，理清内部状态的变更是一件不容易的事情。在开发React应用时，我比较喜欢mobx，我希望通过这篇文章让大家理解mobx背后的哲学。

从一次交互说起

下面以一次简单的用户交互为例子，讲解前端内部状态的变更。交互简介用户首选看到的是一个todo list列表界面

当用户点击其中一个Task后

界面跳转到显示单个Task详细信息页面

交互过程用户点击触发一个事件(event)点击事件触发一个内部行为

内部行为本质上是定义好的一个函数，这个函数可以改变程序内部状态

程序内部状态，可以理解为一个数据结构，包包含了模型(model)状态和UI显示状态，如图标示的就是模型状态的改变

这里的点击事件触发了SELECT行为，导致模型数据更新同时UI显示状态改变UI的显示和交互本质上是组件树的显示和变更

UI的显示即组件树的展现(如DOM展现)

UI的变更即组件树的改变，组件树改变导致界面更新

理想状态下，组件是一个无状态的函数，负债把一部分模型状态转换成为UI结构(DOM树)

多个Component嵌套组合，形成一个大的组件，即一个大的转换函数，负债把整个模型状态转换成用户界面

理解交互过程

交互过程的本质是一个外部事件触发的内部状态改变，这种内部状态的改变带来了UI的更新和其他的副作用(side effect，入向后台发请求)。所以，在处理复杂的交互时，我们的关注点应该是程序状态的变更及其带来的副作用。

为什么要用mobx？

上面说了，程序状态变更及其副作用是复杂交互的核心。

状态变更的管理是一个复杂的过程。其涉及一系列的函数触发，从外部事件开始，触发内部行为，导致状态改变，状态改变引起UI更新等。这个过程如果靠手工管理是非常繁琐易错的。

mobx就是这样一个库，它提供了一套简单的API和decorator语法，可以帮助我们简化状态变更管理。

具体来说，使用mobx管理状态时，当我们更新模型状态后，由模型变更带来的UI更新、数据序列化等一系列操作，mobx会自动帮我们完成。

所以，当使用mobx开发React应用时，我们只需要定义数据模型(model)和改变这些模型的行为(action)，然后把模型的属性和action绑定到Component。当我们程序状态更新后，mobx会高效自动的更新Component。

mobx的哲学

其实mobx提供的不只是Component的自动更新，mobx本身提供的是一种自动更新的机制。

如图所示。对状态(State)的改变只能通过定义好的action触发。由于所有的交互和事件都汇集到了action，状态改变变得可控。状态改变带来的副作用，mobx会自动帮我们维护，这样极大的减少了人为触发带来的错误。

总结

mobx是一个小巧优雅的库，可以帮助我们很好的管理前端状态的变更。