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 はプロパティ名にキャメルケースを使用します (例: font-size の代わりに fontSize)。
   • 値の単位: React Native では、幅、高さ、fontSize などのプロパティに単位は必要ありません。寸法は密度に依存しないピクセル単位であると自動的に想定されます。
2. StyleSheet API: React Native は、スタイル オブジェクトを作成するための StyleSheet.create() メソッドを提供します。この API は、レンダリングのたびにスタイル オブジェクトを再作成する必要性を減らすことでパフォーマンスを向上させます。
3. スタイル アプリケーション: クラス名を使用してスタイルを適用できる React とは異なり、React Native は style prop を使用してコンポーネントにスタイルを直接適用します。
4. 制限付き CSS サブセット: React Native は、さまざまなレイアウトに適した CSS プロパティに重点を置いて、CSS プロパティのサブセットのみをサポートします。これは、一部の Web 固有のプロパティ (float など) が使用できない一方で、その他のプロパティ (flex など) は異なる動作をする可能性があることを意味します。

ライブラリとツール

類似点

React と React Native は多くのコア ライブラリを共有します。 Redux、MobX などの同じ状態管理ライブラリと、Axios や Fetch API などのデータ取得ライブラリを使用できます。

違い

ナビゲーション: React では通常、Web ナビゲーションに React Router を使用しますが、React Native には独自の React Navigation ライブラリがあります。これは、React (Web) が通常、現在の URL パスに基づいてさまざまなコンポーネントがレンダリングされる URL ベースのナビゲーションを使用するためです。一方、React Native はスタックベースのナビゲーションを使用し、ネイティブのモバイル アプリのエクスペリエンスを模倣します。画面は互いに「スタック」され、トランジションによって新しい画面がスタックにプッシュされるか、新しい画面が「ポップ」されます。

?注: アプリを構築するときは、フォルダーに「Pages」ではなく「Screens」という名前を付けることを忘れないでください。

テスト: の概念は両方のライブラリで同様であり、コンポーネントのレンダリングとイベント シミュレーションに重点を置いていますが、特定のテスト ライブラリは異なります。 React は React Testing Library を使用し、React Native は React Native Testing Library (RNTL) を使用しますが、RNTL は React Test Renderer の上に軽いユーティリティ関数を提供しているだけなので、先延ばしにしないでください。

?一部の React ライブラリは、DOM の依存関係により、すべての React Native プラットフォームと互換性がない場合がありますが、すべてのライブラリのプラットフォーム互換性は (https://reactnative.directory)

で確認できます。

ユニバーサル React アプリでギャップを埋める

まだ迷っているなら、Universal React Apps の台頭は、React と React Native の間のギャップをさらに縮めている、本当にエキサイティングな分野です。通常、react-native-web を利用したユニバーサル React ライブラリとツールを使用すると、共有 React Native コードベースから iOS、Android、Web 上で実行されるクロスプラットフォーム アプリケーションを作成できます。これにより、ナビゲーション、スタイル設定、状態管理、ビジネス ロジックを共有できるため、各デバイス タイプ固有の規則を尊重しながら時間と労力を節約できます。

DOM とデバイスの間の境界線が曖昧になり続ける中、React Native を採用することで、マルチプラットフォーム アプリ開発のエキサイティングな世界への扉が開かれます。

始める準備ができたら、私のお気に入りのリソースのコメントをチェックするか、以下のコメントをチェックしてください ⬇️

以上がReact から React Native への旅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。