react框架是2013年出來的;React起源於Facebook的內部專案,於2013年5月開源。React是用於構建使用者介面的JavaScript庫,主要用於構建UI;使用者可以在React裡傳遞多種型別的引數,如宣告程式碼,幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變數、甚至是可互動的應用元件。
前端(vue)入門到精通課程,老師線上輔導:聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具:
本教學操作環境:Windows7系統、react18版、Dell G3電腦。
一、React的起源和發展
React是用於構建使用者介面的JavaScript庫, 起源於Facebook的內部專案,因為該公司對市場上所有 JavaScript MVC框架,都不滿意,就決定自己寫一套,用來架設Instagram的網站。做出來以後,發現這套東西很好用,就在2013年5月開源了。
二、React的出發點
基於HTML的前端介面開發正變得越來越複雜,其本質問題基本都可以歸結於如何將來自於伺服器端或者使用者輸入的動態資料高效的反映到複雜的使用者介面上。而來自Fackbook的React框架正是完全面向此問題的一個解決方案,按官網描述,其出發點為:用於開發資料不斷變化的大型應用程式(Building large applications with data that changes over time)。相比傳統型的前端開發,React開闢了一個相當於相當另類的途徑,實現了前端介面的高效能高效率開發。
React主要用於構建UI。你可以在React裡傳遞多種型別的引數,如宣告程式碼,幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變數、甚至是可互動的應用元件。
三、Recat與傳統MVC的關係
輕量級的檢視層庫! A JavaScript library for building user interfaces
React不是一個完整的MVC框架,最多可以認為是MVC中的(view)層,甚至React並不非常認可MVC開發模式;React構建頁面UI的庫。可以簡單地理解為,React將介面分成了各個獨立的小塊,每一個塊就是元件,這些元件之間可以組合、巢狀、就成了我們的頁面
四、React高效能的體現:虛擬DOM
原理:在我們的開發過程中,我們需要將變化莫測的資料實時的反映到UI上,這時就需要對DOM進行操作。但頻繁或複雜的操控DOM會產生許多效能上的問題。————如何進行高效能的複雜DOM操作通常是衡量一個前端開發人員技術的重要指標。
React為此引入了虛擬DOM(virtual DOM)的機制:在瀏覽器端用javascript實現了一套DOM API。基於React進行開發時所有的DOM構造都是通過虛擬DOM進行,每當資料變化時,React都會重新渲染整個DOM樹,然後React將當前整個DOM樹和上一次的DOM樹進行對比,得到DOM結構的的區別,然後僅僅需要變化的部分進行實際的瀏覽器DOM更新。而且React能夠批次處理虛擬DOM的重新整理,在一個事件迴圈(Event loop)內的兩次資料變化被合併,例如你連續的先將節點內容從A-B,B-A,React會認為A變成B,然後又從B變成A UI不發生任何變化,而如果通過手動控制,這種邏輯通常是極其複雜的
React Fiber:
在React16之後釋出的一種react核心演演算法,React Fiber是對核心演演算法的一次重新實現(官網說法)。之前用的是diff演演算法
在之前的React中,更新過程是同步的,這可能會導致效能問題。
當React決定要載入或者更新元件樹時,會做很多事,比如呼叫各個元件的生命週期函數,計算和比對Virtual DOM,最後更新DOM樹,這整個過程是同步進行的,也就是說只要一個載入或者更新過程開始,中途不會中斷。因為javascript單執行緒的特點,如果元件樹很大的時候,每個同步任務耗時太長,就會出現卡頓。
React Fiber的方法其實很簡單——分片。把一個耗時長的任務分成很多小片,每一個小片的運作時間很短,雖然總時間依然很長,但是在每個小片執行完之後,都給其他任務一個執行的機會,這樣唯一的執行緒就不會被獨佔,其他任務依然有執行的機會。
五、React的特點和優勢
1、虛擬DOM
我們之前操作DOM的方式是通過document.getElementById()的方式,這樣的過程實際上是先去讀取html的dom結構,將結構轉換成變數,而進行操作
而reactjs定義了一套變數形式的dom模型,一切操作和換算直接在變數中,這樣減少了操作真實dom,效能真實相當的高,和主流MVC框架有什麼本質區別,並不和dom打交道
2、元件系統
react最核心的思想是將頁面中任何一個區域或者元素都可以看做一個元件component
那什麼是元件呢?
元件指的就是同時包含了html、css、js、image元素的聚合體
3、單向資料流
其實reactjs的核心內容就是資料繫結,所謂資料繫結指的是隻要將一些伺服器端的資料和前端頁面繫結好,開發者只關注實現業務就行了
4、JSX語法
在vue中,我們使用render函數來構建元件的dom構造效能較高,因為省去了查詢和編譯模板的過程,但是在render中利用createElement建立結構的時候程式碼可讀性較低,較為負載,此時可以利用JSX語法來在render中建立dom,解決了這個問題,但是前提是需要使用工具編譯jsx
【相關推薦:Redis視訊教學、】
以上就是react框架什麼時候出來的的詳細內容,更多請關注TW511.COM其它相關文章!