首頁 web前端 js教程 什麼是react? react主要是做什麼的? (問答篇)

什麼是react? react主要是做什麼的? (問答篇)

Sep 11, 2018 pm 02:07 PM
react

本篇文章主要的向大家介紹了關於react的基礎認識,你敢說你對react認識很多嗎,沒有的話那就來看看這篇文章吧

#1、        Facebook為何要建造React?

Facebook的工程師在做大型專案時,由於他們非常巨大的程式碼庫和龐大的組織,使得MVC很快變得非常複雜,每當需要添加一項新的功能或特性時,系統的複雜度就成級數增長,致使程式碼變得脆弱和不可預測,結果導致他們的MVC正在土崩瓦解,所以Facebook認為MVC不適合大規模應用,當系統中有很多的模型和相應的視圖時,其複雜度就會迅速擴大,非常難以理解和調試,特別是模型和視圖間可能存在的雙向資料流。

基於上面的原因,Facebook認為MVC無法滿足他們的擴展需求,為了解決上述問題需要「以某種方式組織程式碼,使其更加可預測”,於是他們提出的Flux和React來實現。

2、        什麼是React?

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

React 是一個用於建立使用者介面的JavaScript 函式庫。 React主要用於建立UI,許多人認為 React 是 MVC 中的 V(視圖)。 React 擁有較高的效能,程式碼邏輯非常簡單,越來越多的人開始關注和使用它。

3、        React是解決什麼問題?

We built React to solve one problem: building large applications with data that changes over time.建構那些資料會隨時間改變的大型應用

4、React 特點

####################################### #######1.######聲明式設計####### −React######採用宣告範式,可以輕鬆描述應用。 ############2.######高效能###### −React######透過對######DOM######的模擬,最大限度地減少與######DOM######的交互作用。 ######

3.靈活 −React可以與已知的函式庫或框架很好地配合。

4.JSX − JSX#是# JavaScript語法的擴充。 React開發不一定使用# JSX,但我們建議使用它。

5.元件透過 React建構元件,使得程式碼更容易得到重複使用,能夠很好的應用在大專案的開發中。

6.單向回應的資料流# − React 實現了單向回應的資料流,從而減少了重複程式碼,這也是為什麼它比傳統資料綁定更簡單。

5、React主要的原理

傳統的web應用,操作DOM一般是直接更新操作的,但是我們知道DOM更新通常是比較昂貴的。而React為了盡可能減少對DOM的操作,提供了一種不同的而又強大的方式來更新DOM,取代直接的DOM操作。就是VirtualDOM,一個輕量級的虛擬的DOM,就是React抽像出來的一個對象,描述dom應該是什麼樣子的,應該如何呈現。透過這個Virtual DOM去更新真實的DOM,由這個Virtual DOM管理真實DOM的更新。 (想看更多就到PHP中文網React參考手冊欄位中學習)

為什麼透過這多一層的Virtual DOM操作就能更快呢?這是因為React有個diff演算法,更新VirtualDOM並不保證馬上影響真實的DOM,React會等到事件循環結束,然後利用這個diff演算法,透過目前新的dom表述與之前的作比較,計算出最小的步驟更新真實的DOM。

最明顯的一點好處就是React所謂的 dom diff ,能夠實現delta層級的dom更新。當有資料變動導致DOM變動時,React不是全域刷新,而是透過它內部的dom diff 演算法計算出不同點,然後以最小粒度進行更新。這也是React號稱性能好的原因

6、Components 元件

在DOM樹上的節點稱為元素,在這裡則不同,Virtual DOM上稱為commponent。 Virtual DOM的節點就是一個完整抽象的元件,它是由commponents組成。 component的使用在 React 裡極為重要, 因為 components 的存在讓計算 DOM diff 更有效率。

7、套用情況

#

國外應用的較多,facebook、Yahoo、Reddit等。在github可以看到一個清單Sites-Using-React:https://github.com/facebook/react/wiki/Sites-Using-React國內的話,查了查,貌似比較少,目前知道的有一個杭州大搜車。大多數技術要在國內應用起來一般是較慢的。

8、比較分析

#、其他一些js框架相比,例如Backbone、Angular等,React怎樣?

#1、React不是一個MVC框架,它是建構易於可重複呼叫的web元件,專注於UI, 也就是view圖層

2、其次React是單向的從資料到視圖的渲染,非雙向資料綁定

3、不直接操作DOM對象,而是透過虛擬DOM透過diff演算法以最小的步驟作用到真實的DOM。

4、不便於直接操作DOM,大多數時間只是對virtual DOM 進行程式設計

##9、和React Native的關係

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

這個專案本身也越滾越大,從最早的UI引擎變成了一整套前後端通吃的 Web App 解決方案。衍生的 React Native 項目,目標更是宏偉,希望用寫Web App 的方式去寫 Native App。如果能夠實現,整個網路產業都會被顛覆,因為同一組人只需要寫一次 UI ,就能同時運行在伺服器、瀏覽器和手機。

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

