首頁 > web前端 > js教程 > react和react native的差別是什麼

react和react native的差別是什麼

王林
發布: 2021-01-18 17:44:15
原創
15780 人瀏覽過

react和react native的差別是:1、框架作用的平台不同;2、工作原理有差別;3、渲染週期不同;4、react native中所有元素都會被平台指定的react元件取代;5、宿主平台的API不同。

react和react native的差別是什麼

本文環境:windows10、react16版本,Dell G3電腦。

(學習影片分享:react影片教學

區別如下:

1、框架作用的平台不同

RN是由React衍生出來的,兩種框架都是用JSX開發語法,但是RN是用來開發真正原生渲染的iOS和Andriod移動應用的JS框架,而React是將瀏覽器作為渲染平台。

2、工作原理的差異

Virtual DOM是介於開發者描述的視圖與實際在頁面上渲染的視圖之間。在瀏覽器上如果想渲染出來可互動的使用者介面,開發者必須操作瀏覽器的文件物件(document object model),Virtual DOM的出現,就是為了節省這部分操作所消耗的效能。

但Virtual DOM的巨大潛力,是在於這個抽象層,可以帶來很多可能性。

React Native的工作原理,就是呼叫Objective-C的API去渲染iOS元件,呼叫Java API去渲染Android元件,而不是渲染到DOM。橋接使得React可呼叫宿主平台開放的UI元件,React元件透過render方法傳回了描述介面的標記程式碼。如果是web平台,React最後把標記程式碼解析成瀏覽器的DOM;而在React Native中,標記程式碼會解析成特定平台的元件,例如會表現成iOS平台上的UIView。

3、渲染週期

React的渲染週期開始於react元件掛載到DOM之後,接著React進入渲染週期並根據需要渲染元件。在渲染階段,React將開發者在return中傳回的HTML標記直接按需渲染到頁面上。

React Native生命週期基本上與React相同,在渲染上因為React Native依賴於橋接,並不在UI主執行緒運行,它可以在不影響使用者體驗的前提下執行這些非同步呼叫。

4、建立元件

當寫Web環境的React的時候,視圖最終需要渲染成普通的HTML元素;而在React Native中,所有元素都會被平台指定的React元件替換,例如在iOS中,元件被渲染成UIView,而在Android平台,會被渲染成View。

UI元素都是React的元件,而不是像

這樣基礎的html元素,因此在使用每個元件的時候,都需要明確的導入,例如:

import { DatePickerIOS } from 'react-native';
登入後複製

5、原生的樣式

在Web中,使用CSS樣式為React元件添加樣式已經是開發過程中不可取得的一部分了。 React通常不會影響我們編寫CSS的方式,而且它確實讓樣式的動態創建更加容易(透過state和props),除此之外,React基本上不關心我們如何處理樣式的。

非Web平台上有大量的方法來處理佈局和樣式,我們使用React Native時,只需要用一種標準的方法來處理樣式,React和宿主平台之間的橋接包含了一個縮減版CSS子集的實現,這個CSS子集主要透過flexbox進行佈局,做到了盡量簡化,而不是去實現所有的CSS規則。有別於Web平台,CSS的支援程度因瀏覽器而不同,React Native則做到了樣式規則的一致。

6、宿主平台API

使用Web 環境的React 與React Native 最大的不同,在於宿主平台的API。

在Web 中,我們通常要處理採納標準的不一致和碎片化所引起的問題,而大多數瀏覽器只支援部分核心的特性。然而在React Native 中,平台特定的API 在提供優秀原生的使用者體驗方面發揮了巨大的作用。當然,要考慮的方面還有很多。 API 囊括了許多功能,從資料儲存到地理服務,以及操控硬體設備(如攝影機)等。非常規平台上的API 會更有趣,例如,React Native 和虛擬實境安全帽之間的API 會是什麼樣的呢?

預設情況下,iOS 和Android 版本的React Native 支援許多常用的特性,甚至可以支援任何非同步的本機API。 React Native 讓宿主平台API 的使用變得更加簡單和直觀,你可以在其中自由地試驗。同時,務必思考怎麼做才符合目標平台的體驗,並在心裡設計好互動過程。毋庸置疑,React Native 的橋接不可能暴露宿主平台全部的API。

如果你需要使用一個未支援的特性,完全可以自己動手加入到React Native 中。另外,如果其他人已經集成,那就更好了,所以應該及時查看社區中的實現。值得注意的是,使用平台API 也會對程式碼重複使用有幫助。同時,實現平台特定功能的React元件也是平台特定的。

隔離和封裝這些元件將為你的應用帶來更大的靈活性。當然,這對你開發Web 應用同樣奏效,如果你想分享React 和React Native 的程式碼,請記住像DOM 這樣的API 在React Native 中並不存在。

相關推薦:js教學

#

以上是react和react native的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板