React.js 是 Facebook 推出的一個(gè)用來(lái)構(gòu)建用戶(hù)界面的 JavaScript 庫(kù)，
React 術(shù)語(yǔ)
React Elements
代表 HTML 元素的 JavaScript 對(duì)象。 這些 JavaScript 對(duì)象最后被編譯成對(duì)應(yīng)的 HTML 元素。
Components
封裝 React Elements， 包含一個(gè)或者多個(gè) React Elements。 Components 用于創(chuàng)建可以復(fù)用的 UI 模塊，例如 分頁(yè)，側(cè)欄導(dǎo)航等。
JSX
JSX 是 React 定義的一種 JavaScript 語(yǔ)法擴(kuò)展，類(lèi)似于 XML 。 JSX 是可選的， 我們完全可以使用 JavaScript 來(lái)編寫(xiě) React 應(yīng)用， 不過(guò) JSX 提供了一套更為簡(jiǎn)便的方式來(lái)寫(xiě) React 應(yīng)用。
Virtual DOM
Virtual DOM 是一個(gè)模擬 DOM 樹(shù)的 JavaScript 對(duì)象。 React 使用 Virtual DOM 來(lái)渲染 UI， 同時(shí)監(jiān)聽(tīng) Virtual DOM 上數(shù)據(jù)的變化并自動(dòng)遷移這些變化到 UI 上。
React 主要的目標(biāo)是提供一套不同的, 高效的方案來(lái)更新 DOM.不是通過(guò)直接把 DOM 變成可變的數(shù)據(jù), 而是通過(guò)構(gòu)建 "Virtual DOM", 虛擬的 DOM,隨后 React 處理真實(shí)的 DOM 上的更新來(lái)進(jìn)行模擬相應(yīng)的更新。引入額外的一個(gè)層怎么就更快了呢?那不是意味著瀏覽器的 DOM 操作不是最優(yōu)的, 如果在上邊加上一層能讓整體變快的話(huà)?是有這個(gè)意思, 只不過(guò) virtual DOM 在語(yǔ)義上和真實(shí)的 DOM 有所差別.最主要的是, virtual DOM 的操作, 不保證馬上就會(huì)產(chǎn)生真實(shí)的效果.這樣就使得 React 能夠等到事件循環(huán)的結(jié)尾, 而在之前完全不用操作真實(shí)的 DOM.在這基礎(chǔ)上, React 計(jì)算出幾乎最小的 diff, 以最小的步驟將 diff 作用到真實(shí)的 DOM 上.批量處理 DOM 操作和作用最少的 diff 是應(yīng)用自身都能做到的.任何應(yīng)用做了這個(gè), 都能變得跟 React 一樣地高效.但人工處理出來(lái)非常繁瑣, 而且容易出錯(cuò). React 可以替你做到.
前面提到 virtual DOM 和真實(shí)的 DOM 有著不用的語(yǔ)義, 但同時(shí)也有明顯不同的 API.DOM 樹(shù)上的節(jié)點(diǎn)被稱(chēng)為元素, 而 virtual DOM 是完全不同的抽象, 叫做 components.component 的使用在 React 里極為重要, 因?yàn)?components 的存在讓計(jì)算 DOM diff 更高效.
簡(jiǎn)單的例子——Hello World
React Component 抽象出相同 UI 組件的結(jié)構(gòu)和邏輯。 通過(guò)調(diào)用React.createClass方法來(lái)創(chuàng)建一個(gè) Component，并傳入一個(gè)帶有render方法的對(duì)象類(lèi)型的參數(shù)。
var HelloMessage = React.createClass({ render: function() {
return
<div>Hello {this.props.name}</div>;
?}
?});
?React.renderComponent(<HelloMessage name="john"/>
, mountNode);
這個(gè)例子創(chuàng)建了 React component classHelloMessage,然后創(chuàng)建了一個(gè) virtual DOM, 包含 component(HelloMessages) 本質(zhì)是是HelloMessage class 的一個(gè)實(shí)例,并掛載到真實(shí)的 DOM 元素里的一個(gè)節(jié)點(diǎn).
在這里，可以看到有一個(gè)特殊的引用：this.props.name。 這個(gè)引用稱(chēng)之為Props，可以將他想象成 Component 的設(shè)置選項(xiàng)，在使用上，Props類(lèi)似于 HTML 中的屬性。需要注意的是， Props 僅用來(lái)定制 Component， 這些數(shù)據(jù)不應(yīng)該被改動(dòng)。 如果涉及到需要做改動(dòng)的數(shù)據(jù)， 得考慮使用state。State 數(shù)據(jù)代表 Component 的狀態(tài)， 用于維護(hù) Component 內(nèi)部的狀態(tài)。 當(dāng) State 發(fā)生改變之后， React 將會(huì)重新渲染 UI 。調(diào)用 與Props類(lèi)似， State 數(shù)據(jù)通過(guò)this.state訪(fǎng)問(wèn)。
component 的渲染通過(guò)render()函數(shù)定義.React 沒(méi)有明確說(shuō)明什么時(shí)候或者多頻繁他會(huì)去調(diào)用render(),只是會(huì)盡量調(diào)用, 使得正確的界面更新能看清.render()方法返回的內(nèi)容, 表示了瀏覽器里真實(shí)的 DOM 看起來(lái)應(yīng)該怎樣.