以上是什麼是react? react主要是做什麼的? (問答篇)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何利用React和WebSocket建立即時聊天應用 如何利用React和WebSocket建立即時聊天應用 Sep 26, 2023 pm 07:46 PM

如何利用React和WebSocket建立即時聊天應用程式引言:隨著網路的快速發展,即時通訊越來越受到人們的關注。即時聊天應用程式已成為現代社交和工作生活中不可或缺的一部分。本文將介紹如何利用React和WebSocket建立一個簡單的即時聊天應用,並提供具體的程式碼範例。一、技術準備在開始建立即時聊天應用之前,我們需要準備以下技術和工具:React:一個用於構建

React前後端分離指南:如何實作前後端的解耦與獨立部署 React前後端分離指南:如何實作前後端的解耦與獨立部署 Sep 28, 2023 am 10:48 AM

React前後端分離指南:如何實現前後端的解耦和獨立部署,需要具體程式碼範例在當今的Web開發環境中,前後端分離已經成為一種趨勢。透過將前端和後端程式碼分開,可以讓開發工作更加靈活、高效,並且方便進行團隊協作。本文將介紹如何使用React實現前後端分離,從而實現解耦和獨立部署的目標。首先,我們要先理解什麼是前後端分離。傳統的Web開發模式中,前端和後端是耦合在

如何利用React和Flask建構簡單易用的網路應用 如何利用React和Flask建構簡單易用的網路應用 Sep 27, 2023 am 11:09 AM

如何利用React和Flask建構簡單易用的網路應用引言:隨著網路的發展,網路應用的需求也越來越多樣化和複雜化。為了滿足使用者對於易用性和效能的要求,使用現代化的技術堆疊來建立網路應用變得越來越重要。 React和Flask是兩個在前端和後端開發中非常受歡迎的框架,它們可以很好的結合在一起,用來建立簡單易用的網路應用。本文將詳細介紹如何利用React和Flask

如何利用React和RabbitMQ建立可靠的訊息應用 如何利用React和RabbitMQ建立可靠的訊息應用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ建立可靠的訊息傳遞應用程式引言:現代化的應用程式需要支援可靠的訊息傳遞,以實現即時更新和資料同步等功能。 React是一種流行的JavaScript庫,用於建立使用者介面,而RabbitMQ是一種可靠的訊息傳遞中間件。本文將介紹如何結合React和RabbitMQ建立可靠的訊息傳遞應用,並提供具體的程式碼範例。 RabbitMQ概述:

React響應式設計指南:如何實現自適應的前端佈局效果 React響應式設計指南:如何實現自適應的前端佈局效果 Sep 26, 2023 am 11:34 AM

React響應式設計指南:如何實現自適應的前端佈局效果隨著行動裝置的普及和使用者對多螢幕體驗的需求增加,響應式設計成為了現代前端開發的重要考量之一。而React作為目前最受歡迎的前端框架之一,提供了豐富的工具和元件,能夠幫助開發人員實現自適應的佈局效果。本文將分享一些關於使用React實現響應式設計的指南和技巧,並提供具體的程式碼範例供參考。使用React的Fle

React程式碼偵錯指南:如何快速定位與解決前端bug React程式碼偵錯指南:如何快速定位與解決前端bug Sep 26, 2023 pm 02:25 PM

React程式碼偵錯指南:如何快速定位並解決前端bug引言:在開發React應用程式時,經常會遇到各種各樣的bug,這些bug可能會使應用程式崩潰或導致不正確的行為。因此,掌握調試技巧是每個React開發者必備的能力。本文將介紹一些定位和解決前端bug的實用技巧,並提供具體的程式碼範例,幫助讀者快速定位和解決React應用程式中的bug。一、調試工具的選擇:在Re

React Router使用指南:如何實現前端路由控制 React Router使用指南:如何實現前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南:如何實現前端路由控制隨著單頁應用的流行,前端路由成為了一個不可忽視的重要部分。 ReactRouter作為React生態系統中最受歡迎的路由庫,提供了豐富的功能和易用的API,使得前端路由的實作變得非常簡單和靈活。本文將介紹ReactRouter的使用方法,並提供一些具體的程式碼範例。安裝ReactRouter首先,我們需要

如何利用React和Google BigQuery建立快速的資料分析應用 如何利用React和Google BigQuery建立快速的資料分析應用 Sep 26, 2023 pm 06:12 PM

如何利用React和GoogleBigQuery建立快速的資料分析應用引言:在當今資訊爆炸的時代,資料分析已經成為了各產業中不可或缺的環節。而其中,建構快速、有效率的資料分析應用則成為了許多企業和個人追求的目標。本文將介紹如何利用React和GoogleBigQuery結合來建立快速的資料分析應用,並提供詳細的程式碼範例。一、概述React是用來構建

See all articles