web前端開發——react入門

標籤：元素   建立   技能   應用   js對象   聊天   instagram   部分   傳統   

一、ReactJS簡介

React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 架構，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。
做出來以後，發現這套東西很好用，就在2013年5月開源了。
由於 React 的設計思想極其獨特，屬於革命性創新，效能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。
React是MVC中的V層，是視圖層面的一個架構。
React是建立虛擬dom（virtual dom），這個dom是不真正頁面中dom元素，操作一個虛擬dom需要的效能要原小於操作一個真實的dom需要的效能
（實質上是一個js對象，用jsObject Storage Servicedom上的資訊，因此比真實的dom小得多，因為他只記錄一些必要資訊）
在前端開發一個web應用與開發一個網站不同，web應用通常是一個單頁面的，因此每次做一些互動會涉及dom的操作，因此無節制的操作dom嚴重影響了頁面的新能。
如果我們只操作這些虛擬dom（此時會很好降低對效能的消耗），在必要的時候將這些需要改變視圖渲染到頁面中會最佳化這些效能問題
ReactJS官網地址：
http://facebook.github.io/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的構建。
MVC的思想讓你做到視圖-資料-控制器的分離，那麼組件化的思考方式則是帶來了UI功能模組之間的分離。
React認為一個組件應該具有如下特徵：
（1）可組合（Composeable）：一個組件易於和其它組件一起使用，或者嵌套在另一個組件內部。如果一個組件內部建立了另一個組件，那麼說父組件擁有（own）它建立的子組件，通過這個特性，一個複雜的UI可以拆分成多個簡單的UI組件；
（2）可重用（Reusable）：每個組件都是具有獨立功能的，它可以被使用在多個UI情境；
（3）可維護（Maintainable）：每個小的組件僅僅包含自身的邏輯，更容易被理解和維護；

web前端開發——react入門