爲何選擇react

咱們知道，瀏覽器經過Http請求從各個異構服務器獲取到html文檔。會根據包含相關信息的請求頭和請求體，將其解析並構建成一個DOM樹。同時，根據文檔獲取到相關的css文檔，這些文檔裏面包含了許許多多的CSSOM。最後，這顆DOM樹和這些CSSOM會在瀏覽器內存中造成一個Render樹，瀏覽器就是根據這個Render樹渲染出咱們最後看到的頁面的。而這些過程都是發生在渲染引擎中的，這與負責執行動態邏輯的JavaScript引擎是相分離的。所以，爲了JS可以方便操做DOM結構，渲染引擎會暴露一些接口供JavaScript調用

問題就在這裏，雖然經過暴露的接口，JS能夠操做到DOM樹中的節點。可是性能其實不是很高，特別是對於一些複雜的網頁，添加刪除節點會致使DOM節點的更新，這個開銷是很大的。在以前，廣泛都是經過JQuery來和DOM進行交互：

 

圖片名稱

在網頁設計愈來愈豐富，邏輯交互愈來愈複雜的狀況下，頻繁地進行DOM操做組件逐漸成爲了性能的瓶頸。而以直接操做DOM的JQuery也再也不像以前那麼大一統。許許多多前端框架如雨後春筍般涌現，如AngularJS，React，Vue等。其中最火的當屬React，它提供了一套不一樣的，高效的方案來更新DOM。這種全新的解決方案就是「Virtual DOM」:

 

圖片名稱

如上圖所所示，React會在內存中根據DOM建立一個虛擬的DOM樹。基於React的開發並不直接操做DOM，而是經過操做這棵虛擬DOM進行的，每當數據變化的時候，React會從新構建整個DOM樹，而後將當前DOM樹和上個DOM樹進行對比，獲得DOM結構的區別，而後僅僅將須要變化的部分進行實際的瀏覽器DOM更新。既然最後仍是會經過React來進行對DOM的更新，那爲什麼還會有性能的提高呢？緣由在於React並不老是立刻對DOM樹所作的更改進行更新，換而言之，就是你在虛擬DOM樹上作的操做，不保證立刻會產生實際的效果，它只會在你須要產生DOM樹更新的時候進行更新。這樣的一個機制就使得React可以等到一個事件循環的結尾，將若干個由數據影響的節點合併在一塊兒，和實際DOM進行比較，只操做Diff部分，而不是像傳統的js那樣須要更新DOM操做，就更新DOM樹一次，於是能達到提升性能的目的。同時，在保證性能的同時，React經過組件化的抽象概念，讓開發者將不須要關注某個數據的變化該如何體如今DOM樹上，只須要關係某個數據更新時，頁面是如何Render的。

做者：wuqke 連接：https://www.jianshu.com/p/2a6146cdd19f 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。