最简洁的 Mbox 6.x 基本使用步骤介绍（仅三步）！！！

首先安装：yarn add mobx mobx-react 或 npm i mobx mobx-react --save-dev

一、创建mobx仓库

• 方式1：使用@observable装饰器

  import { makeObservable, observable, action, computed } from "mobx";
  
  class A {
    //声明状态
    @observable list = [
      { id: 1, name: "zhangsan", age: 3 },
      { id: 2, name: "jack", age: 18 },
    ];
  
    constructor() {
      //mbox 6后需要添加这个组件才会更新
      makeObservable(this);
    }
  
    //用于修改状态的action动作
    @action addList(item) {
      this.list = [item, ...this.list];
    }
  
    /*
      计算属性 (最好通过解构获取值，方便mobx检测值是否是自身的值变化，从而触发当前计算)
        当数据改变时，它会自动执行
        如果页面不引用，就算内部引用的值发生改变，也不会执行
    */
    @computed
    get listTotal() {
      const { list } = this;
      return list.length;
    }
  }
  

• 方式2：不使用@observable装饰器

  import { makeObservable, observable, action, computed } from "mobx";
  
  class A {
    list = [
      { id: 1, name: "zhangsan", age: 3 },
      { id: 2, name: "jack", age: 18 },
    ];
  
    constructor() {
      // mobx6 和以前版本这是最大的区别 官方案例 https://mobx.js.org/observable-state.html
      makeObservable(this, {
        list: observable,
        addList: action,
        listTotal: computed,
      });
    }
  
    addList(item) {
      this.list = [item, ...this.list];
    }
  
    get listTotal() {
      const { list } = this;
      return list.length;
    }
  }
  

二、传递mobx仓库（完成对App组件的供应）

//需要借助 Provider 完成对App组件的数据供应,使所有的后代组件都能共享mobx仓库
import { Provider } from "mobx-react";
import Store from "./store/A.js";
const store = new Store();
ReactDOM.render(
    {/* 如果此处声明将所有的store存放到xxx属性上,
        那么在组件内若要使用mobx，必须注入xxx。
        示例: @inject("storeAAA")    */}
    <Provider storeAAA={store}>
      <App />
    </Provider>,
  document.getElementById("root")
);

三、在组件内注入、使用mobx

import React, { Component } from "react";
//通过inject注入store；通过observer开启组件观察模式，监听mobx数据改变时，触发组件内对应部分Ui的渲染
import { inject, observer } from "mobx-react";
import { nanoid } from "nanoid";

//@inject注入的名称： Provider传入store的属性值
@inject("storeAAA")
@observer
class index extends Component {
  constructor(props) {
    super(props);

    this.nameNode = React.createRef();
    this.ageNode = React.createRef();
  }
  //添加
  addList = () => {
    const { storeAAA } = this.props;
     //使用mobx仓库中声明的action方法
    storeAAA.addList({
      id: nanoid(),//随机Id
      name: this.nameNode.current.value,
      age: this.ageNode.value,
    });
  };

  render() {
    console.log("A Props=>", this.props);
    const { storeAAA } = this.props;

    return (
      <div style={{border:'2px solid green'}}>
        <label>
          姓名：
          <input type="text" ref={this.nameNode} />
        </label>
        <label>
          年龄：
          <input type="number" ref={(e) => (this.ageNode = e)} />
        </label>
        <button onClick={this.addList}>点击添加</button>
         {/* 使用mobx仓库中声明的状态 list */}
        <ul>
          {storeAAA.list.map((v) => {
            return (
              <li key={v.id}>
                {v.name} ----- {v.age}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default index;

兄弟姐妹们，点波关注吧，一起分享有趣的技术！

CSDN： blog.csdn.net/qq_42753705… 全部原创好文

segmentfault 思否： segmentfault.com/u/jasonma19… 全部原创好文

博客园 ：www.cnblogs.com/Jason1995/ 全部原创好文