React使用mobx

React使用mobx

一、mobx简介

mobx它是一个简单、 可扩展的状态管理。作用和redux是一样的，但是它的写法要比redux要简单许多，也是现在react生态中非常流行的一个状态管理(react官方还推荐一段时间)。

mobx5它是使用装饰器来完成的，对于函数组件支持不是太好，适合类组件

mobx6它已不使用装饰器，对于函数组件也支持

二、安装

mobx5建议在17及以下版本的react中去使用,建议在类组件中去使用mobx5

npm i -S mobx@5 mobx-react@5 --force

三、定义mobx库

 import { observable, computed, action } from "mobx";
// mobx5就是通过装饰器来完成对于属性和方法的装饰，来实现数据的响应式

// 定义一个类
class Store {
  // 让此属性变成一个响应式的属性
  @observable
  num = 100;

  @observable users = [];

  // action让成员方法，变成一个可以操作响应数据的方法
  // xx.bound  可以解决this指向问题，一般解构后使用此方法才会有this指向不对问题
  @action.bound
  setNum(n) {
    this.num += n;
    // console.log('mobx', n, this.num)
  }

  @action.bound
  setUsers(data) {
    this.users = data;
  }

  // 异步
  // 如果此方法中有异步操作，不建议直接在此方法完成对于响应属性进行修改
  // 而是再定义一个方法专门来修改此响应属性
  @action.bound
  async fetchUsers(page = 1) {
    console.log(this);
    let ret = await (await fetch("/api/users?page=" + page)).json();
    this.setUsers(ret.data);
  }
}

// {store:store对象实例}
export default { store: new Store() };

四、mobx的使用

import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'

@inject(['store']) // 把store映射到this.props.store中
@observer // 让组件是一个响应式的组件
class App extends Component {
  componentDidMount() {
    let { fetchUsers } = this.props.store
    // this.props.store.fetchUsers(2)
    fetchUsers(2)
  }

  render() {
    let { num, setNum, users } = this.props.store
    return (
      <div>
        <h3>mobx5的使用 --- {num}</h3>
        <button
          onClick={() => {
            setNum(1)
          }}
        >
          累加mobx中的num属性
        </button>
        <hr />
        <ul>
          {users.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    )
  }
}

export default App