React是Facebook在2013年開源在GitHub上的JavaScript庫。
1、React特點：
(1) Virtual DOM
DOM操作非常昂貴，React把真實的DOM樹轉換成JavaScript對象樹，也就是Virtual DOM。每次數據更新後，重新計算Virtual DOM，並與上一次生成的Virtual DOM做對比，對變化的部分做批量更新，從而提升性能。
React還提供了shouldComponentUpdate生命週期回調，來減少數據變化後不必要的Virtual DOM對比過程，以保證性能。
(2) 函數式編程
React把過去不斷重複構建UI的過程抽象成了組件，並能充分利用很多函數式方法減少冗餘代碼。
函數式編程是React的精髓！
2、JSX語法
JSX的官方定義是類XML語法的ECMAScript擴展。
JSX將HTML語法加入到JavaScript代碼中，再通過編譯轉換成純JavaScript後由瀏覽器執行。在實際開發中，JSX在產品打包階段就已經編譯成純JavaScript，採用Bable的JSX編譯器實現。JSX讓代碼更易於閱讀和開發，並易於維護。
(1) 語法特點：
1) 定義標籤時，只允許被一個標籤包裹。
如const component = <span>name</span> <span>value</span> 這樣寫會報錯。
原因是一個標籤會被轉譯成對應的React.creatElement調用方法，最外層沒有被包裹就無法轉譯成方法調用。
2) 標籤一定要閉合。
(2) 元素類型：
react中創建的虛擬元素分爲兩類：DOM元素與組件元素，分別對應着原生DOM元素與自定義元素。
JSX里根據HTML標籤首字母是否爲小寫字母的規則對應兩類元素。其中小寫首字母對應DOM元素，大寫首字母對應組件元素。
如構建一個List組件：
const List = () =>(
<div>
<Title>This is title.</Title>
<ul>
<li>list item</li>
<li>list item</li>
</ul>
</div>
);
List組件中的<div>標籤會生成DOM元素，Title以大寫字母開頭，會生成組件元素。
等到依賴的組件元素中不再出現組件元素，就可以構建出完整的DOM樹。
(3) 元素屬性：
1) DOM元素的屬性是標準規範屬性，但有兩個例外：class和for，因爲在JS中這兩個單詞都是關鍵詞。JSX中對這兩個屬性進行了轉換：
class屬性轉換爲className;
for屬性轉換爲htmlFor。
組件元素的屬性是完全自定義的屬性，也可以理解爲爲實現組件所需要的參數。
如：const Header = (title, children) => (
<h3 title = {title}>{children}</h3>
);
調用：<Header title = "hello world">hello world</Header>
給Header組件加了一個title屬性。
2) Boolean屬性：
省略Boolean屬性值會導致JSX認爲bool值設爲了true。要傳false時，必須使用屬性表達式。這常用於表單元素中，如disabled、required、checked和readOnly等。
例如，<Checkbox checked = {true} />可以簡寫爲<Checkbox checked />,
反之，<Ckeckbox checked = {false} /> 就可以省略checked屬性。
3) 展開屬性：
如果事先知道組件需要的全部屬性，JSX可以這樣來寫：
const component = <Component name={name} value={value} />;
可以用ES6 rest/spresd特性來提高效率：
const data = { name: 'foo', value: 'bar' };
const component = <Component name={data.name} value={data.value} />;
可以寫成：
const data = { name: 'foo', value: 'bar' };
const component = <Component {...data} />; //取data中的數據
4) 自定義HTML屬性：
在DOM元素中傳入自定義屬性是不會渲染的，如果要使用HTML自定義屬性，要在屬性名前加data- 前綴（作用是便於取數據，對DOM元素進行操作）
如： <div data-attr = "xxx" > content </div>
而在自定義標籤中任意的屬性都是支持的。