web-dev-qa-db-ja.com

React Nativeには「仮想DOM」がありますか?

ReactJS wiki Virtual DOMに関するページから:

Reactは、メモリ内データ構造キャッシュを作成し、結果の差異を計算してから、ブラウザーに表示されるDOMを効率的に更新します。これにより、プログラマーは、変更ごとにページ全体がレンダリングされるかのようにコードを記述できますが、Reactライブラリは実際に変更されるサブコンポーネントのみをレンダリングします。

つまり、仮想DOMを使用すると、DOMで直接操作することを避けてパフォーマンスを向上させることができます。

しかし、 React Native についてはどうですか?

理論上、他のプラットフォームにはネイティブビューとUIコンポーネントがあることがわかっています。 DOM自体には何もありません。 だから、React Nativeはそこに「仮想DOM」を持っているのか、それとも何か他のものについて話しているのか?

たとえば、DOMツリーを直接操作する方法を説明する Weex 仕様には section があります。そして、私の想定では、潜在的にReact Nativeは何らかの種類のDOMツリーだけでなく、React自体。

だから私の質問は:

React Nativeには何らかの「仮想DOM」(またはその表現)があり、もしそうなら、この「仮想DOM」はさまざまなプラットフォームにどのように移植されますか?

UPDATE:

この質問の目標は、どのようにReactネイティブUIコンポーネントのレンダリングをネイティブ管理しますか。具体的なアプローチはありますか。

更新2:

この記事 は、新しいReactアーキテクチャと呼ばれる Fiber この質問に対する答えのように見えます)について説明しています。

34
oleh.meleshko

要するに

ええ、基本的に、はい、Reactjsの仮想DOMと同様に、React-Nativeはツリー階層を作成して初期レイアウトを定義し、各レイアウト変更でそのツリーの差分を作成してレンダリングを最適化します。 React-Nativeを除き、いくつかのアーキテクチャレイヤーを通じてUIの更新を管理します。これは、最終的にビューをレンダリングする方法を変換し、可能な限り高速なレンダリングを実現するために変更を最小限に最適化しようとします。

より詳細な説明

React Nativeがバックグラウンドでビューを作成する方法を理解するためには、基本を理解する必要があります。そのためには、ゼロから始めたいと思います。

1.ヨガレイアウトエンジン

Yoga は、Cで記述されたクロスプラットフォームレイアウトエンジンで、Flexboxネイティブビューへのバインディングを通じて(Java Android Views/Objective-C iOS UIKit)

React-Nativeのさまざまなビュー、テキスト、画像のレイアウト計算はすべてヨガを介して行われます。これは基本的に、ビューが画面に表示される前の最後のステップです

2.シャドウツリー/シャドウノード

React-nativeがレイアウトをレンダリングするコマンドを送信すると、シャドウノードのグループが組み立てられ、レイアウトの可変ネイティブサイドを表すシャドウツリーが構築されます(つまり、対応するネイティブ言語で記述されたJava for Android and iOSのObjective-C)は、(ヨガを使用して)画面上の実際のビューに変換されます。

3. ViewManager

ViewMangerは、JavaScriptから送信されたビュータイプをネイティブUIコンポーネントに変換する方法を知っているインターフェイスです。 ViewManagerは、シャドウノード、ネイティブビューノードを作成し、ビューを更新する方法を知っています。 React-Nativeフレームワークには、ネイティブコンポーネントの使用を可能にする多くのViewManagerがあります。たとえば、いつか新しいカスタムビューを作成してリアクティブネイティブに追加する場合、そのビューはViewManagerインターフェイスを実装する必要があります

4. UIManager

UIManagerは、パズルの最後のピース、または実際には最初のピースです。 JavaScript JSXの宣言的なコマンドは、命令を段階的に繰り返してビューをレイアウトする方法をReact-Nativeに指示する命令型コマンドとしてネイティブに送信されます。したがって、最初のレンダリングとして、UIManagerはコマンドをディスパッチして必要なビューを作成し、アプリのUIが時間とともに変化するにつれて更新差分を送信し続けます。

そのため、React-Nativeは基本的にReactjsの機能を使用して、以前と現在のレンダリング表現の違いを計算し、それに応じてイベントをUIManagerにディスパッチします。

このプロセスについてもう少し詳しく知るために、以下をお勧めします プレゼンテーション by EmilSjölander React-Native EU 2017 Conference in Wroclaw

24
Samer Murad

これがあなたの質問に対する答えかどうかはわかりませんが、 公式React docs:

Reactは、レンダリングされたUIの内部表現を構築および維持します。これには、コンポーネントから返されるReact要素が含まれます。この表現により、React JavaScriptオブジェクトの操作。「仮想DOM」と呼ばれることもありますが、React Native。

ですから、はい、React.jsで使用されているものと非常によく似た内部表現を管理しています。それから、Javascript APIを使用して あなたが読んだ記事 のようにネイティブビューをレンダリングすると思います。

[〜#〜] edit [〜#〜]この投稿 提供 Sebas React(およびReact Native)チームのメンバーは次のように述べているため、コメントも興味深いものです。

React Nativeは、ReactJSは常に「仮想DOM」(一般的な信念に反して)よりも「ゼロDOM」に近いことを示しています。

いわゆる「React virtual DOM」は、HTML DOMよりもさまざまなテクノロジーにマッピングできる要素の内部構造/表現に非常に近いようです。

4
César Landesa

この記事 は新しいReactアーキテクチャと呼ばれる Fiber について説明します。Reactネイティブまたは少なくとも何Reactネイティブは近い将来達成しようとしています。

DOMは、レンダリング環境の1つにすぎませんReact=はレンダリングできます。他の主要なターゲットはネイティブiOSで、AndroidビューはReactネイティブ(これが、「仮想DOM」が少し間違った名前である理由です。)

非常に多くのターゲットをサポートできる理由は、Reactは調整とレンダリングが別々のフェーズになるように設計されているためです。調整サーバーはツリーのどの部分が変更されたかを計算します。レンダリングされたアプリを実際に更新するための情報。

この分離は、React DOMおよびReact Nativeは、Reactコア。

ファイバーは調整子を再実装します。

3
oleh.meleshko

過度に単純化したものを次に示します。ReactJSは、ブラウザーにレンダリングできるDOMを出力します。既にご存じのように、仮想DOMは、ReactJSが変更内容のデルタを効率的に追跡するのに役立ちます。 React iOSのネイティブ、最終的にUIKitコードを出力します。React Androidのネイティブと同じですが、DOMまたはUI Kitを出力する代わりに、出力はAndroid SDKsを使用して作成されます。したがって、仮想DOMは単なる中間ステップです。ボタンとテキストボックスをレンダリングする場所を説明するデータを保持する内部データ構造の組み合わせと見なすことができますボタンなどのタブを押すと、何が変更されたかを追跡する効率的なアルゴリズムが発生します。すべてのプラットフォームで同じコードを使用できます。最終ステップのみが異なります。プラットフォームによって、DOMを生成するコードがあります。 UIKitコード、または任意の名前Android UI libが呼び出されます。

1