webpack 配置react脚手架（五）：mobx

1.  配置项。使用mobx，因为语法时es6-next，所以先配置 .babelrc 文件

{
  "presets": [
    ["es2015", { "loose": true }],
    "stage-1",//改动了这里
    "react"
  ],
  "plugins": ["transform-decorators-legacy", "react-hot-loader/babel"]
  //还有这里，transform-decorators-legacy 放在 数组的第一项
}

安装：

npm i transform-decorators-legacy babel-preset-stage-1 -D

npm i mobx-react -S

2. 使用 在store/app-state.js中：

import {
  observable,
  computed,
  autorun,
  action,
} from 'mobx'

export class AppState {//方便组件调用的时候 判断props的类型
  @observable count = 0; //定义属性值
  @observable name = 'jok'
  @computed get msg() { //定义计算属性
    return `${this.name} say count is ${this.count}`
  }
  @action.add(){ //定义action 是由组件触发该方法的
    this.count + =1;
  }
　@action.changeName(name){
　　this.name = name;
　 }
}
const appState = new AppState();

autorun(()=>{
  console.log(appState.msg); //一旦更新appState
})

setInterval(()=>{
  appState.add();//实时更新，触发add的action
},1000)
export default appState;

调用方法：首先在 入口文件中，类似于使用 context的传入方式，把外层组件包裹起来：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'mobx-react'
import { AppContainer } from 'react-hot-loader' // eslint-disable-line

import App from './views/App'
import appState from './store/app-state'

const root = document.getElementById('root');
// 其实包裹组件的方式，使用的是context
const render = (Component) => {
  ReactDOM.hydrate(
    <AppContainer>
      <Provider appState={appState}>
        <BrowserRouter>
            <Component />
        </BrowserRouter>
      </Provider>
    </AppContainer>,
    root,
  )
}

然后在业务组件中使用，由于要用到 props，所以要先安装 props-type： npm i prop-types -S

import React from 'react'
import {
  observer,
  inject,
} from 'mobx-react'
import PropTypes from 'prop-types'
import { AppState } from '../../store/app-state';
@inject('appState') @observer
// 入口文件中 Provider定义的名字 <Provider appState={appState}> 这里引入什么名字
// @observer 规定是观察者模式，appState的状态发生变化，则对应的这里的数据也发生变化

export default class TopList extends React.Component {
  constructor(){
    super();
    this.changeName = this.changeName.bind(this);
    //因为在执行 onChange方法的时候，上下文已经不在组件内部了，所以要加上this指向
  }
  componentDidMount() {
    // do something here
  }
  changeName(event){
    this.props.appState.changeName(event.target.value);
  }
  render() {
    return [
      <div>
      <input type="text" onChange={this.changeName}/>
      <span>{this.props.appState.msg}</span>
      </div>
    ]
  }
}

TopList.propTypes = {
  appState: PropTypes.instanceOf(AppState).isRequired
}