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

最新推荐文章于 2024-03-12 21:34:17 发布

置顶 Jason Ma丶丶前端工程师

最新推荐文章于 2024-03-12 21:34:17 发布

阅读量2k

点赞数 2

分类专栏： React javascript 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/qq_42753705/article/details/121909076

版权

javascript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

React

9 篇文章 0 订阅

订阅专栏

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