可以少去理解一些不必要的概念，而多去思考為什么會(huì)有這樣的東西，它解決了什么問(wèn)題，或者它的運(yùn)行機(jī)制是什么？

React

1. React 起源和發(fā)展（是什么？）

React 是用于構(gòu)建用戶界面的 JavaScript 庫(kù)，起源于 Facebook 的內(nèi)部項(xiàng)目，該公司對(duì)市場(chǎng)上所有 JavaScript MVC 框架都不滿意，決定自行開(kāi)發(fā)一套，用于架設(shè) Instagram 的網(wǎng)站。于2013年5月開(kāi)源。

React 與傳統(tǒng) MVC 的關(guān)系：

React 并不是一個(gè)完整的框架，最多認(rèn)為是 MVC 中的 V (View)，即 React 一般被用來(lái)作為 MVC 中的 V 層。做為 V 層構(gòu)建用戶 UI 的庫(kù)，可以簡(jiǎn)單的理解為，React 將頁(yè)面分成了各個(gè)獨(dú)立的小塊，每一個(gè)小快就是一個(gè)組件，這些組件之間可以組合、嵌套，就成了我們的頁(yè)面。

它不依賴其他任何的庫(kù)，在開(kāi)發(fā)中，可以與任何其他的庫(kù)集成使用，包括 Jquery。React 的思想非常獨(dú)特，性能出眾，可以寫出重復(fù)代碼少，邏輯清晰的前端代碼。它可以在瀏覽器端運(yùn)行，也可以通過(guò) nodejs 在服務(wù)端渲染。

2. React 的特性

1. 聲明式設(shè)計(jì)：React 采用聲明范式，可以輕松描述應(yīng)用。

   React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應(yīng)用的每一個(gè)狀態(tài)設(shè)計(jì)簡(jiǎn)潔的視圖，當(dāng)數(shù)據(jù)變動(dòng)時(shí) React 能高效更新并渲染合適的組件。以聲明式編寫 UI，可以讓你的代碼更加可靠，且方便調(diào)試。

2. 高效（虛擬 DOM）：React 通過(guò)對(duì) DOM 的模擬使用了虛擬 DOM，可以最大限度地減少與真實(shí) DOM 的交互。

3. 靈活：React 不依賴其他任何的庫(kù)，在開(kāi)發(fā)中 React 可以與已知的庫(kù)或框架很好地配合。

4. 組件化：通過(guò) React 構(gòu)建組件，使得代碼更加容易得到復(fù)用（復(fù)用復(fù)用復(fù)用），能夠很好的應(yīng)用在大項(xiàng)目的開(kāi)發(fā)中。

   構(gòu)建管理自身狀態(tài)的封裝組件，然后對(duì)其組合以構(gòu)成復(fù)雜的 UI。由于組件邏輯使用 JavaScript 編寫而非模板，因此你可以輕松地在應(yīng)用中傳遞數(shù)據(jù)，并保持狀態(tài)與 DOM 分離。

5. 單向響應(yīng)的數(shù)據(jù)流：React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡(jiǎn)單。

   單向數(shù)據(jù)流，數(shù)據(jù)流方向是由從上到下（父到子）的，如果下面子組件數(shù)據(jù)發(fā)生改變（更新）了，要從子組件發(fā)送到父組件，父組件更新完了之后再次傳遞給子組件（也就是說(shuō)子組件數(shù)據(jù)更新后，需要父組件重新的給它流入一遍），這個(gè)時(shí)候父子組件都可以使用這個(gè)數(shù)據(jù)。

   比如說(shuō)：老板下達(dá)任務(wù)給下屬，然后下屬執(zhí)行。 如果此時(shí)下屬有個(gè)想法（比如修改個(gè)某某數(shù)據(jù)），這時(shí)需要請(qǐng)示領(lǐng)導(dǎo)，如果領(lǐng)導(dǎo)同意了，那么下屬得到新的命令再去執(zhí)行。好處就是，所有的主動(dòng)權(quán)都在頂層組件，下面所有的變動(dòng)上面都知道。如果什么事低下自己決定，直接修改完，告訴上面。出問(wèn)題調(diào)查起來(lái)麻煩，不知道上面還是下面出了問(wèn)題。

