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  //监听 ageage = 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)