項(xiàng)目demo: https://github.com/Aluka-w/react-mobx

React + Mobx

項(xiàng)目需要故研究mobx, 遇到的問題, 對(duì)于裝飾器的開啟, mobx的語法解析

裝飾器Decorators

1. 兩篇博客配合食用

* https://blog.csdn.net/qq_41234284/article/details/81532294 基本配置
* https://blog.csdn.net/zhangyabo_code/article/details/83066844裝飾器配置

2. 步驟:

3. 執(zhí)行命令 yarn eject

4. 安裝babel插件 yarn add babel-plugin-transform-decorators-legacy --dev

5. 在 package.json 中添加以下 babel 配置

  {
    "plugins": [
      "transform-decorators-legacy"
    ],
    "presets": [
      "react-app"
    ]
  }

4. 此時(shí)還會(huì)報(bào)錯(cuò)The ‘decorators’ plugin requires a ‘decoratorsBeforeExport’ option

5. yarn add @babel/plugin-proposal-decorators --dev

6. 在 package.json babel中添加, 到此瀏覽器不報(bào)錯(cuò)

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

7. 此時(shí) vscode提示報(bào)錯(cuò) experimentalDecorators, 設(shè)置里面 javascript.implicitProjectConfig.experimentalDecorators改為true即可

---到此裝飾器配置部分完成---

Mobx

mobx與redux類似, 均不是只為react服務(wù), mobx相較于redux來的簡單, 但是大項(xiàng)目中的數(shù)據(jù)追蹤做的不夠嚴(yán)謹(jǐn),mobx有點(diǎn)類Vue

mobx

1. 主要api

2. @observable

* 概念: 創(chuàng)建一個(gè)被監(jiān)聽的對(duì)象, 沒有@observable聲明的視圖不能檢測(cè)到變化

2. @computed

* 概念: 類比vue的Computed, 當(dāng)依賴的值有變化時(shí)會(huì)執(zhí)行一遍

3. @action

* 概念: 改變store的值的行為

4. extendObservable

* 概念: 初始為被 @observable設(shè)置為被監(jiān)聽值的, 可以通過extendObservable添加
  否則自行添加的沒辦法被mobx檢測(cè)到變化

5. autorun

* 概念: 初始執(zhí)行一次, 當(dāng)依賴的值有變化時(shí)候就會(huì)執(zhí)行里面的函數(shù), 此方法在mobx-react中被 @observer 所替代

mobx-react

1. 主要api

2. Provider

* 概念: Provide與redux類似, 把利用context把store注入全局中

2. inject

* 概念: 給組件注入其需要的 store（利用 React context 機(jī)制）

3. @observer

* 概念: 監(jiān)聽store的變化, 同時(shí)更新視圖的變化

mobx可以創(chuàng)建多個(gè)store, 然后通過根store把所有的子store整合

Demo

1. 跟redux的demo一致, 只是做一個(gè)todoList

2. 項(xiàng)目結(jié)構(gòu)

   
   
   項(xiàng)目的目錄結(jié)構(gòu)

--- 項(xiàng)目開始了, 剩余的用法再補(bǔ)充---