react框架是2013年出來的；React起源于Facebook的內(nèi)部項目，于2013年5月開源。React是用于構建用戶界面的JavaScript庫，主要用于構建UI；用戶可以在React里傳遞多種類型的參數(shù)，如聲明代碼，幫助你渲染出UI、也可以是靜態(tài)的HTML DOM元素、也可以傳遞動態(tài)變量、甚至是可交互的應用組件。

前端（vue）入門到精通課程，老師在線輔導：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用

本教程操作環(huán)境：Windows7系統(tǒng)、react18版、Dell G3電腦。

一、React的起源和發(fā)展

React是用于構建用戶界面的JavaScript庫， 起源于Facebook的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC框架，都不滿意，就決定自己寫一套，用來架設Instagram的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。

二、React的出發(fā)點

基于HTML的前端界面開發(fā)正變得越來越復雜，其本質(zhì)問題基本都可以歸結于如何將來自于服務器端或者用戶輸入的動態(tài)數(shù)據(jù)高效的反映到復雜的用戶界面上。而來自Fackbook的React框架正是完全面向此問題的一個解決方案，按官網(wǎng)描述，其出發(fā)點為：用于開發(fā)數(shù)據(jù)不斷變化的大型應用程序(Building large applications with data that changes over time)。相比傳統(tǒng)型的前端開發(fā),React開辟了一個相當于相當另類的途徑，實現(xiàn)了前端界面的高性能高效率開發(fā)。

React主要用于構建UI。你可以在React里傳遞多種類型的參數(shù)，如聲明代碼，幫助你渲染出UI、也可以是靜態(tài)的HTML DOM元素、也可以傳遞動態(tài)變量、甚至是可交互的應用組件。

三、Recat與傳統(tǒng)MVC的關系

輕量級的視圖層庫！ A JavaScript library for building user interfaces

React不是一個完整的MVC框架，最多可以認為是MVC中的（view）層，甚至React并不非常認可MVC開發(fā)模式；React構建頁面UI的庫?？梢院唵蔚乩斫鉃?，React將界面分成了各個獨立的小塊，每一個塊就是組件，這些組件之間可以組合、嵌套、就成了我們的頁面

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

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

React為此引入了虛擬DOM(virtual DOM)的機制：在瀏覽器端用javascript實現(xiàn)了一套DOM API。基于React進行開發(fā)時所有的DOM構造都是通過虛擬DOM進行，每當數(shù)據(jù)變化時，React都會重新渲染整個DOM樹，然后React將當前整個DOM樹和上一次的DOM樹進行對比，得到DOM結構的的區(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ā)生任何變化，而如果通過手動控制，這種邏輯通常是極其復雜的

React Fiber：

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

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

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

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

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

1、虛擬DOM

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

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

2、組件系統(tǒng)

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

那什么是組件呢？

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

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

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

4、JSX語法

在vue中，我們使用render函數(shù)來構建組件的dom構造性能較高，因為省去了查找和編譯模板的過程，但是在render中利用createElement創(chuàng)建結構的時候代碼可讀性較低，較為負載，此時可以利用JSX語法來在render中創(chuàng)建dom，解決了這個問題，但是前提是需要使用工具編譯jsx

【