React状态管理工具 - MobX学习笔记

React状态管理工具 - MobX

文章出处： 拉 勾 大前端 高薪训练营

1. Mobx 简介

1.1 Mobx 介绍

简单，可扩展的状态管理库

Mobx 是由 Mendix（代码开发平台）, Coinbase（比特币公司）, Facebook 开源和众多个人赞助商所赞助的
React 和 Mobx 是一对强力组合， React 负责渲染应用状态， Mobx 负责管理应用状态供 React 使用

1.2 MobX 浏览器支持

MobX 5 版本运行在任何支持 ES6 Proxy的浏览器，不支持 IE11， Node.js 6
MobX 4 可以运行在任何支持 ES5 的浏览器上
MobX 4 和 5 的 API 是相同的

2. 开发前的准备

2.1 启用装饰器语法支持（方式一）

1. 弹射项目底层配置： npm run eject
2. 下载装饰器语法 babel 插件： npm install @babel/plugin-proposal-decorators
3. 在 package.json 文件中加入配置

"babel": {
    
    
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
    
    
        "legacy": true
      }
    ]
  ]
}

启用装饰器语法支持（方式二）

1. npm install react-app-rewired customize-cra @babel/plugin-proposal-decorators
2. 在项目根目录下创建 config-overrides.js 并加入配置

const {
    
     override, addDecoratorsLegacy } = require("customize-cra");
module.exports = override(addDecoratorsLegacy());

3. package.json

"scripts": {
    
    
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

2.2 解决 vscode 编辑器关于装饰器语法的警告

在 vscode 按 command + 逗号，然后在输入框中输入javascript.implicitProjectConfig.experimentalDecorators
修改配置： "javascript.implicitProjectConfig.experimentalDecorators": true

3. Mobx + React

3.1 下载 Mobx

npm install mobx mobx-react

3.2 Mobx 工作流程

Action -> state -> Views

5. Mobx 数据监测

5.1 computed 计算值

什么时候使用计算值
将复杂的业务逻辑从模板中进行抽离

5.2 autorun 方法

当监听的状态发生变化时，如果想根据状态产生“效果”，使用 autorun.
autorun 会在初始化的时候执行一次，会在每次状态发生变化时执行。