Mbox

Mobx

Mobx是一个功能强大，上手非常容易的状态管理工具。redux的作者也曾经向大家推荐过它，在不少情况下可以使用Mobx来替代掉redux。

这张图来自于官网，把这张图理解清楚了。基本上对于mobx的理解就算入门了。

官网有明确的核心概念使用方法，并配有egghead的视频教程。这里就不一一赘述了。

要特别注意当使用 mobx-react 时可以定义一个新的生命周期钩子函数 componentWillReact。当组件因为它观察的数据发生了改变，它会安排重新渲染，这个时候 componentWillReact 会被触发。这使得它很容易追溯渲染并找到导致渲染的操作(action)。

• componentWillReact 不接收参数
• componentWillReact 初始化渲染前不会触发 (使用 componentWillMount 替代)
• componentWillReact 对于 mobx-react@4+, 当接收新的 props 时并在 setState 调用后会触发此钩子
• 要触发componentWillReact必须在render里面用到被观察的变量
• 使用Mobx之后不会触发componentWillReceiveProps

react脚手架 - Mobx配置 （ 装饰器 ）

1. 创建项目
   create-react-app app

2. 进入项目
   cd app

3. 进行配置文件抽离
   yarn eject

4. 安装mobx mobx-react

   mobx 是状态管理工具

   mobx-react 是做数据分片和数据获取

   $ $yarn add mobx mobx-react
   注意： 如果git冲突
   解决： 我们要原文件先放到本地暂存盘
   git add .
   git commit -m ’

   ​ 然后 ： 安装mobx mobx-react’
   ​ 注意不要git push

5. 配置装饰器（ 修饰器 es6 ） babel
   yarn add babel-plugin-transform-decorators-legacy -D
   yarn add @babel/preset-env -D
   yarn add babel-plugin-transform-class-properties -D
   yarn add @babel/plugin-proposal-decorators -D

6. 配置package.json

   "babel": {
	    "plugins": [
	      [
	        "@babel/plugin-proposal-decorators",
	        {
	          "legacy": true
	        }
	      ],
      "transform-class-properties"
    ],
    "presets": [
      "react-app",
      "@babel/preset-env"
    ]
    },

  注意： 以下两个配置顺序不可更改
     [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "transform-class-properties"

项目中 mobx应该怎么用？

1. 新建store目录
   src
   store
   home
   index.js
   car
   index.js
   index.js

2. 在入口文件中 使用 Provider

   import store from './store'
   import { Provider } from 'mobx-react'

   ReactDOM.render(
     <Provider store = {store}>
       <Show />
     </Provider>
   , document.getElementById('root'));

3. 哪个组件使用 ， 就在哪个组件中 “注入” inject

   import {inject} from 'mobx-react'

   <!-- @inject(string) -->
   @inject('store')

4. 打造mobx 数据包

   import {
     observable, computed,action
   } from 'mobx'
   class Home {
     @observable  //监听 age
       age = 18

     @computed    //当age发生改变时， 自动触发
       get doubleAge(){
         return this.age * 2
       }

     @action  // 用户操作  事件调用
       increment(){
         this.props.store.home.age ++ 
         console.log( this.props.store.home.age )

       //数据请求
       fetch('/data/data.json')
       .then(res => res.json())
       .then( result => console.log( result ))
       .catch( error => console.log( error ))
     }

 }

 const home = new Home()

 export default home

5. 打造store
   store/index.js

   import home from './home'
   const store = {
     //实例
     home
   }

   export default store

6. 组件内使用数据

   this.props.store.xxx 可以拿到数据

   注意：

   1. this.porps里面没有找到 @action 装饰器定义的方法， 但是可以直接使用，

   2. this会丢失

      this.props.store.home.increment.bind(this)