初識ReactJs

## react優勢

- 元件化，而不是寫一大堆HTML模闆

js邏輯與HTML标簽緊密相連并且極易了解

- 單向資料流

資料一旦更新，就直接重新渲染整個app，這是讓react如此牛逼的關鍵點

  ### 管理ui的狀态并不簡單

  修改DOM樹

  修改資料

  接收使用者的輸入

  異步API資料請求 

  ### 和傳統的伺服器渲染相似

  #### 傳統方式

  浏覽器請求頁面

  伺服器請求資料庫

  将資料傳給模闆

  模闆渲染頁面

  #### React的渲染方式

  使用者輸入

  從API擷取資料

  将資料傳給頂層元件

  React将每個元件渲染出來

  将不再有：1.魔法般的雙向資料綁定2.資料模型的肮髒檢查（dirty checking）3.确切的DOM操作

  好處：1.每個元件都是幹啥的，很直覺2.結果更可以預測3.元件之間的關系更清晰

  #### 一個React元件可以了解成一個獨立的函數

  接受參數（props），可複用，可以傳遞，傳回結果（渲染元件）

- 虛拟DOM樹

  JavaScript雖快，但是DOM操作會相當慢

  react在每一次跟新都會做以下事件處理

    - React重建DOM

    - 找到與上個版本的DOM的差異

    - 計算出最新的DOM跟新操作

    - 從操作隊列中批量地執行DOM跟新操作