前端框架React Js入門教程【精】

如今最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS，ReactJs的虛擬DOM（Virtual DOM）和組件化的開發深深的吸引了我，下面來跟我一塊兒領略
ReactJS的風采吧~~ 章有點長，耐心讀完，你會有很大收穫哦~

1、ReactJS簡介

React 起源於 Facebook 的內部項目，由於該公司對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套，用來架設 Instagram 的網站。作出來之後，發現這套東西很好用，就在2013年5月開源了。因爲 React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。因此，愈來愈多的人開始關注和使用，認爲它多是未來 Web 開發的主流工具。

ReactJS官網地址：http://facebook.github.io/react/

Github地址：https://github.com/facebook/react

2、對ReactJS的認識及ReactJS的優勢

首先，對於React，有一些認識誤區，這裏先總結一下：

• React不是一個完整的MVC框架，最多能夠認爲是MVC中的V（View），甚至React並不很是承認MVC開發模式；

• React的服務器端Render能力只能算是一個錦上添花的功能，並非其核心出發點，事實上React官方站點幾乎沒有說起其在服務器端的應用；

• 有人拿React和Web Component相提並論，但二者並非徹底的競爭關係，你徹底能夠用React去開發一個真正的Web Component；

• React不是一個新的模板語言，JSX只是一個表象，沒有JSX的React也能工做。

一、ReactJS的背景和原理

在Web開發中，咱們總須要將變化的數據實時反應到UI上，這時就須要對DOM進行操做。而複雜或頻繁的DOM操做一般是性能瓶頸產生的緣由（如何進行高性能的複雜DOM操做一般是衡量一個前端開發人員技能的重要指標）。React爲此引入了虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現了一套DOM API。基於React進行開發時全部的DOM構造都是經過虛擬DOM進行，每當數據變化時，React都會從新構建整個DOM樹，而後React將當前整個DOM樹和上一次的DOM樹進行對比，獲得DOM結構的區別，而後僅僅將須要變化的部分進行實際的瀏覽器DOM更新。並且React可以批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合併，例如你連續的先將節點內容從A變成B，而後又從B變成A，React會認爲UI不發生任何變化，而若是經過手動控制，這種邏輯一般是極其複雜的。儘管每一次都須要構造完整的虛擬DOM樹，可是由於虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操做的僅僅是Diff部分，於是能達到提升性能的目的。這樣，在保證性能的同時，開發者將再也不須要關注某個數據的變化如何更新到一個或多個具體的DOM元素，而只須要關心在任意一個數據狀態下，整個界面是如何Render的。

若是你像在90年代那樣寫過服務器端Render的純Web頁面那麼應該知道，服務器端所要作的就是根據數據Render出HTML送到瀏覽器端。若是這時由於用戶的一個點擊須要改變某個狀態文字，那麼也是經過刷新整個頁面來完成的。服務器端並不須要知道是哪一小段HTML發生了變化，而只須要根據數據刷新整個頁面。換句話說，任何UI的變化都是經過總體刷新來完成的。而React將這種開發模式以高性能的方式帶到了前端，每作一點界面的更新，你均可以認爲刷新了整個頁面。至於如何進行局部更新以保證性能，則是React框架要完成的事情。

借用Facebook介紹React的視頻中聊天應用的例子，當一條新的消息過來時，傳統開發的思路如上圖，你的開發過程須要知道哪條數據過來了，如何將新的DOM結點添加到當前DOM樹上；而基於React的開發思路以下圖，你永遠只須要關心數據總體，兩次數據之間的UI如何變化，則徹底交給框架去作。能夠看到，使用React大大下降了邏輯複雜性，意味着開發難度下降，可能產生Bug的機會也更少。

二、組件化

虛擬DOM(virtual-dom)不只帶來了簡單的UI開發邏輯，同時也帶來了組件化開發的思想，所謂組件，即封裝起來的具備獨立功能的UI部件。React推薦以組件的方式去從新思考UI構成，將UI上每個功能相對獨立的模塊定義成組件，而後將小的組件經過組合或者嵌套的方式構成大的組件，最終完成總體UI的構建。例如，Facebook的instagram.com整站都採用了React來開發，整個頁面就是一個大的組件，其中包含了嵌套的大量其它組件，你們有興趣能夠看下它背後的代碼。

若是說MVC的思想讓你作到視圖-數據-控制器的分離，那麼組件化的思考方式則是帶來了UI功能模塊之間的分離。咱們經過一個典型的Blog評論界面來看MVC和組件化開發思路的區別。

對於MVC開發模式來講，開發者將三者定義成不一樣的類，實現了表現，數據，控制的分離。開發者更多的是從技術的角度來對UI進行拆分，實現鬆耦合。

對於React而言，則徹底是一個新的思路，開發者從功能的角度出發，將UI分紅不一樣的組件，每一個組件都獨立封裝。

在React中，你按照界面模塊天然劃分的方式來組織和編寫你的代碼，對於評論界面而言，整個UI是一個經過小組件構成的大組件，每一個組件只關心本身部分的邏輯，彼此獨立。

React認爲一個組件應該具備以下特徵：

（1）可組合（Composeable）：一個組件易於和其它組件一塊兒使用，或者嵌套在另外一個組件內部。若是一個組件內部建立了另外一個組件，那麼說父組件擁有（own）它建立的子組件，經過這個特性，一個複雜的UI能夠拆分紅多個簡單的UI組件；

（2）可重用（Reusable）：每一個組件都是具備獨立功能的，它能夠被使用在多個UI場景；

（3）可維護（Maintainable）：每一個小的組件僅僅包含自身的邏輯，更容易被理解和維護；

