码迷,mamicode.com
首页 > 其他好文 > 详细

React项目中使用Mobx状态管理(二)

时间:2018-12-31 14:44:23      阅读:536      评论:0      收藏:0      [点我收藏+]

标签:tor   import   复位   方法   启用   pps   添加   插件   str   

并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的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

1 const rewireMobX = require(‘react-app-rewire-mobx‘);
2 
3 /* config-overrides.js */
4 module.exports = function override(config, env) {
5   config = rewireMobX(config, env);
6   return config;
7 }

 

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

 

二、修改业务代码

  1. 根组件不变

 1 import React from ‘react‘;
 2 import appState from ‘./store‘;
 3 import Todo from "./components/Todo";
 4 
 5 export default class App extends React.Component {
 6   render() {
 7     return (
 8       <div className=‘app‘>
 9         <Todo appState={appState}/>
10       </div>
11     )
12   }
13 }

  2 . 修改store

 1 import {observable, action } from ‘mobx‘
 2 
  // 常量改成类 3 class AppState {
   // 装饰器@
4 @observable timer = 0 5 6 @action 7 resetTimer() { 8 this.timer = 0; 9 } 10 11 @action.bound 12 increase() { 13 console.log(‘increase‘) 14 this.timer++; 15 } 16 } 17 // 将类实例化,后再暴露, 也可以先导出再在组件使用时再实例化 18 const appState = new AppState()
  // 外部调用类的方法
19 setInterval(appState.increase, 1000) 20 21 export default appState;

 

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

 1 import React, {Component} from ‘react‘;
 2 import { observer } from ‘mobx-react‘;
 3 
 4 // 装饰器方式@
 5 @observer
 6 class TodoList extends Component {
 7 
 8   constructor(props) {
 9     super(props);
10   }
11   // 该绑定方式属于ES7,需要添加预设babel-preset-stage-2
12   _resetTimer = ()=> {
13     this.props.appState.resetTimer()
14   }
15   _increase = () => {
16     this.props.appState.increase()
17   }
18 
19   render() {
20     return (
21       <div>
22         <h2>TodoList</h2>
23         <p>{this.props.appState.timer}</p>
24         <button onClick={this._resetTimer}>复位</button>
25         <button onClick={this._increase}>增加</button>
26       </div>
27     );
28   }
29 }
30 
31 // 直接导出类组件
32 export default TodoList;

 

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

 

React项目中使用Mobx状态管理(二)

标签:tor   import   复位   方法   启用   pps   添加   插件   str   

原文地址:https://www.cnblogs.com/hughes5135/p/10201936.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!