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

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

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

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

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

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

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

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

優勢：

組件可復用性和擴展性好，開發效率提高

前后端渲染模板上的統一，客戶端和服務器都可渲染

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

劣勢：

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

據其他業務反映，無其他劣勢，好評一片

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

　　React 可以在瀏覽器運行，也可以在服務器運行；

`react.js` 是 React 的核心庫
`react-dom.js` 是提供與 DOM 相關的功能
`Browser.js` 的作用是將 JSX 語法轉為 JavaScript 語法，此步驟應在服務器完成

監聽jsx文件到js自動轉化方法：我們都知道react其實是以jsx的方式編碼，這就涉及由jsx到js的轉化，以下為自動轉化方式

npm install -g react-tools

jsx --watch src/ build/

[JSX] (http://facebook.github.io/jsx/) 是一個看起來很像 XML 的 JavaScript 語法擴展。React 可以用來做簡單的 JSX 句法轉換。

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、組件類只能包含一個頂層標簽，否則也會報錯。h1

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

組件的生命周期分成三個狀態：

Mounting：已插入真實 DOM

Updating：正在被重新渲染

Unmounting：已移出真實 DOM

React 為每個狀態都提供了兩種處理函數，will?函數在進入狀態之前調用，did?函數在進入狀態之后調用，三種狀態共計五種處理函數。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 還提供兩種特殊狀態的處理函數。

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

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

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

React 的一大創新，就是將組件看成是一個狀態機，一開始有一個初始狀態，然后用戶互動，導致狀態變化，從而觸發重新渲染 UI。

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

state和props不同：

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

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

第二步： 利用 React ，創建應用的一個靜態版本

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

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

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

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

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

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

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

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

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

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

相關鏈接：
中文社區：http://react-china.org/
facebook react官網：http://facebook.github.io/react/