React學習記錄（一）

    很早就聽聞大名鼎鼎的react.js了，可是由於我的緣由一直沒有接觸。這幾天想弄一個富文本編輯器放到本身的項目裏，在網上找了找，發現一個看起來很棒的富文本編輯器框架——draft.js，原本想馬上上手搭建富文本編輯器，結果發現draft.js是基於react的一款框架，因而趁機學習了一下react。

    不得不說react的入門教程真是太貼心了，一步一步的教你利用react搭建一個井字棋小遊戲。除了一些基礎內容，也通俗的講了一些比較深層次的東西，好比數據的不可變性和制定列表項key值的重要性等。中文版教程的地址在這：https://react.docschina.org/tutorial/tutorial.html

    學完有如下幾點體會：

    1. 組件化：不是以單個的dom元素爲單元，而是以大大小小的組件爲單元。而且先編寫內層的小組件，而後用一個外層的大組件去控制它。大小組件以前經過props進行通信。數據的存儲與處理都放在高層組件上，最底層的小組件只負責與用戶交互，傳遞用戶觸發的事件，並受控的更新dom。也就是負責view這一塊，model這一塊由上層組件負責。

    2. 狀態提高：從小的組件開始編寫，在一步步擴展成大的組件的同時進行狀態提高。數據的存儲與處理應該放在最外層的組件上。當項目擴大須要更外層的組件的時候，就進行狀態提高，將數據存儲與處理移交給更外層的組件，這樣有利於管理數據，將模型與視圖分離。當遇到須要同時獲取多個子組件數據，或者兩個組件之間須要相互通信的狀況時，把子組件的 state 數據提高至其共同的父組件當中保存。以後父組件能夠經過 props 將狀態數據傳遞到子組件當中。這樣應用當中的狀態數據就可以更方便地交流共享了。

    3.模型與視圖的分離與映射：由於數據都在高層的組件，而視圖都在底層的組件上，因此二者的分離十分明顯。映射關係則是經過props屬性來創建的；當用戶觸發事件時，利用props屬性將事件一路傳遞到高層組件，在高層組件調用處理函數改變數據；而數據在和底層組件之間也經過props屬性創建了映射關係，一旦數據修改，react的髒檢查機制會檢測到對象的變化，並進一步更新對應的底層視圖。