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

【