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

刺骨的言语ヽ痛彻心扉 2021-12-21 00:15 374阅读 0赞

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
    }

转载于:https://www.cnblogs.com/xiaozhumaopao/p/10999579.html