react和react native有哪些區(qū)別

小編給大家分享一下react和react native有哪些區(qū)別，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

react和react native的區(qū)別是：1、框架作用的平臺(tái)不同；2、工作原理有差別；3、渲染周期不同；4、react native中所有元素都會(huì)被平臺(tái)指定的react組件替換；5、宿主平臺(tái)的API不同。

區(qū)別如下：

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

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

2、工作原理的差別

Virtual DOM是介于開發(fā)者描述的視圖與實(shí)際在頁面上渲染的視圖之間。在瀏覽器上如果想渲染出來可交互的用戶界面，開發(fā)者必須操作瀏覽器的文檔對象（document object model），Virtual DOM的出現(xiàn)，就是為了節(jié)省這部分操作所消耗的性能。

但是Virtual DOM的巨大潛力，是在于這個(gè)抽象層，可以帶來很多可能性。

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

3、渲染周期

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

React Native生命周期與React基本相同，在渲染上因?yàn)镽eact 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)指定的React組件替換，例如在iOS中，<View>組件被渲染成UIView，而在Android平臺(tái)，會(huì)被渲染成View。

UI元素均為React的組件，而不是像<div>這樣基礎(chǔ)的html元素，因此在使用每一個(gè)組件的時(shí)候，都需要顯式的導(dǎo)入，例如：

import { DatePickerIOS } from 'react-native';

5、原生的樣式

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

非Web平臺(tái)上有大量的方法來處理布局和樣式，我們使用React Native時(shí)，只需要用一種標(biāo)準(zhǔn)的方法來處理樣式，React和宿主平臺(tái)之間的橋接包含了一個(gè)縮減版CSS子集的實(shí)現(xiàn)，這個(gè)CSS子集主要通過flexbox進(jì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)的不一致和碎片化所引起的問題，并且大多數(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 的使用變得更加簡單和直觀，你可以在其中自由地試驗(yàn)。同時(shí)，務(wù)必思考一下怎樣做才符合目標(biāo)平臺(tái)的體驗(yàn)，并在心里設(shè)計(jì)好交互過程。毋庸置疑，React Native 的橋接不可能暴露宿主平臺(tái)全部的API。

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

隔離和封裝這些組件將會(huì)給你的應(yīng)用帶來更大的靈活性。當(dāng)然，這對你開發(fā)Web 應(yīng)用同樣奏效，如果你想共享React 和React Native 的代碼，請記住像DOM 這樣的API 在React Native 中并不存在。

以上是“react和react native有哪些區(qū)別”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！