Home >> Blog >> 什麼是 React Native？值得使用嗎？

什麼是 React Native？值得使用嗎？

介紹

React Native是一個移動應用程式開發框架，支持使用原生 UI 元素開發多平台 Android 和 iOS 應用程式。它基於 JavaScriptCore 運行時和 Babel 轉換器。通過這種設置，RN 支持新的 JavaScript (ES6+) 特性，例如箭頭函數、異步/等待等。

這個著名的移動應用程式開發框架始於 2013 年夏天，當時是 Facebook 的內部黑客馬拉松項目。它的第一個公開預覽版於 2015 年 1 月在 Reactjs 會議上發布，2015 年 3 月，Facebook 將 React Native 開放並在 GitHub 上可用。

從那時起，由於它能夠生成原生應用程式和出色的用戶界面，它已被開發人員和組織廣泛採用。在下圖中，您可以直觀地看到 React Native 的增長趨勢。在發布後僅 1.5 年，它就超越了 Android 和 iOS 開發。

所以現在，您不應該對我們今天使用的許多應用程式的業務邏輯主要使用 JavaScript 而不是 Java/Kotlin 或 Objective-C/Swift 構建的事實感到驚訝。其中一些是 Myntra、UberEats、Facebook 和 Instagram。

既然我們談到了什麼是 React Native，你可能會對“原生應用”的含義感到困惑。

什麼是原生移動應用程式？

本機移動應用程式是專門為操作系統創建的應用程式，在這種情況下是 Android 或 iOS。為了在 iOS 上構建原生應用，例如我們要設計一套SEO排名手機app，我們使用 Objective-C/Swift 開發語言，而對於 Android，我們使用 Java/Kotlin。

來到 React Native，最終的用戶界面不會簡單地在 WebView 中呈現 Web 組件。用戶界面是使用實際的原生視圖和基本構建塊呈現的，這些構建塊與使用 Swift 或 Java 構建的應用程式沒有區別。

什麼是反應 JS？

在深入了解什麼是 React Native 之前，我們先來了解一下什麼是 React JS：

• 它是由 Facebook Open Source 創建的 JavaScript 庫
• 它是一個用戶界面 (UI) 庫
• 它是用於構建 UI 組件的工具

React Native 類似於 React JS，但是，它利用原生組件而不是 Web 組件作為關鍵構建塊。您必須了解 React 基本思想的一部分，例如 JSX(JavaScript XML)、組件、狀態和道具，才能掌握 React Native 應用程式的基本結構。

但是，如果您對使用 React Native 構建應用程式感興趣，那麼學習 React JS 並不是強制性的，您可以簡單地從 React Native 開始。

什麼是 React Native？

我們在文章開頭已經部分回答了這個問題。但是，我們沒有解決其架構的任何技術方面。在本節中，我們將重點介紹 React Native 的工作原理。

讓我們從查看默認的 React Native 應用程式開始，如下所示。

從“反應”導入反應；

從'react-native'導入{文本，視圖}；

導出默認類 Brainhub 擴展 React.Component {

render() {

return (

什麼是 React Native

);
}
}

為什麼它看起來不像標準的 JavaScript 語法

如果你是一個只熟悉舊的 JS 標準的 web 開發者，那麼上面的程式碼片段的一部分在你看來可能不像 JavaScript。ES2015（也稱為 ES6）是對 JavaScript 的大量增強，目前是官方標準的一部分。舊版瀏覽器不支持 ES6，這就是為什麼需要使用像 Babel 這樣的轉譯器。

多虧了 Babel 轉譯器，React Native 支持JavaScript ES2015的許多特性，所以你可以使用這項技術而不必強調它與不同設備的兼容性。給定程式碼段中 ES2015 的一些特性是 import、from 和 class。如果您對 ES2015 不滿意，您可以通過查看資源部分下列出的資源中的示例程式碼來學習它。

這就是 JSX，一種在 JavaScript 中封裝 XML 的語法。它允許您在標記語言中編寫程式碼。它看起來像我們在 Web 開發中使用的 HTML，但不是使用 或者，您將使用 React Native 組件。這裡，是一個內置組件，只顯示一些內容，View 類似於或。

關於 React Native 組件的幾句話

這是顯示“什麼是 React Native”的示例。這行文本充當一個組件。你在屏幕上看到的任何東西都是一種組件。這真的很簡單。主要需要的是一個渲染函數，它返回一些 JSX 來渲染。

當我們將 React Native 應用程式合成到 Android 或 iOS 應用程式時，每個這樣的組件都映射到原生構建塊。就像在這種情況下映射到在 Android 中，在 iOS 中使用 UILabel。

React Native 值得使用嗎？

與任何其他技術一樣，React Native 也有其優點和缺點。在您決定 React Native 是否適合您的特定項目之前，請查看下面的備忘單。

React Native 的優點：

#1 節省時間

該系統的主要優點是節省時間。最初，它使開發人員無需在每次更改時重新編譯，因為應用程式會在改進階段立即重新加載。Android 設計師可以理解這種折磨。

#2 更容易

該框架支持製作可用於 iOS 和 Android 的單獨程式碼庫。它使工程師能夠在編寫程式碼上投入更少的精力。

#3 用戶體驗

使用此框架構想的移動應用程式可確保高質量、出色的執行和簡化的用戶體驗。

#4 一個生態系統

除此之外，一個全能的 JavaScript 工程師可以利用這個框架開發一個多功能的應用程式，而無需深入了解每個操作系統的生態系統和語言細節。

#5 用戶界面

由於與本地條件的異步 JavaScript 連接，隨後的用戶界面響應速度非常快，並且感覺很流暢。

#6 快速

這意味著該應用程式將比使用混合模型構建的應用程式具有更快的加載時間和更流暢的感覺。

React Native 的缺點：

#1 調試

調試從 React Native 構建的應用程式是一個複雜的過程。您將不得不研究 React Native 生成​​程式碼的方式並決定如何對其採取行動。

#2 配置

有時，React Native 應用程式中的本地庫協調需要大量配置。例如，Google Maps 大綱變成了一項長期工作，而在 Android Native 應用程式上需要一點時間。

React Native 的競爭對手

Ionic 和 Cordova 是用於類似目的的其他一些框架。他們製作所謂的混合應用程式。這些是使用標準 Web 創新創建的，並封裝在 WebView 等原生基礎組件中。一點也不像 React Native，因此它是原生開發的真正覆蓋。

正如我們已經提到的，React Native 使用原生構建塊，而不是操作系統的覆蓋。事實上，JavaScript 組成的程式碼被合成為本機程式碼（基本構建塊）。因此，我們最終得到了一個使用完全由 JavaScript 線程控制的原生組件的應用程式，而不是放置在 WebView 組件中的 Web 應用程式。

Cordova 或 Ionic生成的圖形界面通過 Web 視圖顯示，這提高了其生產力和質量以及客戶體驗。使用這種技術構建的應用程式缺乏原生 UX 費用。

概括

在本文中，我們看到 React Native 與 React 類似，React 本身就是一個用於製作接口的 JavaScript 庫。因此，您需要掌握 JavaScript、JSX 甚至類似於 CSS 的樣式表語法等 Web 技術來進行組件定制。儘管有一些複雜性，React Native 框架還是輕而易舉地通過了每一個測試和障礙，最終成為許多開發人員的首選。