反応と反応ネイティブの違いは何ですか

反応と反応ネイティブの違いは次のとおりです: 1. フレームワークが動作するプラットフォームが異なります; 2. 動作原理が異なります; 3. レンダリング サイクルが異なります; 4. 反応ネイティブのすべての要素;5. ホスト プラットフォームの API は異なります。

#この記事の環境：Windows10、react16バージョン、Dell G3コンピューター。

(学習ビデオ共有:

react ビデオ チュートリアル)

違いは次のとおりです:

1. フレームワークで使用されるプラットフォームが異なります

RN React から派生したもので、どちらのフレームワークも JSX 開発構文を使用しますが、RN は真にネイティブにレンダリングされる iOS および Andriod モバイル アプリケーションの開発に使用される JS フレームワークであるのに対し、React はレンダリング プラットフォームとしてブラウザを使用します。

2. 動作原理の違い

仮想 DOM は、開発者によって記述されたビューと、ページ上に実際にレンダリングされるビューとの間にあります。ブラウザ上でインタラクティブなユーザー インターフェイスをレンダリングしたい場合、開発者はブラウザのドキュメント オブジェクト モデルを操作する必要がありますが、この部分の操作で消費されるパフォーマンスを節約するために Virtual DOM が登場しました。

しかし、Virtual DOM の大きな可能性はこの抽象化レイヤーにあり、多くの可能性をもたらします。

React Native の動作原理は、DOM にレンダリングするのではなく、Objective-C API を呼び出して iOS コンポーネントをレンダリングし、Java API を呼び出して Android コンポーネントをレンダリングすることです。ブリッジングにより、React はホスト プラットフォームによって開かれた UI コンポーネントを呼び出すことができ、React コンポーネントは render メソッドを通じてインターフェイスを記述するマークアップ コードを返します。 Web プラットフォームの場合、React は最終的にマークアップ コードを解析してブラウザの DOM に入れます。React Native では、マークアップ コードはプラットフォーム固有のコンポーネントに解析されます。たとえば、548e7793df275d156d270cdda504ba19 は iOS では UIView として表示されます。プラットホーム。

3. レンダリング サイクル

React のレンダリング サイクルは、react コンポーネントが DOM にマウントされた後に開始され、その後 React はレンダリング サイクルに入り、必要に応じてコンポーネントをレンダリングします。レンダリング フェーズでは、React は開発者から返された HTML タグをオンデマンドでページに直接レンダリングします。

React Native のライフ サイクルは基本的に React と同じです。レンダリングの点では、React Native はブリッジングに依存しており、UI メイン スレッドで実行されないため、ユーザー エクスペリエンスに影響を与えることなくこれらの非同期呼び出しを実行できます。 。

4. コンポーネントの作成

Web 環境用に React を作成する場合、ビューは最終的に通常の HTML 要素にレンダリングされる必要があります。React Native では、すべての要素はプラットフォーム React によって指定されます。コンポーネントの置換。たとえば、iOS では 548e7793df275d156d270cdda504ba19 コンポーネントは UIView としてレンダリングされますが、Android プラットフォームでは View としてレンダリングされます。

UI 要素はすべて React コンポーネントであり、dc6dce4a544fdca2df29d5ac0ea9906b のような基本的な HTML 要素ではないため、各コンポーネントを使用するときは、たとえば:

import { DatePickerIOS } from 'react-native';

5 のように明示的にインポートする必要があります。

Web では、CSS スタイルを使用して React コンポーネントにスタイルを追加することは、開発プロセスの中ですでにアクセスできない部分になっています。 React は通常、CSS の記述方法に影響を与えず、スタイルの動的な作成を (state と props を介して) 簡単にしますが、それ以外では、React は基本的にスタイルの処理方法を気にしません。

非 Web プラットフォームでは、レイアウトとスタイルを処理する方法が多数あります。React Native を使用する場合、スタイルを処理するために標準的な方法を使用するだけで済みます。React とホスト プラットフォーム間のブリッジ主にフレックスボックスを介してレイアウトされる CSS サブセットの実装は、すべての CSS ルールを実装するのではなく、可能な限り単純です。 CSS サポートのレベルがブラウザごとに異なる Web プラットフォームとは異なり、React Native は一貫したスタイル ルールを実現します。

6. ホスト プラットフォーム API

Web 環境を使用した React と React Native の最大の違いは、ホスト プラットフォームの API にあります。

Web では、標準の採用が一貫性がなく断片化しているために発生する問題に対処しなければならないことがよくありますが、ほとんどのブラウザは一部のコア機能しかサポートしていません。ただし、React Native では、プラットフォーム固有の API が優れたネイティブ ユーザー エクスペリエンスを提供する上で大きな役割を果たします。もちろん、考慮すべき点は他にもたくさんあります。この API は、データ ストレージからジオサービス、カメラなどのハードウェア デバイスの制御に至るまで、多くの機能をカバーしています。型破りなプラットフォーム上の API はさらに興味深いものになるでしょう。たとえば、React Native と仮想現実ヘッドセットの間の API はどのようなものになるでしょうか?

デフォルトでは、React Native の iOS および Android バージョンは、一般的に使用される多くの機能をサポートしており、非同期ネイティブ API もサポートできます。 React Native を使用すると、ホスト プラットフォーム API の使用がより簡単かつ直感的になり、自由に実験できるようになります。同時に、ターゲット プラットフォームのエクスペリエンスにどのように適合させるかを考え、インタラクション プロセスを頭の中で設計するようにしてください。言うまでもなく、React Native のブリッジはホスト プラットフォームのすべての API を公開できるわけではありません。

サポートされていない機能を使用する必要がある場合は、それを自分で React Native に追加できます。また、他の人がすでに統合している方がよいため、コミュニティでの実装をタイムリーにチェックする必要があります。プラットフォーム API を使用すると、コードの再利用にも役立つことに注意してください。同時に、プラットフォーム固有の機能を実装する React コンポーネントもプラットフォーム固有です。

これらのコンポーネントを分離してカプセル化すると、アプリケーションの柔軟性が高まります。もちろん、これは Web アプリケーションを開発する場合にも機能しますが、React と React Native の間でコードを共有したい場合は、DOM などの API が React Native に存在しないことに注意してください。

関連する推奨事項: js チュートリアル

以上が反応と反応ネイティブの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。