React 起源于 Facebook 的內(nèi)部項目辆脸，因為該公司對市場上所有 JavaScript MVC 框架抵栈，都不滿意，就決定自己寫一套齿拂，用來架設(shè)Instagram 的網(wǎng)站。做出來以后肴敛，發(fā)現(xiàn)這套東西很好用署海，就在2013年5月開源了吗购。
React與傳統(tǒng)MVC的關(guān)系
輕量級的視圖層庫！A JavaScript library for building user interfaces
React不是一個完整的MVC框架砸狞，最多可以認為是MVC中的V（View）捻勉，甚至React并不非常認可MVC開發(fā)模式；React 構(gòu)建頁面 UI 的庫刀森□馄簦可以簡單地理解為，React 將將界面分成了各個獨立的小塊研底，每一個塊就是組件埠偿，這些組件之間可以組合、嵌套榜晦，就成了我們的頁面冠蒋。
React高性能的體現(xiàn)：虛擬DOM
React高性能的原理：
在Web開發(fā)中我們總需要將變化的數(shù)據(jù)實時反應(yīng)到UI上，這時就需要對DOM進行操作乾胶。而復(fù)雜或頻繁的DOM操作通常是性能瓶頸產(chǎn)生的原因（如何進行高性能的復(fù)雜DOM操作通常是衡量一個前端開發(fā)人員技能的重要指標(biāo)）抖剿。
React為此引入了虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現(xiàn)了一套DOM API∈读基于React進行開發(fā)時所有的DOM構(gòu)造都是通過虛擬DOM進行斩郎，每當(dāng)數(shù)據(jù)變化時，React都會重新構(gòu)建整個DOM樹喻频，然后React將當(dāng)前整個DOM樹和上一次的DOM樹進行對比孽拷，得到DOM結(jié)構(gòu)的區(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ā)生任何變化，而如果通過手動控制史简，這種邏輯通常是極其復(fù)雜的乃秀。
盡管每一次都需要構(gòu)造完整的虛擬DOM樹，但是因為虛擬DOM是內(nèi)存數(shù)據(jù)圆兵，性能是極高的跺讯，部而對實際DOM進行操作的僅僅是Diff分，因而能達到提高性能的目的殉农。這樣刀脏，在保證性能的同時，開發(fā)者將不再需要關(guān)注某個數(shù)據(jù)的變化如何更新到一個或多個具體的DOM元素超凳，而只需要關(guān)心在任意一個數(shù)據(jù)狀態(tài)下愈污，整個界面是如何Render的耀态。
React Fiber:
在react 16之后發(fā)布的一種react 核心算法，React Fiber是對核心算法的一次重新實現(xiàn)(官網(wǎng)說法)暂雹。之前用的是diff算法首装。
在之前React中，更新過程是同步的杭跪，這可能會導(dǎo)致性能問題仙逻。
當(dāng)React決定要加載或者更新組件樹時，會做很多事涧尿，比如調(diào)用各個組件的生命周期函數(shù)系奉，計算和比對Virtual DOM，最后更新DOM樹现斋，這整個過程是同步進行的喜最，也就是說只要一個加載或者更新過程開始偎蘸，中途不會中斷庄蹋。因為JavaScript單線程的特點，如果組件樹很大的時候迷雪，每個同步任務(wù)耗時太長限书，就會出現(xiàn)卡頓。
React Fiber的方法其實很簡單——分片章咧。把一個耗時長的任務(wù)分成很多小片倦西，每一個小片的運行時間很短，雖然總時間依然很長赁严，但是在每個小片執(zhí)行完之后扰柠，都給其他任務(wù)一個執(zhí)行的機會，這樣唯一的線程就不會被獨占疼约，其他任務(wù)依然有運行的機會卤档。
React的特點和優(yōu)勢
- 虛擬DOM
之前您操作dom的方式是通過document.getElementById()的方式，這樣的過程實際上是先去讀取html的dom結(jié)構(gòu)程剥，將結(jié)構(gòu)轉(zhuǎn)換成變量劝枣，再進行操作
而reactjs定義了一套變量形式的dom模型，一切操作和換算直接在變量中织鲸，這樣減少了操作真實dom舔腾，性能真實相當(dāng)?shù)母撸椭髁鱉VC框架有本質(zhì)的區(qū)別搂擦，并不和dom打交道
- 組件系統(tǒng)
react最核心的思想是將頁面中任何一個區(qū)域或者元素都可以看做一個組件 component
那么什么是組件呢稳诚？
組件指的就是同時包含了html、css瀑踢、js采桃、image元素的聚合體
使用react開發(fā)的核心就是將頁面拆分成若干個組件懒熙，并且react一個組件中同時耦合了css、js普办、image工扎，這種模式整個顛覆了過去的傳統(tǒng)的方式
- 單向數(shù)據(jù)流
其實reactjs的核心內(nèi)容就是數(shù)據(jù)綁定，所謂數(shù)據(jù)綁定指的是只要將一些服務(wù)端的數(shù)據(jù)和前端頁面綁定好衔蹲，開發(fā)者只關(guān)注實現(xiàn)業(yè)務(wù)就行了
- JSX 語法
在vue中肢娘，我們使用render函數(shù)來構(gòu)建組件的dom結(jié)構(gòu)性能較高，因為省去了查找和編譯模板的過程舆驶，但是在render中利用createElement創(chuàng)建結(jié)構(gòu)的時候代碼可讀性較低橱健，較為復(fù)雜，此時可以利用jsx語法來在render中創(chuàng)建dom沙廉，解決這個問題拘荡，但是前提是需要使用工具來編譯jsx
React相關(guān)的解決方案
- web: react-dom + react-router
- app: react-native + react-navigation
- VR: react-360
- 狀態(tài)管理: redux/mobx…
- UI框架: antd/material…
- 多端統(tǒng)一解決方案: taro…
- 相關(guān)腳手架: create-react-app/react-native-cli/umi…
- 調(diào)試工具: react-devtools
- …
官方腳手架create-react-app
全局安裝create-react-app
$ npm install -g create-react-app
創(chuàng)建一個項目
$ create-react-app your-app 注意命名方式
Creating a new React app in /dir/your-app.
Installing packages. This might take a couple of minutes. 安裝過程較慢，可以使用yarn
Installing react, react-dom, and react-scripts...
如果不想全局安裝撬陵，可以直接使用npx
$ npx create-react-app your-app 也可以實現(xiàn)相同的效果
這需要等待一段時間珊皿，這個過程實際上會安裝三個東西
- react: react的頂級庫
- react-dom: 因為react有很多的運行環(huán)境，比如app端的react-native, 我們要在web上運行就使用react-dom
- react-scripts: 包含運行和打包react應(yīng)用程序的所有腳本及配置巨税，要了解更多的配置可以系統(tǒng)學(xué)習(xí)一下webpack.
出現(xiàn)下面的界面蟋定，表示創(chuàng)建項目成功:
Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd your-app
npm start
Happy hacking!
根據(jù)上面的提示，通過cd your-app命令進入目錄并運行npm start即可運行項目草添。
生成項目的目錄結(jié)構(gòu)如下：
├── README.md 使用方法的文檔
├── node_modules 所有的依賴安裝的目錄
├── package-lock.json 鎖定安裝時的包的版本號,保證團隊的依賴能保證一致驶兜。
├── package.json
├── public 靜態(tài)公共目錄
└── src 開發(fā)用的源代碼目錄
常見問題：
- npm安裝失敗
- 切換為npm鏡像為淘寶鏡像
- 使用yarn，如果本來使用yarn還要失敗远寸，還得把yarn的源切換到國內(nèi)
- 如果還沒有辦法解決抄淑，請刪除node_modules及package-lock.json然后重新執(zhí)行
npm install命令 - 再不能解決就刪除node_modules及package-lock.json的同時清除npm緩存
npm cache clean --force之后再執(zhí)行npm install命令
