1. 程式人生 > >React 入門教程(開發文件)

React 入門教程(開發文件)

React 起源於 Facebook 的內部專案,因為該公司對市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套,用來架設Instagram 的網站。做出來以後,發現這套東西很好用,就在2013年5月開源了。

由於 React的設計思想極其獨特,屬於革命性創新,效能出眾,程式碼邏輯卻非常簡單。所以,越來越多的人開始關注和使用,認為它可能是將來 Web 開發的主流工具。

React主要用於構建UI。你可以在React裡傳遞多種型別的引數,如宣告程式碼,幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變數、甚至是可互動的應用元件。

特點:

宣告式設計:React採用聲明範式,可以輕鬆描述應用。

高效:React通過對DOM的模擬,最大限度地減少與DOM的互動。

靈活:React可以與已知的庫或框架很好地配合。

關於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操作,這兩點都是公認的效能瓶頸。

更多精品課程:

阿里云云計算專業

阿里雲大資料專業

阿里云云安全專業