mobx 初了解

前期准备

安装依赖

yarn add mobx mobx-react

mobx了解

• mobx主要作用
  *mobx 实现简单组件之间的数据交互(单向数据流)
  *mobx 把数据储存到组件中
• 原理
  通过四件驱动（UI事件，网络请求。。。）触发actions，在actions中修改了state的值，state即应用中的store树（储存数据），然后根据新的state的数据计算出所需要的计算属性，最后相应到ui视图层

创建类

// 可观察状态（State）
// @observable    obervebale的属性值在其变化的时候mobx会自动跟踪并作出响应
// @observable.deep    （默认）对对象进行深拷贝
// @observable.shallow    对对象进行浅拷贝
// @observable.ref    禁用对象的自动转换，只转换其引用

// @observable 修饰器

import { observable, action, computed} from 'mobx';

class Demo {
    @observable count = 100; // 只要发生变化，就会自动刷新视图

    @action addCount = (payload) => {
        console.log('count', this.count)
        this.count += payload;
    }

    @computed get getCount() {
        return this.count + '.00';
    }

    set count(num) {
        this.count = num;
    }
}

export default new Demo();

使用

import demo from './scripts/mobx/index'

import { observer } from 'mobx-react';
import React from 'react';

@observer
class App extends React.Component {
  render() {
    let { count, addCount, getCount } = demo;
    return (
      <div className="App">
        { count }
        <button onClick={() => addCount(100)}> count ++ </button>
        { getCount }
        <input onBlur={(e) => { demo.count = e.target.value }} /> // 因为有对count的set方法，所以可以这样用
      </div>
    );
  }
}


export default App;

可能出现问题

已经用了装饰器，但是数据更新视图不更新

// 经过测试，最新版本会出现问题，使用一下版本可以解决问题
"mobx": “5.15.4”,
“mobx-react”: “^6.2.2”,

报错：Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled

npm install  customize-cra react-app-rewired @babel/plugin-proposal-decorators --save

// 项目根目录新建config-overrides.js文件加入以下代码:
const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
   addDecoratorsLegacy()
);

// 修改package.json文件如下：
"scripts": {
 "start": "react-app-rewired start",
 "build": "react-app-rewired build",
 "test": "react-app-rewired test",
 "eject": "react-app-rewired eject"
  },
  // 该办法来自https://cloud.tencent.com/developer/ask/193850