首页 技术 正文
技术 2022年11月23日
0 收藏 617 点赞 4,938 浏览 1892 个字

并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用。

官方参考

一、添加配置

官方提供了四种方法,

方法一、使用TypeScript,顾名思义该方法是项目使用typescript时的配置

方法二、使用babel-preset-mobx, 安装并添加到.babelrc配置中,该方法需要升级一些依赖,

  babel-core -> @/babel-core 7.x

  babel-loader -> @/babel-loader 8.x

  babel-preset-env -> @/babel-preset-env

  babel-preset-react -> @babel-preset-react

  

同时需要修改.babelrc配置,相当麻烦

方法三、使用babel-plugin-transform-decorators-legacy, 安装并添加到.babelrc即可, 但需要注意的是必须将其放在其他插件之前。

方法四、在create-react-app中使用,需要eject或者使用react-app-rewired-mobx

  1. 使用eject时 ($ npm run eject),是将项目的配置文件全部暴露出来,注意该操作不可逆,然后再使用方法二或者方法三进行配置

  2. 使用react-app-rewired-mobx是为了避免eject项目, 安装模块后在项目根目录新建文件config-overrides.js

 const rewireMobX = require('react-app-rewire-mobx'); /* config-overrides.js */
module.exports = function override(config, env) {
config = rewireMobX(config, env);
return config;
}

综合以上方法,显而易见方法三最简单而且不易出错。

二、修改业务代码

  1. 根组件不变

 import React from 'react';
import appState from './store';
import Todo from "./components/Todo"; export default class App extends React.Component {
render() {
return (
<div className='app'>
<Todo appState={appState}/>
</div>
)
}
}

  2 . 修改store

 import {observable, action } from 'mobx'

  // 常量改成类
class AppState {
   // 装饰器@
@observable timer = 0 @action
resetTimer() {
this.timer = 0;
} @action.bound
increase() {
console.log('increase')
this.timer++;
}
}
// 将类实例化,后再暴露, 也可以先导出再在组件使用时再实例化
const appState = new AppState()
  // 外部调用类的方法
setInterval(appState.increase, 1000) export default appState;

  3 . 修改子组件,(将observer改成@observer放在类的前面即可)

 import React, {Component} from 'react';
import { observer } from 'mobx-react'; // 装饰器方式@
@observer
class TodoList extends Component { constructor(props) {
super(props);
}
// 该绑定方式属于ES7,需要添加预设babel-preset-stage-2
_resetTimer = ()=> {
this.props.appState.resetTimer()
}
_increase = () => {
this.props.appState.increase()
} render() {
return (
<div>
<h2>TodoList</h2>
<p>{this.props.appState.timer}</p>
<button onClick={this._resetTimer}>复位</button>
<button onClick={this._increase}>增加</button>
</div>
);
}
} // 直接导出类组件
export default TodoList;

修改完毕,项目正常运行。

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141817.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,067
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,504
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,312
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,307
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,904
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,097
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站