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})
141 import react from 'react';
新增3 import todolist from "./components/todolist";
45 export default
6render() 
13 }

4、切換到子元件

1 import react,  from 'react';

2 import  from 'mobx-react';34
class child extends component 9//
該繫結方式屬於es7，需要安裝babel-preset-stage-2, 並新增到.babelrc中
10   _resettimer = ()=>
13   _increase = () =>
16render() >復位
22this._increase}>增加
2324
);25}26
}2728 export default observer(child);    //
非裝飾器的普通方式, 將元件傳入observer觀察器中，否則store接受不到元件的事件

以上是mobx最簡單的使用方法，官方推薦使用裝飾器模式。mobx就類似vuex， 需要state和action即可完成乙個簡單的狀態管理

大概思路：

1 . 在store中宣告狀態(state)和方法(action) 分別使用mobx的observer和action封裝

2. 在父元件中匯入state並屬性傳給子元件

3 .子元件通過props接收state, 在自定義的方法中呼叫store的方法，使store內的方法去改變state的值

React專案中使用Mobx狀態管理（二）

並上一節使用的是普通的資料狀態管理，不過官方推薦使用裝飾器模式，而在預設的react專案中是不支援裝飾器的，需要手動啟用。官方參考 一 新增配置 官方提供了四種方法,方法一 使用typescript，顧名思義該方法是專案使用typescript時的配置 方法二 使用babel preset mobx...

在專案中使用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...