Mobx-状态管理工具

Mobx

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

这张图来自于官网，把这张图理解清楚了，对于mobx的理解就算入门。
官网有明确的核心概念使用方法，并配有egghead的视频教程。

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

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

Mobx的使用流程

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

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

2. 进入项目
   cd app

3. 进行配置文件抽离
   yarn eject 必须要将配置文件抽离，因为要进行webpack的设置

4. 安装mobx 和 mobx-react

   • mobx 是状态管理工具
   • mobx-react 是做数据分片和数据获取
     $ $yarn add mobx mobx-react
     注意： 如果git冲突
     解决： 我们要原文件先放到本地暂存盘
     git add .
     git commit -m ‘安装mobx mobx-react’
     ​ 然后 ： 安装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
   找到wenpack中的babel 将其替换掉

   "babel": {		//复制以下代码直接替换
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "transform-class-properties"
    ],
    "presets": [
      "react-app",
      "@babel/preset-env"
    ]
    },

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

项目中 mobx应该怎么用？

1. 新建store目录

   		src
    	     -store
    	       -home
    	         -index.js
    	       -index.js
   

2. 在入口文件中 使用 Provider

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

   ReactDOM.render(
     <Provider store = {store}>		//将App组件包括 将store 绑定到Provider 上
       <App />
     </Provider>
   , document.getElementById('root'));

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

   import {inject} from 'mobx-react'	//mobx-react使用inject

	//@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)

import { inject , observer } from 'mobx-react'
@inject( 'store' )  //注入 ，将store的api和state注入到当前组件

@observer			//观察 
class Home extends Component {
	render () {
        let { num }  = this.props.store.home  //获取数据
        return (
            <Fragment>  
                { num }			//展示
            </Fragment>
        )
    }
}