mobx

状态管理工具

VS Redux

  1. 开发难度低：redux函数式编程思想；mobx响应式编程风格，同时集成度高，避免引入众多第三方库

  2. 开发代码量少：redux有reducer等众多概念，而mobx只要在store中更新即可

  3. 渲染性能好：redux通过shouldComponentUpdate优化，但是当应用大到一定程度，就比较难实现；mobx精确的指出了哪些需要重复渲染，将re-render限制在最小范围之内

mobx核心思想

  1. 状态变化引起的副作用应该被自动触发

  2. 数据流：类redux单向数据流模式（action =》 State =〉Reaction）

基础知识

实现继承和多态

  1. mkdir mobx_test
  2. cd mobx_test
  3. mkdir src
  4. touch src/index.js
  5. npm init -y
  6. touch webpack.config.js
  7. yarn add webpack webpack-cli babel-core babel-preset-env babel-loader -D

配置webpack.config.js

  1. const path = require('path')
  3. module.exports = {
  4.     mode: 'development', // 'production'
  5.     entry: path.resolve(__dirname, 'src/index.js'),
  6.     output: {
  7.         path: path.resolve(__dirname, 'dist'),
  8.         filename: 'main.js',
  9.     },
  10.     module: {
  11.         rules: [{
  12.             test: /\.js$/,
  13.             exclude: /node_modules/,
  14.             use: {
  15.                 loader: 'babel-loader',
  16.                 options: {
  17.                     presets: ['env'],
  18.                 }
  19.             }
  20.         }]
  21.     },
  22.     devtool: 'inline-source-map', // 方便调试
  23. }

配置package.json

  1. "scripts": {
  2.     "start": "webpack -w" // -w：js文件更改自动执行编译
  3.   },

编写index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7.     <script src= "src/index.js" type="text/javascript"></script>
  8. </body>
  9. </html>

编写src/index.js 用原生实现继承和多态

  1. 继承：Dog.prototype.proto === Animal.prototype

  2. 多态：重写Dog的name属性

  3. Dog的原型对象的构造函数应该指向Dog而不是Animal

  1. function Animal() {
  2.     // body...
  3. }
  4. function Dog() {
  5.     // body...
  6. }
  7. Object.defineProperties(Animal.prototype, {
  8.     name: {
  9.         value() {
  10.             return 'Animal'
  11.         }
  12.     },
  13.     say: {
  14.         value() {
  15.             return `I'm ${this.name()}`
  16.         }
  17.     }
  18. })
  19. // dog instanceOf Animal === true
  20. // dog.__proto__.__proto__ === Animal.prototype
  21. // dog.__proto__ === Dog.prototype
  22. // Dog.prototype.__proto__ === Animal.prototype
  23. Dog.prototype = Object.create(Animal.prototype, {
  24.     constructor: {
  25.         value: Dog,
  26.         enumerable: false,
  27.     },
  28.     name: {
  29.         value() {
  30.             return `Dog`
  31.         }
  32.     }
  33. })
  35. // document.write(new Dog() instanceOf Animal())
  36. // document.write(new Dog().say())
  37. document.write(Dog.prototype.constructor)

通过ES6来实现

  1. class Animal {
  2.     name() {
  3.         return 'Animal'
  4.     }
  5.     say() {
  6.         return `I'm ${this.name()}`
  7.     }
  8. }
  10. class Dog extends Animal {
  11.     name() {
  12.         return 'Dog'
  13.     }
  14. }
  16. console.log(new Dog() instanceOf Animal

安装babel插件，使其支持在类中声明成员变量
yarn add babel-plugin-transform-class-properties -D
配置webpack.config.js
module.rules下面的use.plugins: [‘transform-class-properties’]

decorator

Decorator是在声明阶段实现类与类成员注解的一种语法.本质上是特殊的函数。

安装babel插件
yarn add babel-plugin-transform-decorators-legacy -D
配置webpack.config.js
module.rules下面的use.plugins: [‘transform-decorators-legacy’]

mobx 常用 API

安装mobx依赖：yarn add mobx

observable(可观察的数据)

是一种让数据的变化可以被观察的方法

哪些数据可以被观察：

  • 原始类型：String | Number | Boolean | Symbol

  • 对象

  • 数组

PS：一定要检查数组的长度以避免越界访问，在mobx中越界的数组值是不被观察的.同样要检查对象是否含有属性hasOwnProperty

  1. import { observable } from 'mobx';
  3. class Store {
  4.   @observable array = []
  5.   @observable obj = {}
  6.   @observable map = new Map()
  8.   @observable string = 'hello'
  9.   @observable number = 20
  10.   @observable bool = false
  11. }

对可观察的数据作出反应

方式：

  • computed

    • observe()

    • get()

  • autorun

  • when

  • reaction

mobx 实现 todoList

yarn add mobx-react react react-dom prop-types
yarn add babel-preset-react

配置webpack.config.js
presets: [['env', 'react']],

资源

mobx-state-tree