摘要：一誕生的性能瓶頸，主要有以下原因。注意組件類(lèi)的第一個(gè)字母必須大寫(xiě)，否則會(huì)報(bào)錯(cuò)。組件并不是真實(shí)的節(jié)點(diǎn)，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬。此外，還提供兩種特殊狀態(tài)的處理函數(shù)。不會(huì)隨著時(shí)間改變可能不是。

本文為學(xué)習(xí)筆記，適合入門(mén)的童鞋，如有錯(cuò)誤，請(qǐng)多多指教。

Web app的性能瓶頸，主要有以下原因。

（1）Web基于DOM，而DOM很慢。瀏覽器打開(kāi)網(wǎng)頁(yè)時(shí)，需要解析文檔，在內(nèi)存中生成DOM結(jié)構(gòu)，如果遇到復(fù)雜的文檔，這個(gè)過(guò)程是很慢的?？梢韵胂笠幌?，如果網(wǎng)頁(yè)上有上萬(wàn)個(gè)、甚至幾十萬(wàn)個(gè)形狀（不管是圖片或CSS），生成DOM需要多久？更不要提與其中某一個(gè)形狀互動(dòng)了。

（2）DOM拖慢JavaScript。所有的DOM操作都是同步的，會(huì)堵塞瀏覽器。JavaScript操作DOM時(shí)，必須等前一個(gè)操作結(jié)束，才能執(zhí)行后一個(gè)操作。只要一個(gè)操作有卡頓，整個(gè)網(wǎng)頁(yè)就會(huì)短暫失去響應(yīng)。瀏覽器重繪網(wǎng)頁(yè)的頻率是60FPS（即16毫秒/幀），JavaScript做不到在16毫秒內(nèi)完成DOM操作，因此產(chǎn)生了跳幀。用戶體驗(yàn)上的不流暢、不連貫就源于此。

（3）網(wǎng)頁(yè)是單線程的。現(xiàn)在的瀏覽器對(duì)于每個(gè)網(wǎng)頁(yè)，只用一個(gè)線程處理。所有工作都在這一個(gè)線程上完成，包括布局、渲染、JavaScript執(zhí)行、圖像解碼等等，怎么可能不慢？

（4）網(wǎng)頁(yè)沒(méi)有硬件加速。網(wǎng)頁(yè)都是由CPU處理的，沒(méi)用GPU進(jìn)行圖形加速。

這里我們看到了dom的問(wèn)題，下面來(lái)學(xué)習(xí)下react做了哪些事情，就大概清楚為什么react解決了以上問(wèn)題。

優(yōu)勢(shì)：

組件可復(fù)用性和擴(kuò)展性好，開(kāi)發(fā)效率提高

前后端渲染模板上的統(tǒng)一，客戶端和服務(wù)器都可渲染

引入虛擬DOM，每個(gè)React組件都擁有一個(gè)完整的生命周期，對(duì)DOM狀態(tài)的操作都會(huì)批量更新，以期盡可能的減少頁(yè)面重繪，來(lái)追求更好的性能

劣勢(shì)：

框架100k,本身較大，手機(jī)頁(yè)面基本首屏WIFI/4S，3G/6S，可以考慮客戶端緩存

據(jù)其他業(yè)務(wù)反映，無(wú)其他劣勢(shì)，好評(píng)一片

框架建議：REACT+后臺(tái)直出+前端SPA，后續(xù)考慮Service Worker、或者上傳到cdn減少后續(xù)加載

　　React 可以在瀏覽器運(yùn)行，也可以在服務(wù)器運(yùn)行；

`react.js` 是 React 的核心庫(kù)
`react-dom.js` 是提供與 DOM 相關(guān)的功能
`Browser.js` 的作用是將 JSX 語(yǔ)法轉(zhuǎn)為 JavaScript 語(yǔ)法，此步驟應(yīng)在服務(wù)器完成

監(jiān)聽(tīng)jsx文件到j(luò)s自動(dòng)轉(zhuǎn)化方法：我們都知道react其實(shí)是以jsx的方式編碼，這就涉及由jsx到j(luò)s的轉(zhuǎn)化，以下為自動(dòng)轉(zhuǎn)化方式

npm install -g react-tools

jsx --watch src/ build/

