ReactJS入門指南
本文旨在介紹ReactJS的基本知識，並一步步詳細介紹React的基本概念和使用方法等，以及相應的Demo。本文在很大程度上參考了React官方文檔和官方指南。如果你英語還不錯，大可直接去官網查看對應的英文文檔和指南，寫的非常不錯；但如果你的英語跟我一樣蹩腳或者不喜歡直接讀文檔，那么希望這篇文章能夠給你帶來幫助。如果你用React很久了，恰好你也看到這篇文章，歡迎指正錯誤！如果你不樂意看一大片文字，想直接看程序，那么直接戳這里！
1、React是什么？
React是由工作在Facebook的優秀程序員開發出來的用於開發用戶交互界面的JS庫。其源碼由Facebook和社區優秀的程序員維護，因此其背后有着非常強大的技術團隊給予技術支持。React帶來了很多新的東西，例如組件化、JSX、虛擬DOM等。其提供的虛擬DOM使得我們渲染組件呈現非常之快，讓我們從頻繁操作DOM的繁重工作之中解脫。了解React的人都知道，它做的工作更多偏重於MVC中的V層，結合其它如Flux等一起，你可以非常容易構建強大的應用。
React的官網，猛戳這里。
2、組件化
React的世界里，一切都是組件。你可以構建任何直接的HTML沒有的組件，例如下拉菜單、導航菜單等。同時，組件里也可以包含其它組件。每一個組件都有一個render方法，用於呈現該組件。同時，每一個組件都有屬於自己的scope，從而與其它的組件界定開來，用於構建屬於該組件的方法，以方便復用。
3、JSX
如果你看過React的代碼，你會非常容易發現JSX這個東東。很難一兩句話解釋清楚JSX是什么東西，但通俗的講JSX是基於JS的擴展，它允許你在JS里直接寫HTML的代碼，而不用像我們過去一樣要想在JS里寫HTML不得不拼接一大堆的字符串。例如：
1 var ExampleComponent = React.createClass({ 2 render: function () { 3 return ( 4 <div className="listMenu"> 5 Hello World! 6 </div> 7 ); 8 } 9 });
仔細觀察，你會發現這段JSX代碼里居然直接又<、>等這些在JS里是不允許如此直接寫的代碼。這就是JSX帶來的好處，它允許你在JS里使用你非常熟悉的HTML的標簽。另外，注意render里的className，因為class在JS里是保留字，所以這里用的是className，類似的還有label標簽的for等情況。
JSX給程序員帶來了非常大的方便，從上面的代碼你就可以有所窺見。但是，另外一些是它打破了我們通常熟悉的JS與HTML分離的想法，剛接觸JSX的程序員會覺得JSX這種寫法非常別扭。React同時提供了非JSX的寫法，如上面的程序用JS寫：
1 var ExampleComponent = React.createClass({ 2 render: function () { 3 return ( 4 React.createElement('div', {className: 'listMenu'}, 'Hello World!') 5 ); 6 } 7 });
這段代碼里沒有html的標簽，可能你看起來會覺得舒服些。但是，相信我，一旦你熟悉JSX，你會愛不釋手！
4、虛擬DOM
React之所以非常快，就是因為它提供了虛擬DOM的概念。其根本原理是因為React不直接操作DOM，我們都知道頻繁的操作DOM會非常影響性能和體驗。React將DOM結構儲存在內存中，與render方法的返回值進行比較，通過其自由的diff算法計算出不同的地方，然后反應到真實的DOM當中。也就是說，大多數情況我們渲染組件、更改組件狀態等都是操作的虛擬DOM，只有在有所改變的情況下，才會反應到真實的DOM當中。舉個例子就是，比方說你構建了一輛汽車，你給汽車進行了些改裝（重新換個發動機啥的），用React的話講就是，當你應用這些改裝的時候，React會運行一套獨特的diff算法計算出哪些做了改裝，然后去改裝這些東西。
5、下載安裝
很多人看到這里都會覺得，你說的文字描述糊里糊塗，你寫的代碼又跑不起來。在這里需要提醒大家的是，JSX的代碼是不能復制到控制台去執行的，在瀏覽器端運行JSX代碼需要進行一下轉換（正式開發環境下不建議在瀏覽器端轉換，影響性能）。當然，這層轉換也可以在服務器端進行，而且這也通常是我們推薦的方法。在這里，為了方便介紹，我們統一在瀏覽器端轉換。
下載地址：猛戳這里，當前版本是0.13.3。
安裝與使用，剛才我們有提到在瀏覽器端轉換JSX的代碼，因此你需要引入兩個文件，分別為react.js和JSXTransformer.js，然后上面寫過的代碼就可以工作了，就以上面的hello world代碼為例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="build/react.js"></script> 5 <script src="build/JSXTransformer.js"></script> 6 </head> 7 <body> 8 <div id="container"></div> 9 <script type="text/jsx"> 10 var ExampleComponent = React.createClass({ 11 render: function () { 12 return ( 13 <div className="navigation"> 14 Hello World! 15 </div> 16 ); 17 } 18 }); 19 20 React.render(<ExampleComponent />, document.getElementById("container")); 21 </script> 22 </body> 23 </html>
如果你喜歡用CDN，那么可以到這里去查看，猛戳這里。注意上面代碼里body底部的script標簽，我們使用的type為“text/jsx”，這是告訴React這是JSX代碼，碰到它JSXTransormer會對它進行一下轉換。
另外需要注意的是上面第20行代碼，React.render()方法，它將你構建的組件呈現到一個存在的DOM節點中。使用方法如上第20行，參數分別是你的組件和已存在的DOM節點。
6、初始呈現
當你需要將自己的組件呈現的時候，你需要調用React.render方法，該方法在上面已經介紹，在此不再贅述。
7、組件基礎
組件擁有state（狀態）和props（屬性）兩個非常重要的概念，這使得我們可以多次的復用組件，因為你每次傳遞的都不一樣。
屬性（props）：我們可以像寫HTML標簽一樣在呈現組件的時候傳遞一些屬性，但同時我們也不僅限於HTML的可用屬性。例如，上面的Hello world例子，我們可以傳遞屬性，如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="build/react.js"></script> 5 <script src="build/JSXTransformer.js"></script> 6 </head> 7 <body> 8 <div id="container"></div> 9 <script type="text/jsx"> 10 var ExampleComponent = React.createClass({ 11 render: function () { 12 return ( 13 <div className={this.props.config}> 14 Hello World,{this.props.name}! 15 </div> 16 ); 17 } 18 }); 19 20 React.render(<ExampleComponent config="listMenu" name="ZhaoSi"/>, document.getElementById("container")); 21 </script> 22 </body> 23 </html>
如上，我們在第20行呈現組件的時候，可以傳遞參數，例如我們傳遞了name和config，這樣我們可以在組件的定義（第13-15行）內通過this.props.XX使用這兩個屬性。非常靈活！
狀態（state）：上面我們提到過，需要用state的話我們必須提供一個初始的state，如果更改state，則需要調用this.setState()方法。其中初始state使用getInitialState()方法，它返回初始state對象。同樣使用我們的hello world例子，使用方法如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="build/react.js"></script> 5 <script src="build/JSXTransformer.js"></script> 6 </head> 7 <body> 8 <div id="container"></div> 9 <script type="text/jsx"> 10 var ExampleComponent = React.createClass({ 11 getInitialState: function () { 12 return { 13 name: "ZhaoSi" 14 }; 15 }, 16 render: function () { 17 return ( 18 <div className={this.props.config}> 19 Hello World,{this.state.name}! 20 </div> 21 ); 22 } 23 }); 24 25 React.render(<ExampleComponent config="listMenu"/>, document.getElementById("container")); 26 </script> 27 </body> 28 </html>
如上，我們在第11行定義了初始狀態的方法，即getInitialState，返回一個state對象，在組件的呈現render里我們可以使用this.state.XX來訪問state對象里的屬性。
注意：this.props.config和this.state.name一定要放置在花括號里。
8、組件的生命周期
每個組件都有自己的生命周期，因此提供了一些列的方法，你可以定義在組件的定義里。它們都會在生命周期的不同階段被調用，一個明顯的例子就是上面我們提到的getInitialState()方法，它在組件被創建的時候調用一次。其它各個方法如下：
componentWillMount:該方法在你調用組件並呈現組件的時候調用，執行一次，因此我們可以在這里發送一些http請求獲取我們想要的參數；
componentDidMount:該方法在你調用組件並呈現組件之后調用，執行一次；
shouldComponentUpdate: 根據該方法的返回值來決定是否需要重新渲染組件；
componentWillUnMount:在組件從頁面DOM中取消呈現的時候調用。
9、組件的方法
React同時也提供了一些組件的方法，用於在組件的構造過程中調用。
getDefaultProps:該方法使用與getInitialState一樣，不同的是它定義一些默認的props；
propTypes:定義了你可以傳遞的prop的類型，錯誤的傳遞React會報錯，具體類型可以猛戳這里，說白了就是對你傳遞的prop進行一個類型校驗；
mixins: 你也發現了React在構建組件的時候定義了很多函數，如果很多組件公用/復用相同的一些函數的話，你大可把它們都抽出來封裝為ExampleMixins，然后通過mixins:[ExampleMixins]傳遞進去。
10、結束語
看到這里，希望你能夠了解到React的一些基本概念和使用方法，下一篇文章中我們會繼續探索一下React的更進一步的例子。如果本文還算有所幫助，歡迎不吝點贊；如果有錯誤之處，也歡迎留言指正！
本文的代碼都可以在這里下載到，猛戳這里！