mobx 计数器

前言：
react 框架自带的 state 在操作数据的时候，能够实现数据双向绑定，虽然好用，但是在组件传递的时候，尤其是多层组件传递数据，就变的不可预测，把自己给玩蒙了。redux 就是解决统一数据流，数据流完全可控并可追踪。要实现该目标，便需要进行相关的约束。Redux 由此引出了 dispatch action reducer 等概念，对state的概念进行强约束。然而对于一些项目来说，太过僵硬，便失去了灵活性。Mobx 便是来填补此空缺的。

这里对Redux和Mobx进行简单的对比：

1. Redux的编程范式是函数式的而Mobx是面向对象的；

2. 因此数据上来说Redux理想的是immutable （不可变的）的，每次都返回一个新的数据，而Mobx从始至终都是一份引用。因此Redux是支持数据回溯的；

3. 然而和Redux相比，使用Mobx的组件可以做到精确更新，这一点得益于 Mobx 的observable；对应的，Redux 是用 dispath 进行广播，通过 Provider 和 connect 来比对前后差别控制更新；Mobx更加精细一点。

一、安装

npm install --save-dev mobx mobx-react @babel/plugin-proposal-decorators

二、暴露一个变量

// 引入observable
import { observable } from "mobx";
// 监听 a 的状态
export default observable({
    "a" : 0
});

observable: 通过 observable(state) 定义组件的状态，包装后的状态是一个可观察数据（Observable Data）。Observable 值可以是JS基本数据类型、引用类型。

三、变量照耀全局

main.js

import React from "react";
import ReactDom from "react-dom";
import App from "./App";
// 引入
import store from "./reducer/starReducer";
// 照耀
ReactDom.render(<App store = {store}/>,document.getElementById("app"));

四、装饰器装饰

observer: 通过 observer(ReactComponent) 定义组件

import React,{Component} from "react";
//引入 装饰器
import {observer} from 'mobx-react';

@observer
export default class App extends Component{
    constructor(){
        super();
    }
    render(){
        return (
                <div>
                    <h1>{this.props.store.a}</h1>
                    <button onClick = {()=>{this.props.store.a+=10}}>按我加一</button>
                </div>
            );
    }
}

计数器.gif

redux 和 Mobx 的最大区别就是？
Mobx 的优势来源于可变数据（Mutable Data）和可观察数据 (Observable Data) 。

Redux 的优势来源于不可变数据（Immutable data）。

Mobx 相比于redux 更加智能。