持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

一、什么是Mobx

Mobx概述

Mobx与Redux类似，都是React的一种实现状态管理的库，但是Moxh与Redux相比，对初学者更加友好，它通过函数响应式编程让其在React Class项目或React Hooks项目中使得状态管理变得更加易扩展和简单。
Mobx的数据流为单向数据流，即动作一旦改变，其状态也会随之更新，状态一更新，也会反应都所有相关的视图上。Mobx整个原理机制可以通过官网提供的·如下图来更透彻的理解：

上图可理解为：Mobx主要由Action(动作)、State(状态)、Computed values(计算值)和Reactions(反应)五部分组成，首先通过事件触发Action，在Actions当中可以修改State中的值，而所有可以根据State中的值计算得到的数据可以通过计算属性get得到Computed values值，当State值或计算值改变时，也会触发Reactions，然后反应到UI视图层，Mobx通过以上几个步骤实现链接整个响应式。

Mobx核心API与常见使用

• observable (Mobx为现有的数据结构(如对象，数组和类实例)添加了可观察的功能可观察的状态，该API可以将数据转为可观察的)

observable(source, overrides?, options?)

• makeObservable (手动将其内部的数据转化为可观察的)

class Store {
  constructor() {
    makeAutoObservable(this, {
    price: observable,
    count: count,
    setPrice: action,
    });
  }
  
  setPrice = () => {
    this.price = 200;
  }
  
  export default new Store();
}

• makeAutoObservable (自动将其内部的所有数据变量转为可观察的)

makeAutoObservable(target, overrides?, options?)

各个属性含义为：
target：需要变为可观察的State状态和相关改变方法Actions
overrides：覆盖默认设置，将target对象中的某些属性或方法设置为普通属性(传入false会被设置成普通属性)
options：配置对象
基本使用：

class Store {
  public price: number =  100;
  public count: number = 3;
  
  constructor() {
    makeAutoObservable(this);
  }
  
  public setPrice = () => {
    this.price = 200;
  }
  
  export default new Store();
}

makeAutoObservable与makeObservable相⽐, 更加推荐项目中使用makeAutoObservable，因为使⽤makeAutoObservable可以使代码更紧凑，更易于维护，添加其他可观察状态时不必明确提及

• get (得到计算属性total的值，依赖可观察变量price、count)

get total(){
  return this.price * this.count;
}

• runInAction (创建⼀个⽴即调⽤的⼀次性动作,其参数为一个回调函数，一般用于异步方法内)

fetchGetDataList()
  .then((res: any) => {
    if (res.code === 200) {
      runInAction(() => {
        this.count = res.data.count;
    });    
})

• toJS (递归将可观察对象转换为JavaScript对象,便于在组件中使用stoe中的变量，避免warning警告)

toJS(observableDataStructure, options?)

options包括两个属性:分别表示检查observalbe数据结构中的循环引⽤，默认为true和是否将ES6 Map作为普通对象导出，默认也为true

二、什么是mobx-react-lite

mobx-react-lite是mobx-react的轻量版，它增加了对hooks的支持，所有更加推荐在react hooks项目中使用mobx-react-lite
它常使用的API主要为Observer和useLocalObservable，这两个API主要用在函数组件内部。

• Observer用于为组件添加响应式

<Observer>{() => (rendering组件)}</Observer>

• useLocalObservable：创建⼀个新的可观察对象，并将其保留在组件的整个⽣命周期中

import { Observer, useLocalObservable } from 'mobx-react-lite';
... 

const currStore = useLocalObservable(() => store);

然后就可以在组件中使用store内部的数据了，一旦改变store中的数据，组件视图也会自动更新。

三、Mobx与mobx-react-lite在React Hooks项目中的使用

通过以上两部分的简单介绍，在React Hooks项目中使用Mobx就非常容易了。
总结为以下几个步骤：

• 新建文件，通过class语法创建一个创建Store,
• 在Store的constructor内部使用makeAutoObservable(this)将状态变为可观察的
• 定义相关计算属性和Actions、异步修改使用runInAction
• 定义函数组件，并引入Observer和useLocalObservable
• 使用useLocalObservable()得到store，便于在组件中使用
• 使用Observer包裹函数组件
• 即可使用store中的任何state和Action方法了