反応と反応ネイティブの違いは何ですか-jsチュートリアル-php.cn

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

王林

リリース： 2021-01-18 17:44:15

オリジナル

15822 人が閲覧しました

反応と反応ネイティブの違いは次のとおりです: 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 では、マークアップコードはプラットフォーム固有のコンポーネントに解析されます。たとえば、は iOS では UIView として表示されます。プラットホーム。

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

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

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

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

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

UI 要素はすべて React コンポーネントであり、

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

import { DatePickerIOS } from &#39;react-native&#39;;

ログイン後にコピー

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 サイトの他の関連記事を参照してください。