從 React 到 React Native 的旅程

Als React-/JS-Entwickler hatten Sie wahrscheinlich schon einmal den Gedanken „Soll ich React Native lernen?“ Das ist eine berechtigte Frage, die ich mir auch vor ein paar Jahren gestellt habe . Es stellte sich heraus, dass es definitiv die richtige Entscheidung war, React Native zu lernen. Das hat mir meine Rolle als Sr. Developer Advocate bei Amazon beschert, wo ich jetzt React Native verwende, um Apps für Android-, Fire TV- und Tablet-Geräte zu erstellen.

Wenn Sie überlegen, ob Sie über Web-Apps hinausgehen sollen, finden Sie hier einige Gedanken dazu, warum es sich lohnt, darüber nachzudenken:

Warum React Native lernen?

• Die Philosophie „Einmal lernen, überall schreiben“ geht über iOS und Android hinaus – sie umfasst jetzt Plattformen wie tvOS, VisionOS und sogar Desktop-Umgebungen wie React-Native-Macos

• Branchenrelevanz: Große Unternehmen wie Amazon, Meta und Microsoft setzen alle auf React Native. Warum? Wiederverwendbarkeit des Codes, kostengünstig und ermöglicht die plattformübergreifende Entwicklung.

• Starke Community-Unterstützung: React Native hat über 100.000 Sterne und 24.000 Forks auf GitHub, mit regelmäßigen Updates und aktiver Entwicklung.

• Hohe Entwicklerzufriedenheit: Laut der State of React Native Survey würden 90 % der Entwickler React Native wieder verwenden!

• Einheitliches Ökosystem: Die React Native-Community versammelt sich rund um die Expo, was zu schnelleren Verbesserungen, gut integrierten Bibliotheken von Drittanbietern und reichlich gemeinsamen Ressourcen führt.

• Vertraute Entwicklererfahrung

React vs. React Native: Ähnlichkeiten und Unterschiede

Architektur und Kompilierung

Ähnlichkeiten:

Beide verwenden einen Abstimmungsprozess, der oft als „virtuelles DOM“ bezeichnet wird. Dieser Prozess vergleicht einen Baum mit einem anderen, um zu bestimmen, welche Teile der Benutzeroberfläche aktualisiert werden müssen. Aus diesem Grund unterstützen beide eine schnelle Aktualisierung, sodass Sie Änderungen an der Benutzeroberfläche in Echtzeit sehen können.

Unterschiede:

React wird zum Rendern in Webbrowsern kompiliert und nutzt dabei das DOM und die Web-APIs. Auch wenn der Zugriff über mobile Browser erfolgt, sind die Funktionen des Browsers und der eingeschränkte Zugriff auf native Gerätefunktionen immer noch eingeschränkt.

React Native hingegen kompiliert zu nativem Code und ermöglicht so den direkten Zugriff auf plattformspezifische APIs und Funktionen. Das bedeutet, dass React Native-Apps Gerätefunktionen wie Kamerazugriff und Push-Benachrichtigungen nutzen können und so ein natives Benutzererlebnis bieten. Aus diesem Grund verfolgt es einen anderen Ansatz für seine Architektur, die sogenannte „brückenlose“ Architektur, und verwendet anstelle des DOM native Komponenten. Es verwendet Turbo Native-Module und nutzt eine JavaScript-Schnittstelle (JSI), die eine direkte Kommunikation zwischen JavaScript und nativem Code ermöglicht. Diese Architektur ist neu und Sie hören möglicherweise den Begriff „neue Architektur“. Wenn Sie daran interessiert sind, mehr zu erfahren, habe ich dies in einem früheren Artikel behandelt.

JSX und Hooks

Ähnlichkeiten

Beide verwenden JSX zur Beschreibung der Benutzeroberfläche und unterstützen React-Hooks (useState, useEffect usw.). Dadurch können Sie einen konsistenten Codierungsstil und Statusverwaltungsansatz in beiden Bibliotheken beibehalten.

Komponenten

Ähnlichkeiten

Sowohl React als auch React Native folgen einer komponentenbasierten Architektur und Komponenten folgen den gleichen Lebenszyklusmethoden unter der Haube.

Unterschiede:

