React 基礎一：JSX、Babel、單項數據流和腳手架

這些內容是我學習 《fullstack-react-book》 一書，自己翻譯整理出來的要點。

JSX

1. react 是用一種假冒的 DOM（它表示用來組成網頁頁面的 HTML 樹）結構來創立 app 的，react 稱之爲虛擬 DOM。

2. react 中的 JSX 語法僅僅是允許我們在使用 JavaScript 時可以來描述 HTML ，本意是爲了讓代碼看起來更加的像原生 HTML。但請記住 JSX 事實上會被編譯成 JavaScript。

3. 在 JSX 中，我們不能使用 class 關鍵字來爲一個元素申明樣式類，但 react 允許我們用 className 這個關鍵字來爲一個元素寫樣式類名。

4. JSX 的屬性值，必須以大括號或單引號進行界定。對於字符串來說，我們使用單引號進行界定。如果，屬性值比較重要或者是個變量的話，我們使用大括號進行界定。

Babel

1. Babel 一個非常有用的特性就是它能理解 JSX 。

2. 我們使用以下代碼告訴瀏覽器 JS 引擎，我們使用 Babel 來編譯和運行我們的 JavaScript 代碼：

   1. 首先，引入 babel 插件： <script src="vendor/babel-core-5.8.25.js"></script>。
   2. 其次，告訴 JavaScript 執行器，我們寫的代碼需要用 babel 進行編譯：<script type="text/babel" src="./app.js"></script>。

one-way data flow——單向數據流

1. 含義：數據的任何改動，將從 app 的頂部，向下擴展擴散到它的各個組件中。

合理的空白“腳手架”——“假”的 state

1. 當 ReactDOM.render() 在執行的時候，會遞歸渲染所有子組件。

2. 當組件 A 有個子組件 B ，react 會根據 state 的狀態來決定是否渲染它裏面的子組件 B 的時候。在組件 A 發起 ajax 到響應成功後更新 state 這段時間內，子組件 B 及其後面的組件都不會被渲染。如果用戶的網速過慢，給用戶的直觀感受就是先看到一個空白頁面，然後再陸陸續續跳出了很多塊內容，而並不是加載出來的，這種體驗不太好。

3. 如果，我們對 state ，一開始就給了一個假值時，那麼所有組件都會被渲染出來，只是數據可能不是正確的。然後所有組件內部的 ajax 都會並行發起 ajax ，這時完整數據的頁面的顯示會更快一點。給用戶的感覺就是先看到了一個有假值頁面，但頁面的樣式這些都已經渲染完成，過一會兒後，頁面真實的數據就會刷新出來，而並不是內容一塊一塊跳出來！

4. 如果用時間軸來總結的話，基本如下：

   1. 用戶體驗不太好的情況：ajaxA -> ajaxB -> ... -> ajaxN -> 完整頁面；

   2. 用戶體驗比較好的情況：

      ajaxA 
          -> ajaxB     //完整頁面，只是數據不對
          -> ajaxC
          -> ...
          -> ajaxN