React 入門教程(開發文件)
React 起源於 Facebook 的內部專案,因為該公司對市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套,用來架設Instagram 的網站。做出來以後,發現這套東西很好用,就在2013年5月開源了。
由於 React的設計思想極其獨特,屬於革命性創新,效能出眾,程式碼邏輯卻非常簡單。所以,越來越多的人開始關注和使用,認為它可能是將來 Web 開發的主流工具。
React主要用於構建UI。你可以在React裡傳遞多種型別的引數,如宣告程式碼,幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變數、甚至是可互動的應用元件。
特點:
宣告式設計:React採用聲明範式,可以輕鬆描述應用。
高效:React通過對DOM的模擬,最大限度地減少與DOM的互動。
靈活:React可以與已知的庫或框架很好地配合。
關於React 入門教程的詳細資訊:
背景介紹:
在web應用開發的早期,構建Web應用的唯一方案就是向伺服器傳送請求,然後服務端響應請求並且返回一個完整的頁面。從開發的角度上講這種方法非常簡單,因為開發者無須關心在瀏覽器端發生了什麼。
像PHP這種語言,更加簡化了這種開發方式。使用PHP開發功能元件也很容易,這有助於開發者重用程式碼,掌握應用程式的行為。開發的簡單性使得PHP成為了一門非常流行的Web應用開發語言。
不過,使用這種開發方式很難打造出極佳的使用者體驗。因為無論每次使用者想要做點什麼,都需要向服務端傳送請求並等待服務端的響應,這會導致使用者失去在頁面上所積累的狀態。
為了實現更好的使用者體驗,人們開始開發類庫,使用JavaScript在瀏覽器端渲染應用。這些類庫使用的方法也不盡相同簡單的會使用帶引數的模板,複雜的就完全掌握整個應用。隨著開發者在越來越大的應用中使用這些類庫,應用也變得越來越難於把握,因為這些應用是一系列互相作用的事件的結果。與PHP那樣傳統的應用開發方式比起來,這種客戶端應用很難做好。
React發源自Facebook的PHP框架XHP的一個分支。XHP作為一個PHP框架,旨在每次有請求進來時渲染整個頁面。react的產生就是為了把這種重新渲染整個頁面的PHP式工作流帶到客戶端應用中來。
React本質上只關心兩件事:
1.更新DOM;
2.響應事件。
React不處理Ajax、路由和資料儲存,也不規定資料組織的方式。它不是一個Model-View-Controller框架。如果非要問它是什麼,他就是MVC裡的“V”。React的精簡允許你將它整合到各種各樣的系統中 。
每次狀態改變時,使用JavaScript重新渲染整個頁面會非常慢,這應該歸咎於讀取和更新DOM的效能問題。React運用一個虛擬的DOM實現了一個非常強大的渲染系統,在React中對DOM只更新不讀取。
工作狀態:
React以渲染函式為基礎。這些函式讀入當前的狀態,將其轉換為目標頁面上的一個虛擬表現。只要React被告知狀態有變化,他就會重新執行這些函式,計算出頁面的一個新的虛擬表現,接著自動把結果轉換成必要的DOM更新來反映新的表現。
這種方式看上去應該比通常的JavaScript方案——按需要更新每一個元素——要慢,但是React確實是這麼做的:它使用了非常高效的演算法,計算出虛擬頁面當前版本和新版間的差異,基於這些差異對DOM進行必要的最少更新。React贏就贏在了最小化了重繪,並且避免了不必要的DOM操作,這兩點都是公認的效能瓶頸。
更多精品課程: