React 介紹
React是由Facebook（臉書）開源的一個進(jìn)行創(chuàng)建用戶界面的一款JavaScript庫，如今已應(yīng)用于Facebook及旗下的Instagram應(yīng)用。
React與龐大的AngularJS不同的地方在于它只專注于MVC框架中的V，即視圖；這點(diǎn)使得React很容易與開發(fā)者已有的開發(fā)棧進(jìn)行融合。
React在使用的時候，你應(yīng)該從UI出發(fā)，抽象出不同的組件，繼而將它們拼裝起來；這點(diǎn)順應(yīng)了Web開發(fā)組件化的趨勢。
React應(yīng)用
React 的核心思想是：封裝組件。
各個組件維護(hù)自己的狀態(tài)和UI，當(dāng)狀態(tài)變更，自動重新渲染整個組件。
基于這種方式的一個直觀感受就是我們不再需要不厭其煩地來回查找某個 DOM元素，然后操作 DOM 去更改 UI。
React 大體包含下面這些概念：
- 組件
- JSX
- Virtual DOM
- Data Flow
這里通過一個簡單的組件來快速了解這些概念，以及建立起對 React 的一個總體認(rèn)識。
import React, { Component } from 'react';
import { render } from 'react-dom';
class HelloMessage extends Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
// 加載組件到 DOM 元素 mountNode
render(<HelloMessage name="John" />, mountNode);
組件
React 應(yīng)用都是構(gòu)建在組件之上。
上面的 HelloMessage 就是一個 React構(gòu)建的組件，最后一句 render 會把這個組件顯示到頁面上的某個元素 mountNode 里面，顯示的內(nèi)容就是 <div>Hello John</div>。
props 是組件包含的兩個核心概念之一，另一個是 state（這個組件沒用到）。可以把 props 看作是組件的配置屬性，在組件內(nèi)部是不變的，只是在調(diào)用這個組件的時候傳入不同的屬性（比如這里的 name）來定制顯示這個組件。
JSX
從上面的代碼可以看到將 HTML 直接嵌入了 JS 代碼里面，這個就是 React 提出的一種叫 JSX 的語法，這應(yīng)該是最開始接觸 React 最不能接受的設(shè)定之一，因為前端被“表現(xiàn)和邏輯層分離”這種思想“洗腦”太久了。但實際上組件的 HTML 是組成一個組件不可分割的一部分，能夠?qū)?HTML 封裝起來才是組件的完全體，React 發(fā)明了 JSX 讓 JS 支持嵌入 HTML 不得不說是一種非常聰明的做法，讓前端實現(xiàn)真正意義上的組件化成為了可能。
好消息是你可以不一定使用這種語法，后面會進(jìn)一步介紹 JSX，到時候你可能就會喜歡上了?，F(xiàn)在要知道的是，要使用包含 JSX 的組件，是需要“編譯”輸出 JS 代碼才能使用的，之后就會講到開發(fā)環(huán)境。
Virtual DOM
當(dāng)組件狀態(tài) state 有更改的時候，React 會自動調(diào)用組件的 render 方法重新渲染整個組件的 UI。
當(dāng)然如果真的這樣大面積的操作 DOM，性能會是一個很大的問題，所以 React 實現(xiàn)了一個VirtualDOM，組件 DOM 結(jié)構(gòu)就是映射到這個 Virtual DOM 上，React 在這個 Virtual DOM上實現(xiàn)了一個 diff 算法，當(dāng)要重新渲染組件的時候，會通過 diff 尋找到要變更的 DOM 節(jié)點(diǎn)，再把這個修改更新到瀏覽器實際的DOM 節(jié)點(diǎn)上，所以實際上不是真的渲染整個 DOM 樹。這個 Virtual DOM 是一個純粹的 JS 數(shù)據(jù)結(jié)構(gòu)，所以性能會比原生 DOM 快很多。
Data Flow
“單向數(shù)據(jù)綁定”是 React推崇的一種應(yīng)用架構(gòu)的方式。當(dāng)應(yīng)用足夠復(fù)雜時才能體會到它的好處，雖然在一般應(yīng)用場景下你可能不會意識到它的存在，也不會影響你開始使用React，你只要先知道有這么個概念。
