React + MobX 入門及實例（一）

前言

如今最熱門的前端框架，毫無疑問是React。

React是一個狀態機，由開始的初始狀態，經過與用戶的互動，致使狀態變化，從而從新渲染UI。

對於小型應用，引入狀態管理庫是"奢侈的"。

但對於複雜的中大型應用，引入狀態管理庫是"必要的"。

如今熱門的狀態管理解決方案Redux，MobX相繼進入開發者的視野。

Redux、MobX哪個更適合你的項目？

在react項目中使用redux or mobx？

正如愛因斯坦所說的 「 讓一切事物儘量的簡單，但不要簡單」。

儘管讓咱們來填一填 MobX 的坑。

介紹

1.入門

對於應用開發中的常見問題，React 和 MobX都提供了最優和獨特的解決方案。React 提供了優化UI渲染的機制， 這種機制就是經過使用虛擬DOM來減小昂貴的DOM變化的數量。MobX 提供了優化應用狀態與 React 組件同步的機制，這種機制就是使用響應式虛擬依賴狀態圖表，它只有在真正須要的時候才更新而且永遠保持是最新的。

2.安裝

npm install --save mobx mobx-react

3.核心概念

1.state(狀態)
狀態是驅動應用的數據。

2.observable(value) && @observable
Observable 值能夠是JS基本數據類型、引用類型、普通對象、類實例、數組和映射。其修飾的state會暴露出來供觀察者使用。

const map = observable.map({ key: "value"});
map.set("key", "new value");

const list = observable([1, 2, 4]);
list[2] = 3;

const person = observable({
    firstName: "Clive Staples",
    lastName: "Lewis"
});
person.firstName = "C.S.";

const temperature = observable(20);
temperature.set(25);

3.observer(觀察者)
被observer修飾的組件，將會根據組件內使用到的被observable修飾的state的變化而自動從新渲染

import {observer} from "mobx-react";

var timerData = observable({
    secondsPassed: 0
});

setInterval(() => {
    timerData.secondsPassed++;
}, 1000);

@observer class Timer extends React.Component {
    render() {
        return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
    }
};

React.render(<Timer timerData={timerData} />, document.body);

4.action(動做)
只有在 actions 中，才能夠修改 Mobx 中 state 的值。
注意：當你使用裝飾器模式時，@action 中的 this 沒有綁定在當前這個實例上，要用過 @action.bound 來綁定 使得 this 綁定在實例對象上。

@action.bound setName () {
  this.myName = 'HUnter'
}

actions ------> state ------> view

5.computed
計算值(computed values)是能夠根據現有的狀態或其它計算值衍生出的值。
getter：得到計算獲得的新state並返回。
setter： 不能用來直接改變計算屬性的值，可是它們能夠用來做「逆向」衍生。

class Foo {
    @observable length = 2;
    @computed get squared() {
        return this.length * this.length;
    }
    set squared(value) { // 這是一個自動的動做，不須要註解
        this.length = Math.sqrt(value);
    }
}

6.autorun
這一般是當你須要從反應式代碼橋接到命令式代碼的狀況，例如打印日誌、持久化或者更新UI的代碼。

var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));

var disposer = autorun(() => console.log(sum.get()));
// 輸出 '6'
numbers.push(4);
// 輸出 '10'

disposer();
numbers.push(5);
// 不會再輸出任何值。`sum` 不會再從新計算。

經驗法則：若是你有一個函數應該自動運行，但不會產生一個新的值，請使用autorun。 其他狀況都應該使用 computed。

7.reactions
Reactions 和計算值很像，但它不是產生一個新的值，而是會產生一些反作用，好比打印到控制檯、網絡請求、遞增地更新 React 組件樹以修補DOM、等等。 簡而言之，reactions 在 響應式編程和命令式編程之間創建溝通的橋樑。

4.應用實例

1.TodoList

技術棧：react + react-router(v4)+mobx+webpack

效果圖：

很簡單的一個小demo，這裏不分析了，源碼裏有部分註釋幫助理解。
github地址：https://github.com/zhaoyu69/m...