6. JSX： JSX 是 JavaScript 語(yǔ)法的擴(kuò)展。React 開(kāi)發(fā)不一定使用 JSX ，但我們建議使用它。

   React 的語(yǔ)法是 JSX，通過(guò)使用這種語(yǔ)法，可以在 React 代碼中直接混合使用 js 和 html、css 來(lái)編寫組件代碼，這樣代碼的邏輯就非常清晰，當(dāng)然也意味著，需要將 jsx 代碼編譯成普通的 javascript 代碼，才能在瀏覽器中運(yùn)行， 這個(gè)過(guò)程讓 React 中的處理器去解析 JSX 就行了。

7. 一次學(xué)習(xí)，跨平臺(tái)編寫：

   無(wú)論你現(xiàn)在使用什么技術(shù)棧，在無(wú)需重寫現(xiàn)有代碼的前提下，通過(guò)引入 React 來(lái)開(kāi)發(fā)新功能。React 還可以使用 Node 進(jìn)行服務(wù)器渲染，或使用 React Native 開(kāi)發(fā)原生移動(dòng)應(yīng)用。

3. React 的缺點(diǎn)

并不是一個(gè)單獨(dú)完整的框架，React 是目標(biāo)是 UI 組件，通常可以和其它框架組合使用，目前并不適合單獨(dú)做一個(gè)完整的框架。

4. 什么是虛擬 DOM？

4.1）傳統(tǒng) DOM 更新

真實(shí)頁(yè)面對(duì)應(yīng)一個(gè) DOM 樹，在傳統(tǒng)的開(kāi)發(fā)中，每次需要修改、更新頁(yè)面時(shí)，都需要手動(dòng)直接操作 DOM 來(lái)進(jìn)行更新。

4.2）虛擬 DOM

DOM 操作非常昂貴。我們都知道在前端開(kāi)發(fā)中，性能消耗最大的就是 DOM 操作，而且這部分代碼會(huì)讓整體項(xiàng)目的代碼變得難以維護(hù)。React 把真實(shí)的 DOM 樹、數(shù)據(jù)轉(zhuǎn)換成 JavaScript 對(duì)象，也就是 Virtual DOM（虛擬 DOM、VDOM、vnode）。也就是說(shuō)在 React 中用 JS 對(duì)象來(lái)描述虛擬 DOM 樹。

比如在 React 中，render 執(zhí)行的結(jié)果得到的并不是真正的 DOM 節(jié)點(diǎn)，而是 Virtual DOM， 即僅僅是輕量級(jí)的 JavaScript 對(duì)象 。

虛擬 DOM 原理：

React 會(huì)基于真實(shí) DOM 和數(shù)據(jù)創(chuàng)建兩條虛擬 DOM ，用 DIFF 算法以最小的代價(jià)對(duì)比（DIFF）出兩個(gè)虛擬 DOM 數(shù)據(jù)節(jié)點(diǎn)是不是有改變。從而只選擇將需要修改的部分給標(biāo)記起來(lái)，做一個(gè)補(bǔ)丁，真正更新到真實(shí)的 DOM 中。

不動(dòng)其他 DOM 只會(huì)影響改變的 DOM，其他 DOM 節(jié)點(diǎn)不需要重新創(chuàng)建的，只需要調(diào)整位置。

React 虛擬 DOM 核心思想：

對(duì)復(fù)雜的文檔 DOM 結(jié)構(gòu)，提供一種方便的工具，進(jìn)行最小化地 DOM 操作。這句話，也許過(guò)于抽象，卻基本概況了虛擬 DOM 的設(shè)計(jì)思想。

虛擬 DOM 總結(jié)：

虛擬 DOM 是 React 的一大亮點(diǎn)，具有 batching（批處理）和高效的 Diff 算法。這讓我們可以無(wú)需擔(dān)心性能問(wèn)題而“毫無(wú)顧忌”的隨時(shí)“刷新”整個(gè)頁(yè)面，由虛擬 DOM 來(lái)確保只對(duì)界面上真正變化的部分進(jìn)行實(shí)際的 DOM 操作。在實(shí)際開(kāi)發(fā)中基本無(wú)需關(guān)心虛擬 DOM 是如何運(yùn)作的，但是理解其運(yùn)行機(jī)制不僅有助于更好的理解 React 組件的生命周期，而且對(duì)于進(jìn)一步優(yōu)化 React 程序也會(huì)有很大幫助。

虛擬 DOM 實(shí)例：

