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