React state management tool-MobX study notes

React state management tool-MobX

Article source: Lagou big front-end high-paying training camp

1. Introduction to Mobx

1.1 Introduction to Mobx

Simple and scalable state management library

Mobx is
a powerful combination of React and Mobx sponsored by Mendix (code development platform), Coinbase (Bitcoin company), Facebook open source and many individual sponsors . React is responsible for rendering the application state, and Mobx is responsible for managing the application state for use by React.

1.2 MobX browser support

MobX 5 version runs on any browser that supports ES6 Proxy, does not support IE11, Node.js 6
MobX 4 can run on any browser that supports ES5.
The APIs of MobX 4 and 5 are the same

2. Preparation before development

2.1 Enable decorator syntax support (Method 1)

1. The bottom configuration of the ejection project: npm run eject
2. Download the decorator syntax babel plugin: npm install @babel/plugin-proposal-decorators
3. Add configuration to the package.json file

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

Enable decorator syntax support (Method 2)

1. npm install react-app-rewired customize-cra @babel/plugin-proposal-decorators
2. Create config-overrides.js in the project root directory and add configuration

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 Resolve the warning of the vscode editor about the decorator syntax

Press command + comma in vscode, then enter in the input box to javascript.implicitProjectConfig.experimentalDecorators
modify the configuration:"javascript.implicitProjectConfig.experimentalDecorators": true

3. Mobx + React

3.1 Download Mobx

npm install mobx mobx-react

3.2 Mobx workflow

Action -> state -> Views

5. Mobx data monitoring

5.1 computed value

When to use calculated values
to extract complex business logic from the template

5.2 autorun method

When the monitored state changes, if you want to produce an "effect" based on the state, use autorun.
Autorun will be executed once during initialization and will be executed every time the state changes.