React 會(huì)基于真實(shí) DOM 和數(shù)據(jù)創(chuàng)建兩條虛擬 DOM，這里就可以做一個(gè)對(duì)比：前后兩條沒(méi)有做出改變，中間少了一條，這時(shí)候給他標(biāo)記起來(lái)，做一個(gè)補(bǔ)丁 patch(s) ，真正更新到真實(shí)的 DOM 中。

// 原始基礎(chǔ)數(shù)據(jù)：[111, 222, 333]，基于基礎(chǔ)數(shù)據(jù)創(chuàng)建出來(lái)的虛擬 DOM 如下：
{
	{
    type:"li",
    text:"111",
  },
  {
    type:"li",
    text:"222",
  },
  {
    type:"li",
    text:"333",
  },
}

// 修改后的數(shù)據(jù)：[111, 333]，基于新的基礎(chǔ)數(shù)據(jù)創(chuàng)建出來(lái)的虛擬 DOM 如下：
{
	{
    type:"li",
    text:"111",
  },
  {
    type:"li",
    text:"333",
  },
}

4.3）DOM 直接操作對(duì)性能的影響

DOM 直接操作將導(dǎo)致回流重排嚴(yán)重影響性能，比如減少的 Dom 刪掉，下面的 Dom 需要往上移，引發(fā)文檔的重排，回流的問(wèn)題。頻繁改變 DOM 就會(huì)導(dǎo)致回流現(xiàn)象，回流就是重新排列下它的順序，然后重新渲染一遍，就會(huì)影響我們的性能。

Umi

Umi，中文可發(fā)音為烏米，是可擴(kuò)展的企業(yè)級(jí)前端應(yīng)用框架。Umi 以路由為基礎(chǔ)的，同時(shí)支持配置式路由和約定式路由，保證路由的功能完備，并以此進(jìn)行功能擴(kuò)展。然后配以生命周期完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個(gè)生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求。其次 Umi 本身是基于 React 構(gòu)建的。

create-react-app 是基于 webpack 的打包層方案，包含 build、dev、lint 等，他在打包層把體驗(yàn)做到了極致，但是不包含路由，不是框架，也不支持配置。所以，如果大家想基于他修改部分配置，或者希望在打包層之外也做技術(shù)收斂時(shí)，就會(huì)遇到困難。

React Native

React 是用于構(gòu)建用戶界面的 JavaScript 庫(kù)，是基于瀏覽器的。React Native 可以基于目前大熱的開(kāi)源 JavaScript 庫(kù) React.js 來(lái)開(kāi)發(fā) iOS 和 Android 原生 App。

React 和 React Native 的區(qū)別：

1）框架作用的平臺(tái)不同

RN 是由 React 衍生出來(lái)的，兩種框架都是用 JSX 開(kāi)發(fā)語(yǔ)法，但是 RN 是用來(lái)開(kāi)發(fā)真正基于原生渲染的 iOS 和 Andriod 移動(dòng)應(yīng)用的 JS 框架，而React 是將瀏覽器作為渲染平臺(tái)。

2）工作原理的差別

Virtual DOM 是介于開(kāi)發(fā)者描述的視圖與實(shí)際在頁(yè)面上渲染的視圖之間。在瀏覽器上如果想渲染出來(lái)可交互的用戶界面，開(kāi)發(fā)者必須操作瀏覽器的文檔對(duì)象（document object model），Virtual DOM 的出現(xiàn)，就是為了節(jié)省這部分操作所消耗的性能。但是 Virtual DOM 的巨大潛力，是在于這個(gè)抽象層，可以帶來(lái)很多可能性。

React Native 的工作原理，就是調(diào)用 Objective-C 的 API 去渲染 iOS 組件，調(diào)用 Java API 去渲染 Android 組件，而不是渲染到 DOM 上。橋接使得 React 可調(diào)用宿主平臺(tái)開(kāi)放的 UI 組件，React 組件通過(guò) render 方法返回了描述界面的標(biāo)記代碼。如果是 Web 平臺(tái)，React 最終把標(biāo)記代碼解析成瀏覽器的 DOM；而在 React Native 中，標(biāo)記代碼會(huì)解析成特定平臺(tái)的組件，例如會(huì)表現(xiàn)成 iOS 平臺(tái)上的 UIView。

3）渲染周期

React 的渲染周期開(kāi)始于 React 組件掛載到 DOM 之后，接著 React 進(jìn)入渲染周期并根據(jù)需要渲染組件。在渲染階段，React 將開(kāi)發(fā)者在 return 中返回的 HTML 標(biāo)記直接按需渲染到頁(yè)面上。

