初體驗react的狀態機

1、什麼是狀態機

狀態機可概括爲4個要素，即現態、條件、動做、次態。這樣的概括，主要是出於對狀態機的內在因果關係的考慮。「現態」和「條件」是因，「動做」和「次態」是果。詳解以下：

①現態：是指當前所處的狀態。

②條件：當一個條件被知足，將會觸發一次狀態的遷移。

③動做：條件知足後執行的動做。動做執行完畢後，能夠遷移到新的狀態，也能夠仍舊保持原狀態。動做不是必需的，當條件知足後，也能夠不執行任何動做，直接遷移到新狀態。

④次態：條件知足後要遷往的新狀態。「次態」是相對於「現態」而言的，「次態」一旦被激活，就轉變成新的「現態」了

2、什麼是事件

當類對象的某個狀態發生變化時，系統將會經過某種途徑調用類中的有關處理這個事件的方法或者觸發控件事件的對象就會調用該控件全部已註冊的事件處理程序等。

3、比較狀態機和事件的區別

狀態機	事件
狀態機僅僅是狀態遷移，並不關注狀態變化後你們幹什麼。perfect，分離了關注點，全部組件能夠選擇本身想關注的「狀態」來自適應變化。	關注事件和結果
誰都能獲得狀態
廣播狀態，主動選擇適應。基本能夠不用事件監聽機制了。	註冊-監聽，全局監聽管理。及耗瀏覽器性能
只管生無論養，若是土壤好，環境好，長的天然好 若是沒有強硬的編碼規範約束，確定是一鍋粥	管生管養，成本高，效率低
狀態控制UI，致使UI的重用率高，界面和數據完整分開	一般的js框架界面模板多數用完即銷燬，反覆服務器存取

handleAdd: function() {
........
this.setState({items: oldItems});
.........
this.setState({items: oldItems});
}

5、原則

1）若是使用react你的第一原則就是使用狀態機去解決一切，別用flux這些插件。

非官方的react-router,react-motion，他們都是使用非狀態機的方式來作的，更應該避而遠之。

2）讓狀態進入系統設計，變爲系統開發過程全程可控的。

3）UI被狀態全程控制。狀態不能濫用，只能用於UI控制

4）狀態雙向綁定：系統設計嚴格區分層級，控制狀態傳遞在父子之間，祖輩之間禁止傳遞狀態。react原則上狀態是能夠任意傳遞的。

5）不要使用框架。react本身自己都還在反覆完善階段。你用框架是給本身挖坑。原生的和使用jquery這類框架也沒什麼區別

若有三層:A->B->C->D，AB之間能夠互通,BC，CD均可以，可是AC,AD這類跨層次須要嚴格禁止。

6）react原則上不建議在原生html的dom中寫數據的，以下面一種方式是不建議使用，二是建議包裝下div,做爲重複可用組件:

<div key="123"
            viewState="1234"
            viewdState={StateCode.MainBoxItem}
            data-view-state={StateCode.MainBoxItem}
            onClick={this.handleItemShow}
          >
            1\main  page.click me
          </div>

經編譯後在谷歌瀏覽器看到的結果：

<div data-view-state="MainBoxItem" data-reactid=".0.0.0.0.2.$123">1\main  page.click me</div>

說明了只有前綴爲"data-"的屬性纔會最終被渲染到真實dom，另外咱們怎麼獲取到這個data-view-state的屬性值呢？在handleItemShow方法中使用

console.log(event.nativeEvent.target.getAttribute("data-view-state"));

注意：區分狀數據雙向綁定。官方是嚴格要求數據是單向傳遞的，我的也贊同