React為什麼會出現？ react出現的歷史背景介紹

本篇文章主要講述的是關於react誕生的原因，關於react為什麼會出現，react的歷史背景資料等，現在就讓我們一起來看這篇文章吧

React誕生的原因

React是Facebook開發的一款的JS函式庫，那Facebook為什麼要創造React？
Facebook認為MVC無法滿足他們的擴展需求，由於他們非常巨大的程式碼庫和龐大的組織，使得MVC很快變得複雜，每當需要添加一項新功能或特性時，系統的複雜就成級數的成長，致使程式碼變得脆弱而不可預測，結果導致他們的MVC正在瓦解。認為MVC不適合大規模的應用。當系統中有很多模型和相應的視圖時，其複雜度就會迅速擴大，非常難以理解和調試，特別是模型和視圖可能存在雙向資料流動。

解決這個問題需要“以某種方式組織程式碼，使其更加可預測”，這透過Flux和React已經完成

Flux是一個系統架構，用於推進應用中的資料單向流動。 React是一個JavaScript框架，用於建立“可預期的”和聲明式的”Web用戶介面”，它已經使Facebook更快地開發網頁應用程式。

主要來討論React方面的問題：
React用來解決什麼問題，官方網站上這樣說道：

We build React to solve one problem:building large applications with data that changes over time.

建構資料會隨著時間改變的大型應用，React主要有以下特點：

#1.簡單的表述任意時間點應用應該呈現的樣子，React就會自動管理UI介面更新當資料發生變化的時候
   2.當資料改變時，React其實只是更新了變化的一部分而已
   React是關於建構可重複使用元件的，實際上，使用React時，我們所做的更多的是建構元件。透過封裝，使得程式碼復用，測試以及關注點分離更加容易。

從React官方網站上，透過《Why did we build React?》了解到創建React文件的四個原因：
1.React不是一個MVC框架，React是一個建構可組合式使用者介面的函式庫。它鼓勵創建可重複使用的UI元件會隨著時間而改變的資料。
2.React不使用模板
傳統上，web應用UIs使用模板或html指令建構。這些範本規定一套完整的抽象化使你可以去建立你的UI
不同的是，React處理建立使用者介面透過將他們分解為元件。這意味著，React使用一個真正的，全功能的程式語言去渲染視圖。
3.響應式更新非常簡單
在一個傳統的JS應用程式中，需要考慮資料變化然後指示DOM做出變化，使其保持最新的。甚至AngularJS,提供一個聲明式介面經由指令和資料綁定請求一個關聯的函數去手動更新DOM節點。 （想看更多就到PHP中文網React參考手冊欄位中學習）

#React採用不同的方法，當元件第一次初始化時，render方法調用，為試圖生成一個輕量級的表現。透過這個表現，產生一個標籤字串，然後插入文件中。當資料變化時，render方法再次被呼叫。為了盡可能有效的完成更新，我們比較值錢呼叫的render回傳的值與新的值，然後產生一個最小的變更去應用DOM。

render回傳的資料既不是一個字串也不是一個DOM結點。它是一個輕量級的類型，描述DOM應該是什麼樣子的。

4.HTML5只是個開始
因為React有自己輕量級的文件表現，我們可以用它做一些很酷的事情
1.Facebook動態表格可以透過渲染取代HTML.
2.Instagram是一個'single page'網頁應用程式完全由React和Backbone.Router建構的。設計者可以像通常一樣使用JSX編寫React程式碼。
3.我建立內部的應用程式雛形運行React在一個web工作站上，使用React去驅動本地ios視圖通過一個Objective-C橋。
4.你可以運行React在伺服器上，方便SEO、效能、程式碼分享和專案靈活性。
5.事件在全部現代瀏覽器(包括IE8)下表現一致性還有符合標準化，並且自動使用事件委派。

React的主要原理

Virtual DOM和虛擬DOM
傳統的web應用程式中，操作DOM一般是直接更新操作的，但是我們知道DOM更新通常是比較昂貴的。而React為了盡可能減少對DOM的操作，提供了一種不同而有強大的方式來更新DOM，取代DOM直接操作。就是Virtual DOM,一個輕量級的虛擬DOM，就是React抽象化的一個對象，描述DOM應該是什麼樣子，應該如何呈現。透過 這個Virtual DOM去更新更真實的DOM，而這個Virtual DOM管理真實的DOM更新。
為什麼透過這多一層的Virtual DOM操作就能更快呢？這是因為React有個diff演算法，更新Virtual DOM並不保證馬上影響真實的DOM，React會等到事件循環結束，然後利用這個diff演算法，透過目前新的dom表述與之前的作比較，計算出最小的步驟更新真實的DOM。

React Diff

1.虛擬的DOM確保只對介面上真正改變的部分進行實際的DOM操作。
Web頁面是由DOM樹來構成的，當其中的某一部分發生變化時，其實就對應某個DOM節點發生了變化。在React中，建構UI介面的想法是由目前狀態決定介面。前後兩個狀態對應兩個介面，然後由react來比較兩個介面的差異。
Facebook的工程師，他們對於web介面做了兩個簡單的假設，使得Diff演算法複雜程度直接降到了O(n)
1.兩個相同組件產生類似的DOM結構，不同組件產生不同的DOM結構
2.對於同層次的一組子節點，他們可以透過唯一的id進行區分

在節點的同一位置前後輸出了不同類型的節點，React直接刪除前面的節點，然後建立並插入新的節點，刪除節點就會徹底銷毀該節點，如果該刪除的節點下有子節點，那麼這些子節點也會被完全刪除，它們也不會被使用者後面的比較

當React在同一個位置遇到不同的元件時，也是簡單的銷毀第一個元件，而把新建立的元件加上去。不同的組件一般會產生不一樣的DOM結構，與其浪費時間去比較它們的結構，他們的結構基本上是不會等價的，不如完全創建一個新的組件上去。

2.逐層次進行節點比較
在React中，樹的演算法很簡單，兩棵樹只會對同層次的節點進行比較。把之前的樹和修改過的樹進行節點同層次的比較，React對同一個父節點下所有的子節點做比較。當發現節點已經不存在了，就會把這個節點和它的子節點完善刪除掉，不會進行進一步的人比較，所以這樣只要遍歷一次樹，就可以完成DOM結構的比較。

React只會考慮同層節點位置的變換，對於不同層的節點，只有簡單的刪除和建立。當根節點發現子節點中的A不見了就會直接銷毀A；而當D發現自己多了一個子節點，就會創造A作為子節點。

為了維持穩定的結構會有助於效能的提升，我們可以透過CSS隱藏或顯示某個節點，而不是真正的移除或新增DOM節點。

相同類型的節點，演算法比較簡單，React會對其屬性進行重設而實現節點轉換。
例如：
renderA:

renderB:

虛擬DOM的style屬性稍微不同，其值並不是一個簡單的字串而必須是一個物件。

3.列表節點的比較：
React對於不在同一層的節點比較，即使它們完全相同，也會銷毀並重新創建，當它們在同一層的時候就要用到列表節點的Diff演算法，

如果不設定這個li 的key值，會造成清單在更新時候的效能問題。 React不能很有效率的去更新這個清單

Components 元件

在DOM樹上的節點稱為元素，在這裡則不同，Virtual DOM上稱為commponent。 Virtual DOM的節點就是一個完整抽象的元件，它是由commponents組成。

component 的使用在 React 裡極為重要, 因為 components 的存在讓計算 DOM diff 更有效率。

這篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是React為什麼會出現？ react出現的歷史背景介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！