React学习笔记之十二:通过TodoList学Mobx

Mobx学习笔记

---

1. mobx的作用

官网描述
React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。
MobX提供机制来存储和更新应用状态供 React 使用

简单点: React -> 把数据映射到页面上进行渲染
Mobx -> 提供存储和更新状态的方法(状态管理)

2. mobx-react 装饰器环境搭建

• 创建一个react应用并添加mobx-react

create-react-app mobx
cd ./mobx
yarn install mobx-react mobx @babel/plugin-proposal-decorators-S

Notes:支持装饰器的环境搭建办法

1. 本地不支持装饰器的话需要安装@babel/plugin-proposal-decorators, @babel/plugin-proposal-decorators主要是用了来支持装饰器的

2. 接下来配置node_modules/babel-preset-create-app/create.js中的overrides为

overrides: [
  isFlowEnabled && {
   
    exclude: /\.tsx?$/,p
    plugins: [require("@babel/plugin-transform-flow-strip-types").default]
  },
  isTypeScriptEnabled && {
   
    test: /\.(tsx|js|jsx)?$/,
    plugins: [
      [
        require("@babel/plugin-proposal-decorators").default,
        {
    legacy: true }
      ]
    ]
  }

3. 重启系统即可

3.mobx的基本使用方法

mobx 几个API介绍

1. observable
2. action
3. computed

observable

observable将一个变量变为可以观测的变量, 被observable元素装饰后，该元素会变为可以观测的,当该元素改变时, 在页面上渲染的地方得到改变，但是通过observable中的元素，是readonly的，不能直接通过赋值来改变

使用方法:

class Store {
   
    @observable counter = 0;
}

action

如果想要改变observable变量的值,就需要通过一个action定义的方法来对其值进行改变(也可以异步)

使用方法:

class Store {
   
    // 略一些业务代码...
    @action
    IncreaseCounter() {
   
        this.counter++;
    }
}

computed

在Store中某些值是需要通过Store中的部分值通过计算而来，而computed可以在其依赖值变化的时候相应的发生变化

使用方法:

class Store {
   
    // 略一些业务代码...
    @computed
    get getDetailTimer() {
   
        return `${
     parseInt(this.counter / 3600)}Hour-${
     parseInt(this.counter / 3600 % 60)Min}`
    }
}

4.mobx-react基本使用方法

1. Provider
2. observer
3. inject

1.Provider

Provider和React, Context中的Provider一个道理,将某一个值可以注入到组件树的深层中,一般会直接在App.js的外部加入Provider并将Store注入整个app中

2. observer

obse