3、下載ReactJS，編寫Hello，world

ReactJs下載很是簡單，爲了方便你們下載，這裏再一次給出下載地址（連接）,下載完成後，我麼看到的是一個壓縮包。解壓後，咱們新建一個html文件，引用react.js和JSXTransformer.js這兩個js文件。html模板以下(js路徑改爲本身的):

這裏你們可能會奇怪，爲何script的type是text/jsx,這是由於 React 獨有的 JSX 語法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/jsx" 。 其次，React 提供兩個庫： react.js 和 JSXTransformer.js ，它們必須首先加載。其中，JSXTransformer.js 的做用是將 JSX 語法轉爲 JavaScript 語法。這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。

到這裏咱們就能夠開始編寫代碼了，首先咱們先來認識一下ReactJs裏面的React.render方法：

React.render 是 React 的最基本方法，用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點。

下面咱們在script標籤裏面編寫代碼，來輸出Hello，world，代碼以下：

這裏須要注意的是，react並不依賴jQuery，固然咱們可使用jQuery，可是render裏面第二個參數必須使用JavaScript原生的getElementByID方法，不能使用jQuery來選取DOM節點。

而後，在瀏覽器打開這個頁面，就能夠看到瀏覽器顯示一個大大的Hello，world,由於咱們用了

標籤。

 

到這裏，恭喜，你已經步入了ReactJS的大門~~下面，讓咱們來進一步學習ReactJs吧~~

4、Jsx語法

HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它容許 HTML 與 JavaScript 的混寫，瞭解過AngularJs的看到下面的代碼必定會感受很熟悉的，咱們來看代碼：

這裏咱們聲明瞭一個names數組，而後遍歷在前面加上Hello,輸出到DOM中，輸出結果以下：

JSX 容許直接在模板插入 JavaScript 變量。若是這個變量是一個數組，則會展開這個數組的全部成員，代碼以下：

顯示結果以下：

這裏的星號只是作標識用的，你們不要被迷惑了~~

你看到這裏，說明你對React仍是蠻感興趣的，恭喜你，堅持下來了，那麼下面，咱們開始學習React裏面的"真功夫"了~~ Are　you ready?

5、ReactJS組件

一、組件屬性

前面說了，ReactJS是基於組件化的開發，下面咱們開始來學習ReactJS裏面的組件，React 容許將代碼封裝成組件（component），而後像插入普通 HTML 標籤同樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類。

下面，咱們來編寫第一個組件Greet，有一個name屬性，而後輸出hello + name的值，代碼以下：

看到這段代碼，接觸過AngularJS的朋友們是否是有一種熟悉的感受，不過這裏有幾點須要注意：

1）獲取屬性的值用的是this.props.屬性名

2）建立的組件名稱首字母必須大寫。

3）爲元素添加css的class時，要用className。

4）組件的style屬性的設置方式也值得注意，要寫成style={{width: this.state.witdh}}。

二、組件狀態

組件免不了要與用戶互動，React 的一大創新，就是將組件當作是一個狀態機，一開始有一個初始狀態，而後用戶互動，致使狀態變化，從而觸發從新渲染 UI 。下面咱們來編寫一個小例子，一個文本框和一個button，經過點擊button能夠改變文本框的編輯狀態，禁止編輯和容許編輯。經過這個例子來理解ReactJS的狀態機制。先看代碼：

這裏，咱們又使用到了一個方法getInitialState,這個函數在組件初始化的時候執行，必需返回NULL或者一個對象。這裏咱們能夠經過this.state.屬性名來訪問屬性值，這裏咱們將enable這個值跟input的disabled綁定，當要修改這個屬性值時，要使用setState方法。咱們聲明handleClick方法，來綁定到button上面，實現改變state.enable的值。效果以下：

原理分析：

當用戶點擊組件，致使狀態變化，this.setState 方法就修改狀態值，每次修改之後，自動調用 this.render 方法，再次渲染組件。

這裏值得注意的幾點以下：

1）getInitialState函數必須有返回值，能夠是NULL或者一個對象。

2）訪問state的方法是this.state.屬性名。

3）變量用{}包裹，不須要再加雙引號。

三、組件的生命週期

組件的生命週期分紅三個狀態：

• 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)：組件判斷是否從新渲染時調用

下面來看一個例子：

上面代碼在hello組件加載之後，經過 componentDidMount 方法設置一個定時器，每隔100毫秒，就從新設置組件的透明度，從而引起從新渲染。

四、組件的嵌套

React是基於組件化的開發，那麼組件化開發最大的優勢是什麼？毫無疑問，固然是複用，下面咱們來看看React中究竟是如何實現組件的複用的，這裏咱們還寫一個例子來講吧，代碼以下：

這裏咱們建立了一個Search組件，而後又建立了一個Page組件，而後咱們在Page組件中調用Search組件，而且調用了兩次，這裏咱們經過屬性searchType傳入值，最終顯示結果如圖：

6、ReactJS小結

關於ReactJS今天就先學習到這裏了，下面來總結一下，主要有如下幾點：

一、ReactJs是基於組件化的開發，因此最終你的頁面應該是由若干個小組件組成的大組件。

二、能夠經過屬性，將值傳遞到組件內部，同理也能夠經過屬性將內部的結果傳遞到父級組件(留給你們研究)；要對某些值的變化作DOM操做的，要把這些值放到state中。

三、爲組件添加外部css樣式時，類名應該寫成className而不是class;添加內部樣式時，應該是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

四、組件名稱首字母必須大寫。

五、變量名用{}包裹，且不能加雙引號。

7、參考資料

React中文文檔 

React入門實例教程

顛覆式前端UI開發框架：React