React项目中使用Mobx状态管理（二）

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

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

巴特西

React项目中使用Mobx状态管理（二）

最新文章

热门文章