React Native 生命周期與 React 基本相同，在渲染上因?yàn)?React Native 依賴于橋接，并不在 UI 主線程運(yùn)行，它可以在不影響用戶體驗(yàn)的前提下執(zhí)行這些異步調(diào)用。

4）創(chuàng)建組件

當(dāng)編寫 Web 環(huán)境的 React 的時(shí)候，視圖最終需要渲染成普通的 HTML 元素；而在 React Native 中，所有元素都會(huì)被平臺(tái)指定的組件替換，例如在 iOS 中，組件被渲染成 UIView，而在 Android 平臺(tái)，會(huì)被渲染成 View。UI 元素均為 React 的（原生的）組件，而不是基礎(chǔ)的 html 元素，因此在使用每一個(gè)組件的時(shí)候，都需要顯式的導(dǎo)入。

5）原生的樣式

在 Web 中，使用 CSS 樣式為 React 組件添加樣式已經(jīng)是開(kāi)發(fā)過(guò)程中不可獲取的一部分了。React 通常不影響我們編寫 CSS 的方式，并且它確實(shí)讓樣式的動(dòng)態(tài)創(chuàng)建更加容易（通過(guò) state 和 props），除此之外，React 基本上不關(guān)心我們?nèi)绾翁幚順邮降摹?/p>

非 Web 平臺(tái)上有大量的方法來(lái)處理布局和樣式，我們使用 React Native 時(shí)，只需要用一種標(biāo)準(zhǔn)的方法來(lái)處理樣式，React 和宿主平臺(tái)之間的橋接包含了一個(gè)縮減版 CSS 子集的實(shí)現(xiàn)，這個(gè) CSS 子集主要通過(guò) flexbox 進(jìn)行布局，做到了盡量簡(jiǎn)化，而不是去實(shí)現(xiàn)所有的 CSS 規(guī)則。有別于 Web 平臺(tái)，CSS 的支持程度因?yàn)g覽器而不同，React Native 則做到了樣式規(guī)則的一致。

6）宿主平臺(tái) Api

使用 Web 環(huán)境的 React 與 React Native 最大的不同，在于宿主平臺(tái)的 Api。

在 Web 中，我們通常要處理采納標(biāo)準(zhǔn)的不一致和碎片化所引起的問(wèn)題，并且大多數(shù)瀏覽器只支持部分核心的特性。然而在 React Native 中，平臺(tái)特定的 Api 在提供優(yōu)秀原生的用戶體驗(yàn)方面發(fā)揮了巨大的作用。當(dāng)然，要考慮的方面還有很多。Api 囊括了許多功能，從數(shù)據(jù)存儲(chǔ)到地理服務(wù)，以及操控硬件設(shè)備（如攝像頭）等。非常規(guī)平臺(tái)上的 Api 會(huì)更有趣，例如，React Native 和虛擬現(xiàn)實(shí)頭盔之間的 API 會(huì)是什么樣的呢？

默認(rèn)情況下，iOS 和 Android 版本的 React Native 支持許多常用的特性，甚至可以支持任何異步的本地 Api。React Native 讓宿主平臺(tái) Api 的使用變得更加簡(jiǎn)單和直觀，你可以在其中自由地試驗(yàn)。同時(shí)，務(wù)必思考一下怎樣做才符合目標(biāo)平臺(tái)的體驗(yàn)，并在心里設(shè)計(jì)好交互過(guò)程。毋庸置疑，React Native 的橋接不可能暴露宿主平臺(tái)全部的 Api。

如果你需要使用一個(gè)未支持的特性，完全可以自己動(dòng)手添加到 React Native 中。另外，如果其他人已經(jīng)集成，那就更好了，所以應(yīng)該及時(shí)查看社區(qū)中的實(shí)現(xiàn)。值得注意的是，使用平臺(tái) Api 也會(huì)對(duì)代碼復(fù)用有幫助。同時(shí)，實(shí)現(xiàn)平臺(tái)特定功能的 React 組件也是平臺(tái)特定的。

隔離和封裝這些組件將會(huì)給你的應(yīng)用帶來(lái)更大的靈活性。當(dāng)然，這對(duì)你開(kāi)發(fā) Web 應(yīng)用同樣奏效，如果你想共享 React 和 React Native 的代碼，請(qǐng)記住像 DOM 這樣的 API 在 React Native 中并不存在。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-746320.html

到了這里，關(guān)于React、Umi、RN 整體理解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！