ReactJS入門指南

時間 2019-11-08

標籤 reactjs 入門指南简体版

原文原文鏈接

ReactJS入門指南html

　　本文旨在介紹ReactJS的基本知識，並一步步詳細介紹React的基本概念和使用方法等，以及相應的Demo。本文在很大程度上參考了React官方文檔和官方指南。若是你英語還不錯，大可直接去官網查看對應的英文文檔和指南，寫的很是不錯；但若是你的英語跟我同樣蹩腳或者不喜歡直接讀文檔，那麼但願這篇文章可以給你帶來幫助。若是你用React好久了，剛好你也看到這篇文章，歡迎指正錯誤！若是你不樂意看一大片文字，想直接看程序，那麼直接戳這裏！react

　　一、React是什麼？git

　　React是由工做在Facebook的優秀程序員開發出來的用於開發用戶交互界面的JS庫。其源碼由Facebook和社區優秀的程序員維護，所以其背後有着很是強大的技術團隊給予技術支持。React帶來了不少新的東西，例如組件化、JSX、虛擬DOM等。其提供的虛擬DOM使得咱們渲染組件呈現很是之快，讓咱們從頻繁操做DOM的繁重工做之中解脫。瞭解React的人都知道，它作的工做更多偏重於MVC中的V層，結合其它如Flux等一塊兒，你能夠很是容易構建強大的應用。程序員

　　React的官網，猛戳這裏。github

　　二、組件化算法

　　React的世界裏，一切都是組件。你能夠構建任何直接的HTML沒有的組件，例以下拉菜單、導航菜單等。同時，組件裏也能夠包含其它組件。每個組件都有一個render方法，用於呈現該組件。同時，每個組件都有屬於本身的scope，從而與其它的組件界定開來，用於構建屬於該組件的方法，以方便複用。瀏覽器

　　三、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，你會愛不釋手！

　　四、虛擬DOM

　　React之因此很是快，就是由於它提供了虛擬DOM的概念。其根本原理是由於React不直接操做DOM，咱們都知道頻繁的操做DOM會很是影響性能和體驗。React將DOM結構儲存在內存中，與render方法的返回值進行比較，經過其自由的diff算法計算出不一樣的地方，而後反應到真實的DOM當中。也就是說，大多數狀況咱們渲染組件、更改組件狀態等都是操做的虛擬DOM，只有在有所改變的狀況下，纔會反應到真實的DOM當中。舉個例子就是，比方說你構建了一輛汽車，你給汽車進行了些改裝（從新換個發動機啥的），用React的話講就是，當你應用這些改裝的時候，React會運行一套獨特的diff算法計算出哪些作了改裝，而後去改裝這些東西。

　　五、下載安裝

　　不少人看到這裏都會以爲，你說的文字描述糊里糊塗，你寫的代碼又跑不起來。在這裏須要提醒你們的是，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節點。

　　六、初始呈現

　　當你須要將本身的組件呈現的時候，你須要調用React.render方法，該方法在上面已經介紹，在此再也不贅述。

　　七、組件基礎

　　組件擁有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>