React全家桶-02-Mobx状态管理快速入门

1.Mobx介绍和安装:

React 和 MobX是⼀对强⼒组合。

React是⼀个消费者，将应⽤状态state渲染成组件树对其渲染。

🚀 Mobx是⼀个提供者，⽤于存储和更新状态state

🌵安装：

yarn add mobx 
yarn add mobx-react

2.使用Mobx进行+1和-1的小例子

1. 通过observable来创建可被观察者对象
2. 给观察者对象添加一些方法然后导出
3. 使用过程中需要引入observer来建立可被观察者对象(appState)和这个观察者对象(监听者)的联系---observer(Mobxtest)
4. 然后在组件顶层的index.js中引入可被观察者对象-appState并作为props传递下去。

🌈 传统写法：

• 收下来看下目录结构:

src
├─App.js
├─index.js
├─store
|   ├─mobx
|   |  └index.js
├─Components
|     ├─Mobxtest.js

• 接着来看下mobx/index的代码:

import {observable, action,} from "mobx";

// 创建观察者对象
const appState = observable({
    num:0
});

// 给观察者创造一些方法
appState.increment = action(()=>{
    appState.num ++;
})
appState.decrement = action(()=>{
    appState.num --;
})

export default appState

• 接着来看下MobxTest组件代码:

import React, {Component} from 'react';
import {observer} from "mobx-react";
import {Button} from "antd";
class Mobxtest extends Component {
    render() {
        return (
            <div style={{marginTop:"20px"}}>
                <p>{this.props.appState.num}</p>
                <Button type="primary" onClick={this.props.appState.increment}>添加 1</Button>
                <Button type="primary" onClick={this.props.appState.decrement}>减少 1</Button>
            </div>
        );
    }
}

export default observer(Mobxtest); //这里需要调用下observer观察者

• 最后来到index.js文件中

//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MobxTest from "./Components/Mobxtest";
import appState from "./store/mobx";

function render(){
    ReactDOM.render(
            <MobxTest appState={appState}/>,
        document.getElementById('root')
    );
}
render();

🌈 装饰器写法：

• mobx/index的代码:

import {observable, action,makeObservable} from "mobx";
class AppState{
    @observable num =0;
    // 🚀 这个constructor真的是诡异，而且必须加载@observable后面才能使num具有响应性
    constructor() {
        makeObservable(this)
    }
		// 🚀推荐使用箭头函数的形式定义
    @action
    increment=()=>{
        console.log(this)
        this.num++;
    }
    @action
    decrement=()=>{
        this.num--;
    }
}
export default  new AppState();

• 接着来看下MobxTest组件代码:(只是将export default observer(Mobxtest)改成了@observer的形式)

import React, {Component} from 'react';
import {observer} from "mobx-react";
import {Button} from "antd";
@observer
class Mobxtest extends Component {
    render() {
        return (
            <div style={{marginTop:"20px"}}>
                <p>{this.props.appState.num}</p>
                <Button type="primary" onClick={this.props.appState.increment}>添加 1</Button>
                <Button type="primary" onClick={this.props.appState.decrement}>减少 1</Button>
            </div>
        );
    }
}

export default Mobxtest; //这里需要调用下observer观察者

• index.js和上面的一样，保持不变

3.Mobx和redux的对比

• 学习难度:redux > Mobx

• ⼯作量:redux > Mobx

• 内存开销:redux > Mobx

• 状态管理的集中性:redux > Mobx

• 样板代码的必要性:redux > Mobx

🚀结论：使⽤Mobx⼊⻔简单，构建应⽤迅速，但是当项⽬⾜够⼤的时候，还是redux,爱不释⼿，那还是开启严格模式，再加上⼀套状态管理的规范。