react框架什麼時候出來的

react框架是2013年出來的；React起源於Facebook的內部項目，於2013年5月開源。 React是用來建立使用者介面的JavaScript函式庫，主要用來建構UI；使用者可以在React傳遞多種類型的參數，如宣告程式碼，幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變數、甚至是可互動的應用元件。

本教學操作環境：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框架什麼時候出來的的詳細內容。更多資訊請關注PHP中文網其他相關文章！