名字完全是為了SEO優化...

談不上是教程，就說說我的理解，按照我的理解，也許你能入門快點。

我剛接觸React的時候，第一個問題是我為什麼要用他，這是我的習慣。

從很多角度上來講我覺得React理念不錯，但是並沒有什麼卵用，當然，學來裝逼還是不錯的。

首先從實現的角度講，我可以用JS、JQ、CSS實現我能接觸的專案，全世界70%的專案複雜度都很低。

從速度角度，想用好React相當於要接觸一個龐大的技術棧，學習成本很高的。

所以，我很早就知道React，卻從來都沒學。

這回因為換了一家公司，專案需要，我就學了，比如：node，ES6，Koa（以及Koa的各種模組），webpack（各種外掛和loader），React，mobx...

時間還好吧，不到10天我就開始有改bug的能力了，而且我還寫了一個差不多的腳手架（直接可以寫程式碼，自動打包，熱部署）。

其實React本身還挺簡單的，只是React的話，推薦阮一峰前輩的React入門：http://www.ruanyifeng.com/blog/2015/03/react.html

React想說的就兩件事：元件，狀態。

1.所有的內容都是以元件為單位的。

2.使用者操作引起狀態的變化，狀態引起元件的變化（重新渲染）。

知道這兩點，加上幾個demo，你就可以使用React了，但是你實際用起來就會發現一些問題。

最大的問題就是：元件之間怎麼交流？（包括父子，兄弟）

從React的角度來說，沒有什麼好的解決方案，網上有一些，不過我沒仔細看（能知道終極解決方案，我就不浪費時間學半成品了）

終極解決方案：mobx

看到這，如果你沒看阮一峰前輩的入門教程，就別繼續看了。

React的元件都有一個state屬性，這就是React元件的狀態了，只要狀態改變了，就會觸發render重新渲染。

於是你寫了以下程式碼：（ES6語法哈~可以百度ES6 React）

import React from 'react';
class Try extends React.Component{
    state = {
        number: 0
    }

    render (){
        return (<div onClick={ this.addNumber.bind(this) }>數字：{ this.state.number }</div>);
    }

    addNumber(){
        this.setState({number: this.state.number+=1});
    }
}
 

就這點程式碼，你可以反覆嘗試一下，比如類名第一個字母小寫；改變state用this.state.number += 1；onClick寫成onclick。別問我怎麼知道的，都是淚。

這是一個元件，你可以不用mobx也沒關係，但是如果兩個元件溝通呢？

render( <div> <Rtbox0 /><Rtbox1 /> </div> );

這種情況，Rtbox0要改變Rtbox1的狀態怎麼辦？Rtbox0改完Rtbox1，Rtbox1又改另外的元件，另外的元件又改Rtbox0怎麼辦？

所以大家要把狀態共享出來，或者說，得弄個小廣播，一個元件狀態改變了，在一個公共的地方喊一聲，我變了！其他的元件根據他的變化做一些動作。

mobx乾的就是這麼一件事，網上說的都太官方，而且基本上都是翻譯老外的文章。

所以，mobx只是一個程式設計師在遇到上面的問題後想出的解決方案。

如果是你怎麼解決？

mobx是這樣的：在引用元件之前，定義一個東西，可以是任何東西，當然，這個東西經過加工過（mobx-react），然後傳入想用這個東西的元件

這個元件必須是經過mobx修飾的。

這時候，你傳入的東西，作用於是全域性的，也就是一旦變化了，誰都能感知，我估計，mobx修飾元件就是把這個全域性的跟元件內的state做關聯

全域性的變了，區域性的也變了，進而觸發區域性的render。

我理解的大致就是這樣，mobx實現這個功能的原理我還沒資本研究。

總結

說了一大堆，可能廢話居多。

總結起來我現在寫React的方式就是：

由於資料的變化引起的元件變化，要使用mobx，在引入元件之前建立一個什麼東西共享。比如：登入以後，使用者資訊所有元件共享

如果是元件內部變化引起的元件變化，就使用內部的state就可以了，不要去影響全域性。比如：點選某個地方顯示一些東西，就元件內部自己處理吧

我還是感覺React和mobx的這種合作很原始，就像是一個孩子剛學會咀嚼，還不會評價味道。