react可以用來做什么-創(chuàng)新互聯

這篇文章將為大家詳細講解有關react可以用來做什么,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

肇慶網站建設公司創(chuàng)新互聯公司,肇慶網站設計制作,有大型網站制作公司豐富經驗。已為肇慶上千余家提供企業(yè)網站建設服務。企業(yè)網站搭建\成都外貿網站制作要多少錢,請找那個售后服務好的肇慶做網站的公司定做!

react是一個用于構建用戶界面的JAVASCRIPT庫;React負責UI層面的展現;React中的數據流是沿著組件樹從上到下單向流動的;React擁有較高的性能,代碼邏輯非常簡單。

怎么理解react?

隨著Facebook開源了React Native for Android,React的前景似乎更加光明。它從最早的UI框架慢慢演變成了一套web應用的解決方案,并且它衍生出來的React Native更是承載著宏偉的目標:learn once, write anywhere。這對前端來說似乎是種不可抗拒的吸引力。

React有三個關鍵詞:

- Just the ui

- virtual dom

- data flow

要理解React,我從它的這三個關鍵詞入手。

2.1 Just the ui

React 負責UI層面的展現,盡管很多人用React作[MVC]架構中的View層,但這并不是React的本意。

一般的情況下,我們在開發(fā)過程中,通常會使用模板或者直接使用HTML來構建UI,而HTML是靜態(tài)的,使用模板在大多數情況下是可以滿足需求的,但是在復雜的邏輯情境中就顯得有些吃力了,過多的if else或者邏輯控制在模板里,都會讓代碼變得難以維護,當然這還是說整個項目中使用統(tǒng)一的模板的情況下。

React換了一種思路解決問題,它把UI拆分成組件,而不是通過模板引擎和展示邏輯,使得它可以易于拓展和維護。因此它引入了JSX這種語法規(guī)則,可以讓我們使用類似HTML的語法去寫js的函數調用。

2.2 virtual dom

瀏覽器渲染頁面的一般過程通常是這樣的:

加載html->生成DOM樹->解析css生成Render樹->生成頁面

那么React的virtual dom是怎么做的呢?

生成virtual dom->diff->必要的DOM更新

在這里面大部分的操作放在js中去完成,因為我們都知道dom操作是很昂貴的。所以在一般的情況下React的性能還是很不錯的。

2.3 data flow

React中的數據流是沿著組件樹從上到下單向流動的。

這里的data flow指的是一種應用架構的實現方式,比如說,數據存放在哪里,在哪里觸發(fā)事件,如何響應用戶操作。它不是React提供的什么新功能,應該是React構建應用的實踐。我們理解了之后的Flux或許就更加容易理解data flow這個概念了。

2.4 Flux overview

Flux是facebook配套React強推的一種應用架構思想。它利用數據的單向流動為React的可復用的視圖組件提供了補充。

與React的數據流動方式相同,在Flux架構中,數據也是單向流動的:

react可以用來做什么

簡單的說,所有的數據流動都會經過Dispatcher。Action可以通過action creator產生并被提供給dispatcher,但多數情況下action是通過用戶與views的交互產生。

在View層捕獲用戶的交互,產生一個Action,通過觸發(fā)注冊在Dispatcher上面的事件回調,使得相關的Store響應Action,然后會觸發(fā)到Store上面的onChange事件,進一步的更新View。

數據流動也始終是如上圖所示的單向流動的。

關于“react可以用來做什么”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

本文標題:react可以用來做什么-創(chuàng)新互聯
轉載注明:http://muchs.cn/article10/dsisdo.html

成都網站建設公司_創(chuàng)新互聯,為您提供微信小程序、手機網站建設云服務器、關鍵詞優(yōu)化、品牌網站建設、全網營銷推廣

廣告

聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯

成都seo排名網站優(yōu)化