React是什麼,爲何要使用它?

  React是Facrbook內部的一個JavaScript類庫,已於1年開源,可用於建立Web用戶交互界面。它引入了一種新的方式來處理瀏覽器DOM。那些須要手動更新DOM、費力地記錄每個狀態的日子一去不復返了——這種老舅的方式既不具有擴展性,又很難加入新的功能,就算能夠,也是有着冒着很大的風險。React使用很新穎的方式解決了這些問題。你只須要聲明地定義各個時間點的用戶界面,而無序關係在數據變化時,須要更新哪一部分DOM。在任什麼時候間點,React都能以最小的DOM修改來更新整個應用程序。react

  React引入了一些激動人心的新概念,向現有的一些最佳實踐發起了挑戰。學習這些概念,將幫助你理解它們的優點,建立具有高擴展性的單頁面應用(SPA)。React把主要的注意力放在了應用的「視圖」部分,沒有限定與服務端交互和代碼組織的方式。web

背景介紹:算法

  在web應用開發的早期,構建Web應用的惟一方案就是向服務器發送請求,而後服務端響應請求而且返回一個完整的頁面。從開發的角度上講這種方法很是簡單,由於開發者無須關心在瀏覽器端發生了什麼。瀏覽器

  像PHP這種語言,更加簡化了這種開發方式。使用PHP開發功能組件也很容易,這有助於開發者重用代碼,掌握應用程序的行爲。開發的簡單性使得PHP成爲了一門很是流行的Web應用開發語言。服務器

  不過,使用這種開發方式很難打造出極佳的用戶體驗。由於不管每次用戶想要作點什麼,都須要向服務端發送請求並等待服務端的響應,這會致使用戶失去在頁面上所積累的狀態。框架

  爲了實現更好的用戶體驗,人們開始開發類庫,使用JavaScript在瀏覽器端渲染應用。這些類庫使用的方法也不盡相同簡單的會使用帶參數的模板,複雜的就徹底掌握整個應用。隨着開發者在愈來愈大的應用中使用這些類庫,應用也變得愈來愈難於把握,由於這些應用是一系列互相做用的事件的結果。與PHP那樣傳統的應用開發方式比起來,這種客戶端應用很難作好。函數

  React發源自Facebook的PHP框架XHP的一個分支。XHP做爲一個PHP框架,旨在每次有請求進來時渲染整個頁面。react的產生就是爲了把這種從新渲染整個頁面的PHP式工做流帶到客戶端應用中來。性能

  React本質上只關心兩件事:學習

    1.更新DOM;spa

    2.響應事件。

  React不處理Ajax、路由和數據存儲,也不規定數據組織的方式。它不是一個Model-View-Controller框架。若是非要問它是什麼,他就是MVC裏的「V」。React的精簡容許你將它集成到各類各樣的系統中 。

  每次狀態改變時,使用JavaScript從新渲染整個頁面會很是慢,這應該歸咎於讀取和更新DOM的性能問題。React運用一個虛擬的DOM實現了一個很是強大的渲染系統,在React中對DOM只更新不讀取。

工做狀態:

  React以渲染函數爲基礎。這些函數讀入當前的狀態,將其轉換爲目標頁面上的一個虛擬表現。只要React被告知狀態有變化,他就會從新運行這些函數,計算出頁面的一個新的虛擬表現,接着自動把結果轉換成必要的DOM更新來反映新的表現。

  這種方式看上去應該比一般的JavaScript方案——按須要更新每個元素——要慢,可是React確實是這麼作的:它使用了很是高效的算法,計算出虛擬頁面當前版本和新版間的差別,基於這些差別對DOM進行必要的最少更新。React贏就贏在了最小化了重繪,而且避免了沒必要要的DOM操做,這兩點都是公認的性能瓶頸。

相關文章
相關標籤/搜索