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

首先安装：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;

为您推荐相关文章:

• 深度解析 React useRef Hook 的使用 ！ https://blog.csdn.net/qq_42753705/article/details/121973014?spm=1001.2014.3001.5501
• 最简洁的 Mbox 6.x 基本使用步骤介绍（仅三步）！！！https://blog.csdn.net/qq_42753705/article/details/121909076?spm=1001.2014.3001.5501
• (干货) 全网最全 react-router-dom v6.0学习指南（新特性深入解读、持续更新…）！！！https://blog.csdn.net/qq_42753705/article/details/121871363?spm=1001.2014.3001.5501
• （原创）深入解读s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的问提https://blog.csdn.net/qq_42753705/article/details/121837154?spm=1001.2014.3001.5501
• 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】https://blog.csdn.net/qq_42753705/article/details/122008800
• React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】！！！https://blog.csdn.net/qq_42753705/article/details/121998895