react框架的特點(diǎn)和優(yōu)勢是什么

這篇文章主要介紹了react框架的特點(diǎn)和優(yōu)勢是什么的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react框架的特點(diǎn)和優(yōu)勢是什么文章都會有所收獲，下面我們一起來看看吧。

費(fèi)縣網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),費(fèi)縣網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為費(fèi)縣上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個售后服務(wù)好的費(fèi)縣做網(wǎng)站的公司定做！

react框架是2013年出來的；React起源于Facebook的內(nèi)部項(xiàng)目，于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)部項(xiàng)目，因?yàn)樵摴緦κ袌錾纤?JavaScript MVC框架，都不滿意，就決定自己寫一套，用來架設(shè)Instagram的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。

二、React的出發(fā)點(diǎn)

基于HTML的前端界面開發(fā)正變得越來越復(fù)雜，其本質(zhì)問題基本都可以歸結(jié)于如何將來自于服務(wù)器端或者用戶輸入的動態(tài)數(shù)據(jù)高效的反映到復(fù)雜的用戶界面上。而來自Fackbook的React框架正是完全面向此問題的一個解決方案，按官網(wǎng)描述，其出發(fā)點(diǎn)為：用于開發(fā)數(shù)據(jù)不斷變化的大型應(yīng)用程序(Building large applications with data that changes over time)。相比傳統(tǒng)型的前端開發(fā),React開辟了一個相當(dāng)于相當(dāng)另類的途徑，實(shí)現(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框架，最多可以認(rèn)為是MVC中的（view）層，甚至React并不非常認(rèn)可MVC開發(fā)模式；React構(gòu)建頁面UI的庫。可以簡單地理解為，React將界面分成了各個獨(dú)立的小塊，每一個塊就是組件，這些組件之間可以組合、嵌套、就成了我們的頁面

四、React高性能的體現(xiàn)：虛擬DOM

原理：在我們的開發(fā)過程中，我們需要將變化莫測的數(shù)據(jù)實(shí)時的反映到UI上，這時就需要對DOM進(jìn)行操作。但頻繁或復(fù)雜的操控DOM會產(chǎn)生許多性能上的問題?！绾芜M(jìn)行高性能的復(fù)雜DOM操作通常是衡量一個前端開發(fā)人員技術(shù)的重要指標(biāo)。

React為此引入了虛擬DOM(virtual DOM)的機(jī)制：在瀏覽器端用javascript實(shí)現(xiàn)了一套DOM API。基于React進(jìn)行開發(fā)時所有的DOM構(gòu)造都是通過虛擬DOM進(jìn)行，每當(dāng)數(shù)據(jù)變化時，React都會重新渲染整個DOM樹，然后React將當(dāng)前整個DOM樹和上一次的DOM樹進(jìn)行對比，得到DOM結(jié)構(gòu)的的區(qū)別，然后僅僅需要變化的部分進(jìn)行實(shí)際的瀏覽器DOM更新。而且React能夠批量處理虛擬DOM的刷新，在一個事件循環(huán)（Event loop）內(nèi)的兩次數(shù)據(jù)變化被合并，例如你連續(xù)的先將節(jié)點(diǎn)內(nèi)容從A-B,B-A，React會認(rèn)為A變成B，然后又從B變成A UI不發(fā)生任何變化，而如果通過手動控制，這種邏輯通常是極其復(fù)雜的

React Fiber：

在React16之后發(fā)布的一種react核心算法，React Fiber是對核心算法的一次重新實(shí)現(xiàn)(官網(wǎng)說法)。之前用的是diff算法

在之前的React中，更新過程是同步的，這可能會導(dǎo)致性能問題。

當(dāng)React決定要加載或者更新組件樹時，會做很多事，比如調(diào)用各個組件的生命周期函數(shù)，計(jì)算和比對Virtual DOM，最后更新DOM樹，這整個過程是同步進(jìn)行的，也就是說只要一個加載或者更新過程開始，中途不會中斷。因?yàn)閖avascript單線程的特點(diǎn)，如果組件樹很大的時候，每個同步任務(wù)耗時太長，就會出現(xiàn)卡頓。

React Fiber的方法其實(shí)很簡單——分片。把一個耗時長的任務(wù)分成很多小片，每一個小片的運(yùn)作時間很短，雖然總時間依然很長，但是在每個小片執(zhí)行完之后，都給其他任務(wù)一個執(zhí)行的機(jī)會，這樣唯一的線程就不會被獨(dú)占，其他任務(wù)依然有運(yùn)行的機(jī)會。

五、React的特點(diǎn)和優(yōu)勢

1、虛擬DOM

我們之前操作DOM的方式是通過document.getElementById()的方式，這樣的過程實(shí)際上是先去讀取html的dom結(jié)構(gòu)，將結(jié)構(gòu)轉(zhuǎn)換成變量，而進(jìn)行操作

而reactjs定義了一套變量形式的dom模型，一切操作和換算直接在變量中，這樣減少了操作真實(shí)dom，性能真實(shí)相當(dāng)?shù)母?，和主流MVC框架有什么本質(zhì)區(qū)別，并不和dom打交道

2、組件系統(tǒng)

react最核心的思想是將頁面中任何一個區(qū)域或者元素都可以看做一個組件component

那什么是組件呢？

組件指的就是同時包含了html、css、js、image元素的聚合體

3、單向數(shù)據(jù)流

其實(shí)reactjs的核心內(nèi)容就是數(shù)據(jù)綁定，所謂數(shù)據(jù)綁定指的是只要將一些服務(wù)端的數(shù)據(jù)和前端頁面綁定好，開發(fā)者只關(guān)注實(shí)現(xiàn)業(yè)務(wù)就行了

4、JSX語法

在vue中，我們使用render函數(shù)來構(gòu)建組件的dom構(gòu)造性能較高，因?yàn)槭∪チ瞬檎液途幾g模板的過程，但是在render中利用createElement創(chuàng)建結(jié)構(gòu)的時候代碼可讀性較低，較為負(fù)載，此時可以利用JSX語法來在render中創(chuàng)建dom，解決了這個問題，但是前提是需要使用工具編譯jsx。

關(guān)于“react框架的特點(diǎn)和優(yōu)勢是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“react框架的特點(diǎn)和優(yōu)勢是什么”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：react框架的特點(diǎn)和優(yōu)勢是什么
鏈接URL：http://muchs.cn/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)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)