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

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

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

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

React是用于構(gòu)建用戶界面的JavaScript庫(kù)， 起源于Facebook的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC框架，都不滿意，就決定自己寫一套，用來(lái)架設(shè)Instagram的網(wǎng)站。做出來(lái)以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。

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

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

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

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

輕量級(jí)的視圖層庫(kù)！ A JavaScript library for building user interfaces

React不是一個(gè)完整的MVC框架，最多可以認(rèn)為是MVC中的（view）層，甚至React并不非常認(rèn)可MVC開發(fā)模式；React構(gòu)建頁(yè)面UI的庫(kù)。可以簡(jiǎn)單地理解為，React將界面分成了各個(gè)獨(dú)立的小塊，每一個(gè)塊就是組件，這些組件之間可以組合、嵌套、就成了我們的頁(yè)面

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

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

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

React Fiber：

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

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

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

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

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

1、虛擬DOM

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

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

2、組件系統(tǒng)

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

那什么是組件呢？

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

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

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

4、JSX語(yǔ)法

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

【