[JSX] (http://facebook.github.io/jsx/) 是一個(gè)看起來(lái)很像 XML 的 JavaScript 語(yǔ)法擴(kuò)展。React 可以用來(lái)做簡(jiǎn)單的 JSX 句法轉(zhuǎn)換。

ReactDOM.render 是 React 的最基本方法

ReactDOM.render(
  
Hello, world!
,
  document.getElementById("example")
);

var HelloMessage = React.createClass({
  render: function() {
    return 
Hello {this.props.name}
;
  }
});

ReactDOM.render(
  ,
  document.getElementById("example")
);

React 允許將代碼封裝成組件（component），React.createClass 方法就用于生成一個(gè)組件類(lèi) HelloMessage 。模板插入 時(shí)，會(huì)自動(dòng)生成 HelloMessage 的一個(gè)實(shí)例（下文的"組件"都指組件類(lèi)的實(shí)例）。所有組件類(lèi)都必須有自己的 render 方法，用于輸出組件。

注意：
1、組件類(lèi)的第一個(gè)字母必須大寫(xiě)，否則會(huì)報(bào)錯(cuò)。HelloMessage
2、組件類(lèi)只能包含一個(gè)頂層標(biāo)簽，否則也會(huì)報(bào)錯(cuò)。h1

組件并不是真實(shí)的 DOM 節(jié)點(diǎn)，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬 DOM （virtual DOM）。只有當(dāng)它插入文檔以后，才會(huì)變成真實(shí)的 DOM 。根據(jù) React 的設(shè)計(jì)，所有的 DOM 變動(dòng)，都先在虛擬 DOM 上發(fā)生，然后再將實(shí)際發(fā)生變動(dòng)的部分，反映在真實(shí) DOM上，這種算法叫做?DOM diff?，它可以極大提高網(wǎng)頁(yè)的性能表現(xiàn)。
從組件獲取真實(shí) DOM 的節(jié)點(diǎn)，這時(shí)就要用到?ref?屬性

組件的生命周期分成三個(gè)狀態(tài)：

Mounting：已插入真實(shí) DOM

Updating：正在被重新渲染

Unmounting：已移出真實(shí) DOM

React 為每個(gè)狀態(tài)都提供了兩種處理函數(shù)，will?函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did?函數(shù)在進(jìn)入狀態(tài)之后調(diào)用，三種狀態(tài)共計(jì)五種處理函數(shù)。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 還提供兩種特殊狀態(tài)的處理函數(shù)。

componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時(shí)調(diào)用

shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時(shí)調(diào)用

<應(yīng)用>
動(dòng)畫(huà)類(lèi)：可以采用componentDidMount，利用定時(shí)器不斷變化形狀或者透明度等形態(tài)
ajax:可以使用?componentDidMount?方法設(shè)置 Ajax 請(qǐng)求，等到請(qǐng)求成功，再用?this.setState?方法重新渲染 UI

React 的一大創(chuàng)新，就是將組件看成是一個(gè)狀態(tài)機(jī)，一開(kāi)始有一個(gè)初始狀態(tài)，然后用戶互動(dòng)，導(dǎo)致?tīng)顟B(tài)變化，從而觸發(fā)重新渲染 UI。

getInitialState：用于定義初始狀態(tài)，也就是一個(gè)對(duì)象
this.state?：屬性讀取
this.setState： 修改狀態(tài)值，每次修改以后，自動(dòng)調(diào)用?this.render?方法，再次渲染組件

state和props不同：

this.props?表示那些一旦定義，就不再改變的特性，它們從父組件傳遞過(guò)來(lái)，“屬于”父組件。
this.state?是會(huì)隨著用戶互動(dòng)而產(chǎn)生變化的特性。故表單類(lèi)渲染也需要用state，this.state?是組件私有的，可以通過(guò)調(diào)用?this.setState()來(lái)改變它。當(dāng) state 更新之后，組件就會(huì)重新渲染自己。

第一步：拆分用戶界面為一個(gè)組件樹(shù)

第二步： 利用 React ，創(chuàng)建應(yīng)用的一個(gè)靜態(tài)版本

第三步：識(shí)別出最小的（但是完整的）代表 UI 的 state,分析是否為state 。簡(jiǎn)單地對(duì)每一項(xiàng)數(shù)據(jù)提出三個(gè)問(wèn)題：

是從父級(jí)通過(guò) props 傳入的？可能不是 state 。

不會(huì)隨著時(shí)間改變？可能不是 state 。

能根據(jù)組件中其它 state 數(shù)據(jù)或者 props 計(jì)算出來(lái)？不是 state 。

第四步：確認(rèn) state 的生命周期，判斷哪個(gè)組件會(huì)改變或者說(shuō)擁有這個(gè) state 數(shù)據(jù)模型。

找出每一個(gè)基于那個(gè) state 渲染界面的組件。

找出共同的祖先組件（某個(gè)單個(gè)的組件，在組件樹(shù)中位于需要這個(gè) state 的所有組件的上面）。

要么是共同的祖先組件，要么是另外一個(gè)在組件樹(shù)中位于更高層級(jí)的組件應(yīng)該擁有這個(gè) state 。

如果找不出擁有這個(gè) state 數(shù)據(jù)模型的合適的組件，創(chuàng)建一個(gè)新的組件來(lái)維護(hù)這個(gè) state ，然后添加到組件樹(shù)中，層級(jí)位于所有共同擁有者組件的上面

第五步：添加反向數(shù)據(jù)流，組件之間經(jīng)常交互，從父級(jí)到子級(jí)比較簡(jiǎn)單，這里說(shuō)的從子級(jí)到父級(jí)

相關(guān)鏈接：
中文社區(qū)：http://react-china.org/
facebook react官網(wǎng)：http://facebook.github.io/react/