Mobx与React

下面先介绍一些启用装饰器用法的先关内容
TypeScript

在 tsconfig.json 中启用编译器选项 "experimentalDecorators": true 。

Babel: 使用 babel-preset-mobx

另外一种在 Babel 中配置 MobX 的方式是使用 mobx preset，这种方式更方便，其中包含了装饰器及其他几个经常与 mobx 一起使用的插件:

npm install --save-dev babel-preset-mobx

.babelrc:

{
  "presets": ["mobx"]
}

Babel: 手动启用装饰器

要启用装饰器的支持而不使用 mobx preset 的话，需要按照下列步骤。 安装支持装饰器所需依赖: npm i --save-dev babel-plugin-transform-decorators-legacy 。 并在 .babelrc 文件中启用:

{
  "presets": ["es2015", "stage-1"],
  "plugins": ["transform-decorators-legacy"]
}

注意，插件的顺序很重要: transform-decorators-legacy 应该放在首位。 babel 设置有问题？请先参考这个 issue 。

主要包含的包

• mobx-react 提供 mobx 到 react 之间的链接。
• mobx-react-devtools 提供了开发者工具的支持。

import {observer} from 'mobx-react'
import DevTool from 'mobx-react-devtools'

@observer
class App extrnds React.Component{
  constructor(props){
        super(props);
        this.state = {};
    }

    render(){
        return(
            

                
                 {tihs.props.children}
            
        );
    }
}

• mobx-react 提供了 Provider 来包裹应用，以传递 store
• mobx-react 提供了 inject 用来将对应 store 注入到组件中

import {observer, inject, Provider, observable} from 'mobx-react'

class Store {
  @observable name = 'xiaobai'
}
const stroes = {
  initStore: new Store()
}

@inject('initStore')  // 字符串是要挂载在组件上的 store，可在 this.props.initStore 上访问到
@observer  // 这个装饰器必须在最深层
class APP extends React.Component{
  render(){
    return 
App
  }
}

ReactDOM.render((
    
        
    
  ), document.getElementById('container'));

• configure 由 mobx 提供，只要用于配置 mobx。

import {configure} from 'mobx'

// 状态始终需要通过动作来更新(实际上还包括创建)
configure({enforceActions: 'always'});

• 生命周期钩子

import {observer} from 'mobx-react'

@observer
class App extends React.Component{
  componentWillReact(){
    // 将在每次 状态更新后执行，但是是在 render 之前执行的
  }
}

需要注意的是
componentWillReact 不接收参数;
componentWillReact 初始化渲染前不会触发 (使用 componentWillMount 替代);
componentWillReact 对于 mobx-react@4+, 当接收新的 props 时并在 setState 调用后会触发此钩子；

setState 的替代方案
可以使用 observable 观察组件属性来更新 UI，从而代替 setState。这种替换方法不是推荐方法。
只要使用 observer 包装的组件。

1. 可以使用 action 包装类方法作为动作。
2. 使用 observable 包装的属性可以作为观察属性。
3. computed 进行计算属性的定义

import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import {observable, action} from "mobx";
import './style.css';
 
@inject('commonStore')
@observer
export default class Timer extends Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    @observable secondsPassed = 0;
 
    componentWillMount(){
        this.props.commonStore.startTime();
        this.timer = setInterval(this.handleChangeSecondsPassed,1000);
    }
 
    @action.bound handleChangeSecondsPassed(){
        this.secondsPassed ++;
    }
 
    render(){
        const {time} = this.props.commonStore;
        return(
            

                
{time}
                
Seconds passed:{this.secondsPassed}
            
        );
    }
}