Reactjs 起源於Facebook內部項目，是一個用來構建用戶界面的 javascript 庫，相當於MVC架構中的V層框架，與市面上其他框架不同的是，React 把每一個組件當成了一個狀態機，組件內部通過state來維護組件狀態的變化，當組件的狀態發生變化時，React通過虛擬DOM技術來增量並且高效的更新真實DOM。本文將對React 的這些特點進行簡單的介紹。
一個簡單的React組件 —— HelloReact考慮到有的同學還不曾了解過React，我們先來寫一個簡單的React組件，讓大家一睹為快！
1 // 創建一個HelloReact組件 2 3 var HelloReact = React.createClass({ 4 5 render:function(){ 6 7 return ( 8 9 <div> 10 11 Hello React! 12 13 </div> 14 15 ) 16 17 } 18 19 }); 20 21 // 使用HelloReact組件 22 23 ReactDOM.render( 24 25 <HelloReact />, 26 27 document.querySelector('body') 28 29 )
這樣就定義了一個React組件，當然要運行這段代碼是有條件的，需要引入React庫，還需要引入JSX語法轉換庫，這里不多說了，這些基礎的東西還需要各位親自實踐才好！
React 核心技術 —— 虛擬DOM（Virtual DOM）在前端開發的過程中，我們經常會做的一件事就是將變化的數據實時更新到UI上，這時就需要對DOM進行更新和重新渲染，而頻繁的DOM操作通常是性能瓶頸產生的原因之一，有時候我們會遇到這樣一種尷尬的情況：比如有一個列表數據，當用戶執行刷新操作時，Ajax會重新從后台請求數據，即使新請求的數據和上次完全相同，DOM也會被全部更新一遍並進行重新渲染，這樣就產生了不必要的性能開銷。
React為此引入了虛擬DOM（Virtual DOM）機制：對於每一個組件，React會在內存中構建一個相對應的DOM樹，基於React開發時所有的DOM構造都是通過虛擬DOM進行，每當組件的狀態發生變化時，React都會重新構建整個DOM數據，然后將當前的整個DOM樹和上一次的DOM樹進行對比，得出DOM結構變化的部分(Patchs)，然后將這些Patchs 再更新到真實DOM中。整個過程都是在內存中進行，因此是非常高效的。借用一張圖可以清晰的表示虛擬DOM的工作機制：
React 把每個組件都當作一個狀態機來維護和管理，因此每個組件都擁有一套完整的生命周期，大致可以分為三個過程：初始化、更新和銷毀。生命周期的每一個過程都明確的反映了組件的狀態變化。對於開發來說就能很容易的把握組件的每個狀態，不同的狀態時期做對應的事情，互不干擾。以下是和組件生命周期相關的幾個方法：
1 getDefaultProps //創建組建 2 3 getInitialState //實例化狀態 4 5 componentWillMount //掛載前 6 7 componentDidMount //掛載后 8 9 componentWillReceiveProps //屬性被改變時 10 11 shouldComponentUpdate //是否更新 12 13 componentWillUpdate //更新前 14 15 componentDidUpdate //更新后 16 17 componentWillUnmount //銷毀前
對於外部系統來說，組件是一個獨立存在的封閉系統，內部的邏輯被隱藏，只對外暴露傳遞數據的接口，而React為我們提供了兩種方式來向組件傳遞數據，即 props 和 state。
props 是在調用 ReactDOM.render() 時通過標簽屬性xxx傳遞，然后通過 this.props.xxx 來獲取，getDefaultProps 允許你為組件設置一個默認的props值，在沒有傳遞props的情況下顯示默認值。
1 // 創建HelloReact組件 2 3 var HelloReact = React.createClass({ 4 5 /** 6 7 * 當設置props的默認值 當沒有傳遞時顯示默認值 8 9 * @return {} 10 11 */ 12 13 getDefaultProps:function(){ 14 15 return { 16 17 data:"暫無數據" 18 19 } 20 21 }, 22 23 render:function(){ 24 25 return ( 26 27 <div> 28 29 //顯示data，當props發生變化時會自動更新 30 31 {this.props.data} 32 33 </div> 34 35 ) 36 37 } 38 39 });//傳遞props屬性data 40 41 ReactDOM.render( 42 43 <HelloReact data={"Hello React!"} />, 44 45 document.querySelector('body') 46 47 )
和 props 不同的是，state不能通過外部傳遞，因此在使用state之前，需要在 getInitialState 中為state設置一個默認值，然后才能通過 this.state.xxx 來訪問，當組件被掛載完成時，觸發 componentDidMount 方法，我們可以在這里通過Ajax請求服務器數據，然后再通過 setState() 把state的值設置為真實數據。
// 創建HelloReact組件 var HelloReact = React.createClass({ /** * 設置組件的初始值 * @returns {{data: Array, msg: string}} */ getInitialState:function(){ return { data:"數據加載中..." //初始值為[] } }, /** * 掛載后首次加載數據 */ componentDidMount:function(){ this.requestData();//請求數據 }, /** * 請求后台數據 */ requestData:function(){ $.ajax({ url:'xxxx.ashx', data:{}, success:function(data){ this.setState({ data:data //通過setState()更新服務器數據 }) } }.bind(this)) }, render:function(){ return ( <div> {this.state.data} </div> ) } }); ReactDOM.render( <HelloReact />, document.querySelector('body') )
更新
props屬性是只讀的，如果想要改變props的值，只能通過重新調用render()來傳遞新的props，但要注意的是，重新執行render()組件不會被重新掛載，而是通過虛擬DOM技術進行增量更新和渲染，這時還會觸發 componentWillReceiveProps 方法，並將新的props作為參數傳遞，你可以在這里對新的props進行處理。
相比props，state天生就是用來反映組件狀態的，因此它的值是可以被改變的，當state的值被改變時，通過setState就可以改變state的值，React同樣也是采用虛擬DOM技術來計算需要被更新的部分，而不是牽一發動全身的更新和渲染。
當 props 和 state 的狀態發生變化后，組件在即將更新之前還會觸發一個叫 shouldConponentUpdate 的方法，如果 shouldConponentUpdate 返回的是 true，不管props和state 的值和上一次相比有沒有變化，React 都會老老實實的進行對比。此時，如果你確定以及肯定兩次數據沒有變化，那就讓 shouldConponentUpdate 返回 false，React就不會進行diff了，更不會重新渲染了。瞬間省去了diff的時間。
銷毀當組件從DOM中被移除時，React會銷毀之。在銷毀之前，細心的React還觸發 componentWillUnmount 來通知你，看你最后有沒有什么話想對這個即將銷毀的組件說，當然你沒什么事就不用了。
什么時候用props,什么時候用state我們已經知道可以通過props和state兩種方式向組件傳遞數據，props是只讀的不能被改變，而 state 是用來反映一個組件的狀態，是可以改變的。因此，當組件所需要的數據在調用時是已經確定的，不頻繁發生變化的，就可以使用props來傳遞，相反，當組件所需要的數據在調用時不能確定，需要等待異步回調時才能確定，比如ajax請求數據，input的onchange事件，這時就需要使用state來記錄和改變這些值得變化。