1. Komponentenimporte: In React Native importieren Sie UI-Komponenten aus React-Native, im Gegensatz zu React, wo HTML-Elemente global verfügbar sind. Dieser Unterschied ist tatsächlich einer meiner Lieblingsaspekte bei React Native, da Sie sofort Zugriff auf eine Reihe vorgefertigter Komponenten haben, z. Ansicht, Text, Bild, TextInput, ScrollView.
2. Plattformspezifische Komponenten: React Native bietet auch sofort einsatzbereite Komponenten und APIs, die auf iOS und Android zugeschnitten sind.
3. Textverarbeitung: In React Native muss der gesamte Text in ein Komponente, anders als in React, wo Text direkt in vielen Elementen platziert werden kann. Dies gewährleistet den richtigen Stil und das richtige Verhalten des Textes auf verschiedenen Plattformen und verbessert die Konsistenz und Zugänglichkeit.
4. Ereignisbehandlung: React verwendet onClick für Klickereignisse, während React Native onPress für Berührungsinteraktionen verwendet, was die unterschiedliche Natur von Interaktionen widerspiegelt.

造型

相似之處

React 和 React Native 都提供了靈活的元件樣式設定方法。它們都支援內聯樣式，允許您將樣式直接套用於元件。此外，兩者都可以建立可重複使用的樣式物件。

差異

1. 樣式語言：React 通常使用 CSS 或 CSS-in-JS 函式庫進行樣式設計，而 React Native 使用基於 JavaScript 物件的樣式系統，但有些差異：
   • 屬性名稱：React Native 使用駝峰命名法作為屬性名稱（例如，fontSize 而非 font-size）。
   • 值單位：在 React Native 中，您不需要寬度、高度或 fontSize 等屬性的單位，它會自動假定尺寸以與密度無關的像素為單位。
2. StyleSheet API：React Native 提供了 StyleSheet.create() 方法來建立樣式物件。此 API 透過減少在每次渲染上重新建立樣式物件的需要來提高效能。
3. 樣式應用：與 React 中可以使用類別名稱來套用樣式不同，React Native 使用 style 屬性將樣式直接套用到元件。
4. 有限的 CSS 子集：React Native 僅支援 CSS 屬性的子集，重點放在那些對不同佈局有意義的屬性。這意味著某些特定於 Web 的屬性（如 float）不可用，而其他屬性（如 flex）可能表現不同。

庫和工具

相似之處

React 和 React Native 共用許多核心函式庫。您可以使用相同的狀態管理庫（如 Redux、MobX）以及資料獲取庫（如 Axios 或 Fetch API）。

差異

導航：雖然在 React 中您通常可能使用 React Router 進行 Web 導航，但 React Native 有自己的 React 導航庫。這是因為 React (Web) 通常使用基於 URL 的導航，其中根據當前 URL 路徑呈現不同的元件。而 React Native 使用基於堆疊的導航，模仿本機行動應用程式體驗。螢幕彼此「堆疊」在一起，透過過渡將新螢幕推入堆疊或「彈出」它們。

？注意：在建立應用程式時，請記住將資料夾命名為“Screens”而不是“Pages”。

測試：兩個庫的概念仍然相似，側重於組件渲染和事件模擬，但具體的測試庫有所不同。 React 使用 React 測試函式庫，而 React Native 您將使用 React Native 測試函式庫（RNTL），但不要推遲，因為 RNTL 只是在 React 測試渲染器之上提供輕量級實用函數。

？由於 DOM 依賴關係，某些 React 程式庫可能無法與所有 React Native 平台相容，但您可以在以下位置檢查所有程式庫的平台相容性：(https://reactnative.directory)

透過通用 React 應用程式縮小差距

如果您仍持觀望態度，那麼通用 React 應用程式的興起確實是一個令人興奮的空間，它進一步縮小了 React 和 React Native 之間的差距。通用 React 程式庫和工具通常由 react-native-web 提供支持，使您能夠從共享的 React Native 程式碼庫建立在 iOS、Android 和 Web 上運行的跨平台應用程式。這使您可以共享導航、樣式、狀態管理和業務邏輯，從而節省時間和精力，同時尊重每種設備類型的獨特約定。

因此，隨著 DOM 和設備之間的界限不斷模糊，擁抱 React Native 為令人興奮的多平台應用程式開發世界打開了大門！

如果您準備好開始，請查看我最喜歡的資源的評論或在下面評論您的資源⬇️

以上是從 React 到 React Native 的旅程的詳細內容。更多資訊請關注PHP中文網其他相關文章！