Mobx由浅入深理解

·  阅读 1127

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类
复制代码
  1. 集中导出store实例
- 集中引入store类
- 将 store 统一导出
复制代码
  1. 父组件中注入store实例
- 然后在根组件中通过Provider组件注入store
```js
<Provider xxxStore={xxxStore}>
  <App />
</Provider>
```
复制代码
  1. 子组件中注入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 源码解析

observable源码

observable.png

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改