Mobx

Mobx是一个简单的、可伸缩的响应式状态管理库
Mobx设计哲学：Anything that can be derived from the application state, should be derived. Automatically. (任何可以从应用状态中派生的内容，都应当自动地被派生。)
派生：

用户接口(UI)，如组件、页面、图表
派生数据(computed data)，如从数组中计算得到的数组长度
副作用(side effect)，如发送网络请求、设置定时任务、打印日志等
我们平时常看到的状态响应模型，其中的响应就可以看做是状态的一种派生，MobX 将这种模型进行泛化，形成更通用的状态派生模型，接下来会详细介绍。

MobX状态响应模型
模型三要素： 定义状态、响应状态、修改状态
定义状态: observable

// observable接受参数生成原始数据的代理对象，代理对象与原始数据具有相同的API
const store = observable({
  count: 0  // 参数可以是任意js值
})

响应状态：autorun

// 每当observable中定义的状态发生变化时，MobX 都会立即执行该函数。
autorun(() => {
  console.log("count", store.count); // 参数： 函数
})

修改状态： MobX 中修改状态和修改原始数据的方式没什么区别，这也是 MobX 的优点——符合直觉的操作方式。

store.count  += 1;

MobX状态派生模型
派生：从应用状态中派生出来的任何内容 （Derivations)
带副作用：纯函数，一般根据当前状态计算返回一个新值
不带副作用：
为了区分上面两种，Derivations细分成Reactions和Computed values
还引入了Action概念来表示对State的修改
computed:

const doubleCount = computed(() => 2*store.count) 
// 参数函数，函数有返回值，在函数内部可以使用observable定义的状态数据
// 每当count变化，doubleCount内部的计算会自动更新
// 通过其get/set方法访问内部计算值 exp: doubleCount.get();

computed与autorun相似，他们都会在依赖的状态发生变化时会重新运行，不同之处是computed接收的是纯函数并且返回一个计算值，这个计算值在状态变化时会自动更新，计算值可以在autorun中使用。
需要通过get/set访问内部值，只有这样才能保持计算值的引用不变而内部值又是可变的。
action:

Window.increaseCount = action(() => store.count++);
// action参数：修改状态的函数，返回值：与入参签名相同的函数

action函数是事务型的，通过action修改状态时，响应函数不会立即执行，而是等到action结束后才执行，这有助于提升性能。

autorun: 更新视觉

// Reactions

autorun (()=>{
 containerEl.innerHTML =
`  ${store.count} * 2 = ${doubleCount.get()}
    +1
  `;});

autorun接受一个响应函数 reaction，并在定义时立即执行一次 reaction 函数， reaction 函数内部可以执行带有副作用的操作。以后，每当依赖状态发生变化时，autorun自动重新运行 reaction 函数。autorun第一次运行 reaction 函数是为了搜集依赖状态——运行 reaction 过程中实际使用的状态（通过obj.name或obj['name']解引用方式使用的状态）。
computed值会被缓存
引用的状态不变/ 计算后的值不变，当读取computed的值的时候使用上次的缓存
computed值会惰性计算
只有computed值被使用时才重新计算值。反言之，即使computed值依赖的状态发生了变化，但是它暂时没有被使用，那么它不会重新计算。

配置MobX使action成为修改状态的唯一方式
对 MobX 进行一些配置后，可以使action成为修改状态的唯一方式

// 强制只能通过 action 修改状态
configure({ enforceActions:"always"});

MobX 与 React 集成
绑定实现是 mobx-react（或 mobx-react-lite）

mobx-react 提供了一个observer方法， 它是一个高阶组件，它接收 React 组件并返回一个新的 React 组件，返回的新组件能响应（通过observable定义的）状态的变化，即组件能在可观察状态变化时自动更新。observer方法是对 MobX 提供的autorun方法和 React 组件更新机制的封装，以便于在 React 中使用，你依然可以在 React 中使用autorun来更新组件。下面是observer方法的类型声明，它支持组件类和函数组件。
下面是组件类使用 MobX 的示例，通过observable定义可观察状态，并通过observer包裹组件，之后组件事件处理方法中修改状态后，组件会自动更新，无需手动调用 React 的setState()来更新组件。
类组件

import React from 'react';
import {observable} from "mobx";
import {observer} from "mobx-react";

class Counter extends React.Component {
  constructor(props){
  super(props);
  this.store = observable({
   count:  0
   });
render() {
  return (
       store.count++}>
        {store.count}
      
    )
  }
}
export default observer(Counter);

函数组件

import React , {useMemo} from 'react';
import {observable} from "mobx";
import {observer, useLocalStore} from "mobx-react";

const  Counter = () =>  {
  const store = useLocalStore(() => {
    count: 0,   // useLocalStore定义可观察状态，useLocalStore内部也是使用 
 //observable定义可观察状态。
})
// 等价于
// const store = useMemo(() => observable({count: 0}), [])
render() {
  return (
       store.count++}>
        {store.count}
      
    )
  }
}
export default observer(Counter);

总结

MobX 的设计哲学是“可从应用状态中派生的任何内容都应当自动的被派生”，后半句有两个关键字：自动和派生。心中秉持这一设计哲学，再来看 MobX 的派生状态模型就比较清晰了，Computed values 和 Reactions 都可以视作是从 State 中派生出的，State 变化时触发 Computed values 的重新计算和 Reations 的重新运行。为了让派生能自动的进行，MobX 通过Object.definePropery或Proxy方式拦截对象的读写操作，从而允许用户以自然的方式来修改状态，MobX 负责更新派生的内容。
MobX 提供了几个核心 API 来帮助定义状态（observable）、响应状态（autorun, computed）和修改状态（action），通过这些 API 可以让程序立即具备响应式能力。这些 API 接口并不复杂，但要熟练使用，需要深入理解 MobX 响应机制，文中通过一些简单的示例来辅助理解这些 API 的行为。
MobX 可以单独使用，也可以与任何流行的 UI 框架一起使用，Github 上可以找到 MobX 与流行框架的绑定实现。不过 MobX 最常见的是与 React 一起使用，mobx-react 是流行的 MobX 和 React 的绑定实现库，本文介绍了它在组件类和函数组件上的一些基本用法。