Mobx由浅入深理解

Mobx 常用 API 介绍

observable 可观察的状态

• observable 是一个让数据的变化可以被观察的方法，底层是通过将该属性转化成 getter/setter 来实现的。其值可以是 JavaScript 原始数据类型、引用类型、普通对象、类实例、数组和映射。

class Todo {
  @observable title = "";
}
// 通过 decorate 工具在不支持装饰器语法的情况加使用。
decorate(Todo, {
  title: observable,
  ss,
});
复制代码

注： 在使用数组时，应避免下标越界去访问数组中的值，这不会被 Mobx 所监视，实际开发中，应注意数组长度的判断
注： 在使用对象时，如果需要动态添加新的属性，需要使用到 extendObservable, 否则新增的属性不会被 Mobx 所监视。

computed 计算值

• 计算值是可以根据现有的状态或其它计算值进行组合计算的值，类似于 vue 中的 Computed

@computed get total(){
        return this.value * 2
    }
    set total(val){
        this.value = val
    }

复制代码

注：computed setter 一定要定义在 getter 后面，并且 setter 不能用来改变 computed 而是修改内部成员
注：根据状态自动进行变化。 如果值未发生变化，它也不会变化
注：计算期间抛出异常，异常会被捕获，并在读取值的时候抛出异常。抛出的异常不会中断跟踪，所有计算值可以从异常中恢复。

autorun 自动运行

• 修改autorun中任意一个可观察的数据，即可触发自动运行。

autorun(()=>{
    console.log(store.string +':' +store.number)
})
复制代码

jsion 反应

jsion(func1,func2)
复制代码

• func1:引用可观察数据，并返回一个值，这个值会作为第二个函数的参数。
• func2:副作用函数。
• jsion第一次渲染的时候，会先执行一次第一个函数，这使得Mobx知晓哪些可观察数据被引用。随后，在这些数据被修改时，就会执行第二个函数

action 动作

• action，是修改任何状态的行为，使用action的好处是能将多次修改可观察状态合并为一次，从而减少触发 autorun 或 jsion的次数。

 @action xx(){}
复制代码

action.bound

• action.bound可以用来自动地将动作绑定到目标对象，与action不同的是，action.bound不需要一个name参数，名称将始终基于动作绑定属性。

   @action.bound xx(){}
复制代码

runInAction

• runInAction是一个简单的工具函数，它接收代码块并在（异步的）动作中执行。 这对于即时创建各执行动作非常有用。例如， 在异步过程中，runInAction(f)是action(f)()的语法糖。

• 报错 【mobx】Since strict-mode is enabled,changing observed observable values outside actions is not allowed .Please wrap the code in an ‘action’ if this change is intended. 需要加上runInAction在异步操作上

  runInAction(() => {});
复制代码

configure 设置严格模式

• configure 强制改动 mobx 中变量使用 mobx 中的 @action 方式，避免在其他地方改动

configure({ enforceActions: "observed" });
复制代码

mobx + js

使用步骤

1. 创建一个store类

- 使用Mobx 常用 API 创建store类
复制代码

2. 集中导出store实例

- 集中引入store类
- 将 store 统一导出
复制代码

3. 父组件中注入store实例

- 然后在根组件中通过Provider组件注入store
```js
<Provider xxxStore={xxxStore}>
  <App />
</Provider>
```
复制代码

4. 子组件中注入store

- 子组件中我们通过 inject 获取 Provider 传递的 store
```js
import {observer, inject, MobXProviderContext} from "mobx-react"
<!-- 类组件中使用 -->
@inject("xxxStore")
@observer
class XxChild{}


<!-- 函数组件中使用 -->
inject("xxxStore")(observer(XxChild))
```
复制代码

• Cosumer注入传递的store

 <MobXProviderContext.Consumer>
 {(xxxStore)=>{
   ....
 }}
 </MobXProviderContext.Consumer>
复制代码

  const {xxxStore} = js.useContext(MobXProviderContext);
复制代码

mobx + js + hook

useObserver 响应式的组件

• 功能类似于 类组件中使用 的 observer，使得组件响应式
• useObserver 的使用几乎和 Class 组件的 render 函数的使用方式一致

  function App() {
      return useObserver(() => {
          return <div>{store.xxx}</div>
      })
  }
复制代码

useLocalStore

• Hooks 的环境下封装的一个更加方便的 observable。就是给他一个函数，该函数返回一个需要响应式的对象

function Demo3() { 
  const localStore = useLocalStore(() => store);
  return <Observer>{() => <span>{localStore.count}</span>}</Observer>
}
复制代码

react hook 状态管理

1. 使用createContext 创建 context
2. 创建并导出 Provider 高阶组件 可用 useState 或者 useReducer 储存 状态 和 方法
   • 相比 useState，useReducer 更加规范
3. 导出 useContext 提供给子组件使用

mobx 源码解析