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

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

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

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

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

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

（4）網(wǎng)頁沒有硬件加速。網(wǎng)頁都是由CPU處理的，沒用GPU進行圖形加速。

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

優(yōu)勢：

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

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

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

劣勢：

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

據(jù)其他業(yè)務(wù)反映，無其他劣勢，好評一片

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

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

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

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

npm install -g react-tools

jsx --watch src/ build/

[JSX] (http://facebook.github.io/jsx/) 是一個看起來很像 XML 的 JavaScript 語法擴展。React 可以用來做簡單的 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 方法就用于生成一個組件類 HelloMessage 。模板插入 時，會自動生成 HelloMessage 的一個實例（下文的"組件"都指組件類的實例）。所有組件類都必須有自己的 render 方法，用于輸出組件。

注意：
1、組件類的第一個字母必須大寫，否則會報錯。HelloMessage
2、組件類只能包含一個頂層標(biāo)簽，否則也會報錯。h1

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

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

Mounting：已插入真實 DOM

Updating：正在被重新渲染

Unmounting：已移出真實 DOM

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

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

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

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

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

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

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

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

state和props不同：

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

第一步：拆分用戶界面為一個組件樹

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

第三步：識別出最小的（但是完整的）代表 UI 的 state,分析是否為state 。簡單地對每一項數(shù)據(jù)提出三個問題：

是從父級通過 props 傳入的？可能不是 state 。

不會隨著時間改變？可能不是 state 。

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

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

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

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

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

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

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

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