React筆記_(1)_react概述

標籤：核心   通過   部分   前端   處理   特性   記憶體資料   原因   angularjs   

React概述

 

React是一種很好的前端技術。

它將應用打散成獨立的小模組，然後進行組裝，完成開發。

react遠比angularjs難學的多。

react依賴的如webpack等各種工具得先學會使用，然後還重點瞭解和使用es6，然後才能進入其核心。

 

關於react的更多內容請參照以下內容和react的官方文檔。

 

React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 架構，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。由於 React 的設計思想極其獨特，屬於革命性創新，效能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。

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

Github地址：https://github.com/facebook/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分為web版和native版兩塊，前者好學，後者涉及到用戶端打包和調用資源等一些技術，所以還有額外的學習成本。
不過，這個終究是個好東西，而且已經是前端領域的標配。

很多公司原生移動開發也開始使用react native，因為使用它開發快，複用性高，而且做出來的東西跟原生差距較小， 節省了好多的人力物力成本，從而受到企業主們的青睞。
對於react的介紹我再說一點，就是react不直接與html的dom打交道，而是使用虛擬dom。html跟虛擬dom差距不大，但在執行效率方面相差甚遠，所以我們要高效迅速渲染出頁面就要使用這種虛擬dom技術，這個也是迷人的關鍵特性之一。

React筆記_(1)_react概述