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 ({ count } addCount(100)}> count ++ { getCount } { demo.count = e.target.value }} /> // 因为有对count的set方法，所以可以这样用);}
}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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！