並上一節使用的是普通的資料狀態管理，不過官方推薦使用裝飾器模式，而在預設的react專案中是不支援裝飾器的，需要手動啟用。
官方參考
一、新增配置
官方提供了四種方法,
方法一、使用typescript，顧名思義該方法是專案使用typescript時的配置
方法二、使用babel-preset-mobx, 安裝並新增到.babelrc配置中，該方法需要公升級一些依賴，
babel-core -> @/babel-core 7.x
babel-loader -> @/babel-loader 8.x
babel-preset-env -> @/babel-preset-env
babel-preset-react -> @babel-preset-react
同時需要修改.babelrc配置，相當麻煩
方法三、使用babel-plugin-transform-decorators-legacy, 安裝並新增到.babelrc即可, 但需要注意的是必須將其放在其他外掛程式之前。
1. 使用eject時 ($ npm run eject)，是將專案的配置檔案全部暴露出來,注意該操作不可逆，然後再使用方法二或者方法三進行配置23
/*config-overrides.js
*/4 module.exports = function
override(config, env)
綜合以上方法，顯而易見方法三最簡單而且不易出錯。
二、修改業務**
1. 根元件不變
1 import react from 'react';3 import todo from "./components/todo";
45 export default
6render()
13 }
2 . 修改store
1 import from 'mobx'2// 常量改成類
34 @observable timer = 056
@action
7resettimer()
1011
@action.bound
12increase() 16}
17 // 將類例項化，後再暴露, 也可以先導出再在元件使用時再例項化
203 . 修改子元件,(將observer改成@observer放在類的前面即可)
1 import react, from 'react';
2 import from 'mobx-react';34
//裝飾器方式@
5@observer
6class todolist extends component
11//
該繫結方式屬於es7，需要新增預設babel-preset-stage-2
12 _resettimer = ()=>
15 _increase = () =>
1819
render() >復位
25this._increase}>增加
2627
);28}29
}3031//
直接匯出類元件
32 export default todolist;
修改完畢，專案正常執行。
React專案中使用Mobx狀態管理（一）
1 安裝 1 yarn add mobx mobx react 2 新建store index.js，存放資料 以下思路僅限於父子元件的簡單應用 1 import from mobx 2 觀察器 狀態 4 timer 1005 方法8 9 方法 11 console.log increase 13 ...
在專案中使用react
1.執行 cnpm install react react dom s react安裝包 專門用於建立元件和虛擬dom的，同時元件的生命週期都在這個包中 react dom安裝包 專門進行dom操作的，最主要的應用場景就是reactdom.render 2.在index.html頁面中建立容器 di...
react專案中使用plop
第一步，安裝依賴 npm install plop dev 或者用yarn yarn add plop dev 第二步，在package同級目錄下新建plopfile.js 這是plop的入口檔案，需要匯出乙個函式，此函式接受乙個plop物件，用於建立生成器任務 1 module.exports p...