這篇文章主要介紹了react框架的特點和優(yōu)勢是什么的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇react框架的特點和優(yōu)勢是什么文章都會有所收獲,下面我們一起來看看吧。
費縣網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),費縣網(wǎng)站設(shè)計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為費縣上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢,請找那個售后服務(wù)好的費縣做網(wǎng)站的公司定做!
react框架是2013年出來的;React起源于Facebook的內(nèi)部項目,于2013年5月開源。React是用于構(gòu)建用戶界面的JavaScript庫,主要用于構(gòu)建UI;用戶可以在React里傳遞多種類型的參數(shù),如聲明代碼,幫助你渲染出UI、也可以是靜態(tài)的HTML DOM元素、也可以傳遞動態(tài)變量、甚至是可交互的應(yīng)用組件。
一、React的起源和發(fā)展
React是用于構(gòu)建用戶界面的JavaScript庫, 起源于Facebook的內(nèi)部項目,因為該公司對市場上所有 JavaScript MVC框架,都不滿意,就決定自己寫一套,用來架設(shè)Instagram的網(wǎng)站。做出來以后,發(fā)現(xiàn)這套東西很好用,就在2013年5月開源了。
二、React的出發(fā)點
基于HTML的前端界面開發(fā)正變得越來越復(fù)雜,其本質(zhì)問題基本都可以歸結(jié)于如何將來自于服務(wù)器端或者用戶輸入的動態(tài)數(shù)據(jù)高效的反映到復(fù)雜的用戶界面上。而來自Fackbook的React框架正是完全面向此問題的一個解決方案,按官網(wǎng)描述,其出發(fā)點為:用于開發(fā)數(shù)據(jù)不斷變化的大型應(yīng)用程序(Building large applications with data that changes over time)。相比傳統(tǒng)型的前端開發(fā),React開辟了一個相當(dāng)于相當(dāng)另類的途徑,實現(xiàn)了前端界面的高性能高效率開發(fā)。
React主要用于構(gòu)建UI。你可以在React里傳遞多種類型的參數(shù),如聲明代碼,幫助你渲染出UI、也可以是靜態(tài)的HTML DOM元素、也可以傳遞動態(tài)變量、甚至是可交互的應(yīng)用組件。
三、Recat與傳統(tǒng)MVC的關(guān)系
輕量級的視圖層庫! A JavaScript library for building user interfaces
React不是一個完整的MVC框架,最多可以認為是MVC中的(view)層,甚至React并不非常認可MVC開發(fā)模式;React構(gòu)建頁面UI的庫??梢院唵蔚乩斫鉃?,React將界面分成了各個獨立的小塊,每一個塊就是組件,這些組件之間可以組合、嵌套、就成了我們的頁面
四、React高性能的體現(xiàn):虛擬DOM
原理:在我們的開發(fā)過程中,我們需要將變化莫測的數(shù)據(jù)實時的反映到UI上,這時就需要對DOM進行操作。但頻繁或復(fù)雜的操控DOM會產(chǎn)生許多性能上的問題?!绾芜M行高性能的復(fù)雜DOM操作通常是衡量一個前端開發(fā)人員技術(shù)的重要指標。
React為此引入了虛擬DOM(virtual DOM)的機制:在瀏覽器端用javascript實現(xiàn)了一套DOM API?;赗eact進行開發(fā)時所有的DOM構(gòu)造都是通過虛擬DOM進行,每當(dāng)數(shù)據(jù)變化時,React都會重新渲染整個DOM樹,然后React將當(dāng)前整個DOM樹和上一次的DOM樹進行對比,得到DOM結(jié)構(gòu)的的區(qū)別,然后僅僅需要變化的部分進行實際的瀏覽器DOM更新。而且React能夠批量處理虛擬DOM的刷新,在一個事件循環(huán)(Event loop)內(nèi)的兩次數(shù)據(jù)變化被合并,例如你連續(xù)的先將節(jié)點內(nèi)容從A-B,B-A,React會認為A變成B,然后又從B變成A UI不發(fā)生任何變化,而如果通過手動控制,這種邏輯通常是極其復(fù)雜的
React Fiber:
在React16之后發(fā)布的一種react核心算法,React Fiber是對核心算法的一次重新實現(xiàn)(官網(wǎng)說法)。之前用的是diff算法
在之前的React中,更新過程是同步的,這可能會導(dǎo)致性能問題。
當(dāng)React決定要加載或者更新組件樹時,會做很多事,比如調(diào)用各個組件的生命周期函數(shù),計算和比對Virtual DOM,最后更新DOM樹,這整個過程是同步進行的,也就是說只要一個加載或者更新過程開始,中途不會中斷。因為javascript單線程的特點,如果組件樹很大的時候,每個同步任務(wù)耗時太長,就會出現(xiàn)卡頓。
React Fiber的方法其實很簡單——分片。把一個耗時長的任務(wù)分成很多小片,每一個小片的運作時間很短,雖然總時間依然很長,但是在每個小片執(zhí)行完之后,都給其他任務(wù)一個執(zhí)行的機會,這樣唯一的線程就不會被獨占,其他任務(wù)依然有運行的機會。
五、React的特點和優(yōu)勢
1、虛擬DOM
我們之前操作DOM的方式是通過document.getElementById()的方式,這樣的過程實際上是先去讀取html的dom結(jié)構(gòu),將結(jié)構(gòu)轉(zhuǎn)換成變量,而進行操作
而reactjs定義了一套變量形式的dom模型,一切操作和換算直接在變量中,這樣減少了操作真實dom,性能真實相當(dāng)?shù)母?,和主流MVC框架有什么本質(zhì)區(qū)別,并不和dom打交道
2、組件系統(tǒng)
react最核心的思想是將頁面中任何一個區(qū)域或者元素都可以看做一個組件component
那什么是組件呢?
組件指的就是同時包含了html、css、js、image元素的聚合體
3、單向數(shù)據(jù)流
其實reactjs的核心內(nèi)容就是數(shù)據(jù)綁定,所謂數(shù)據(jù)綁定指的是只要將一些服務(wù)端的數(shù)據(jù)和前端頁面綁定好,開發(fā)者只關(guān)注實現(xiàn)業(yè)務(wù)就行了
4、JSX語法
在vue中,我們使用render函數(shù)來構(gòu)建組件的dom構(gòu)造性能較高,因為省去了查找和編譯模板的過程,但是在render中利用createElement創(chuàng)建結(jié)構(gòu)的時候代碼可讀性較低,較為負載,此時可以利用JSX語法來在render中創(chuàng)建dom,解決了這個問題,但是前提是需要使用工具編譯jsx。
關(guān)于“react框架的特點和優(yōu)勢是什么”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“react框架的特點和優(yōu)勢是什么”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站欄目:react框架的特點和優(yōu)勢是什么
鏈接URL:http://jinyejixie.com/article42/iehchc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、面包屑導(dǎo)航、小程序開發(fā)、域名注冊、動態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)