简单、可扩展的状态管理.
React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而 MobX 提供机制来存储和更新应用状态供 React 使用。

安装

1
npm install mobx --save

绑定库

1
npm install mobx-react --save

提示

由于公司有些项目可能是版本，直接下载上述依赖可能会触发，数据改变，视图不更新，使用老版本的包即可解决，下面是依赖对应的版本号：

1
2
3
4
5
{
  "mobx": "^5.15.7",
  "mobx-react": "^6.3.0",
  "mobx-react-lite": "^2.0.7",
}

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// store/model/app.js
import { observable, action, makeObservable } from "mobx";

class App {
  constructor() {
    // 使用 makeObservable mobx6.0 才会更新视图
    makeObservable(this);
  }
  @observable namespace = "app"; //定义命名空间
  @observable count = 0; //定义变量

  @action
  add = () => {
    this.count++;
    console.log(this.count);
  };
}

export default new App();

结合 react 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React, { Component } from "react";
import Header from "@/components/header/header";
import { inject, observer } from "mobx-react";
import { withRouter } from "react-router-dom";

@withRouter
@inject("app")
@observer
class Layout extends Component {
  componentDidMount() {
    if (this.props.location.pathname === "/login") {
      this.props.app.updateView({
        showHeader: false,
      });
    } else {
      this.props.app.updateView({
        showHeader: true,
      });
    }
  }
  render() {
    return (
      <div className="wraper">
        {this.props.app.showHeader ? <Header></Header> : null}
      </div>
    );
  }
}
export default Layout;

observable

定义变量
值可以是 JS 基本数据类型、引用类型、普通对象、类实例、数组和映射

@computed

声明式的创建计算属性
观察对象处理后的数据, 当观察对象值变化后，产生新的值
只对函数内的值响应
注：启用 decorators

1
2
3
4
5
6
7
8
9
10
11
12
@computed get total (){
  return this.a + this.b
}
// 这里 set 将自动挂载 不需要添加装饰器
set total(data) {
  //data get方式的结果
  console.log("Cannot set total value")
}

/*
永远在 getter 之后 定义 setter
*/

@inject()

用来从 React 的 context 中挑选 store 作为 prop 传递给目标组件
参数是 仓库的命名空间(namespace)

@observer

对仓库 observabl 做出响应
当组件中依赖项有变化时，组件自己会响应更新。

componentWillReact

组件中被 observable 观测的数据改变，就会触发这个生命周期

@action

可以修改状态
对任何修改 observables 或具有副作用的函数使用@action

参数

  • name
    • String 类型
    • 主要描述 action 的作用
  • fn
    • Function
    • action 的具体逻辑，即对 observable 变量的操作