logo

TechCodeview

React の Dom とは何ですか?

リアル/ブラウザ DOM:

DOMの略です 「ドキュメントオブジェクトモデル」。 これは、Web ページまたはアプリケーション内の HTML の構造化表現です。 UI全体を表します （ユーザーインターフェース） の Web アプリケーションをツリー データ構造として扱います。

それは HTML要素の構造表現 Web アプリケーションの概要を簡単に説明します。

React の Dom とは何ですか?

何らかの変化があったときは、 アプリケーション UI の状態、 DOM が更新され、変更が反映されます。アプリケーションのユーザー インターフェイスを更新するために変更が加えられるたびに DOM がレンダリングおよび操作されるため、パフォーマンスに影響を与え、パフォーマンスが低下します。

したがって、多くの UI コンポーネントと複雑な構造を持つ ドム、 変更のたびに再レンダリングする必要があるため、更新のコストが高くなります。

DOMはツリーデータ構造として構成されています。それぞれのノードで構成されます UI要素 Web ドキュメント内に存在します。

sdlc

DOM の更新:

JavaScript についてある程度の知識がある場合は、 「getElementById()」 または 「getElementByClass()」 DOM の内容を変更するメソッド。

アプリケーションの状態に変更が生じると、その変更を UI に反映するために DOM が更新されます。

Virtual DOM がどのように高速化するか:

アプリケーションに新しいものが追加されると、仮想 DOM が作成され、ツリーとして表されます。アプリケーション内のすべての要素はツリー内のノードです。

したがって、要素の位置が変更されるたびに、新しい仮想 DOM が作成されます。新しい仮想 DOM ツリーが最新の仮想 DOM ツリーと比較され、変更点が記録されます。

実際の DOM によってこれらの変更を行う可能な方法を見つけます。その後、更新された要素がページ上で再レンダリングされます。

仮想 DOM が React でどのように役立つか:

React 内のすべてのものは、コンポーネント、機能コンポーネント、クラス コンポーネントとして観察されます。コンポーネントには状態があります。 JSX ファイル内で何かを変更するたびに、簡単に言えば、コンポーネントの状態が変更されるたびに、React はその仮想 DOM ツリーを更新します。

React は毎回 2 つの仮想 DOM を維持します。最初のものには更新された仮想 DOM が含まれており、もう 1 つは更新された仮想 DOM の更新前バージョンです。更新された仮想 DOM の更新前バージョンを比較し、どのコンポーネントが変更されるかなど、DOM 内で何が変更されたかを見つけます。

非効率的に見えるかもしれませんが、仮想 DOM の更新にはそれほど時間はかからないため、コストはかかりません。

現在の仮想 DOM ツリーと以前の仮想 DOM ツリーを比較すると、次のようになります。 「反抗的」。 React は何が変更されたかを認識すると、実際の DOM 内のオブジェクトを更新します。 React はバッチ更新を使用して実際の DOM を更新します。実際の DOM への変更は、コンポーネントの状態への 1 つの変更に対する更新を送信するのではなく、バッチで送信されます。

UI の再レンダリングは最もコストがかかる部分ですが、React は、バッチ更新を受け取る Real DOM が UI を再レンダリングできるようにすることで、最も効率的に実行します。変更を実際の DOM に変換するプロセスは、 和解。

これによりパフォーマンスが向上し、開発者が React とその Virtual DOM を好む主な理由です。

React の仮想 DOM とは何ですか?

Virtual DOM の概念は、Real DOM のパフォーマンスをより良く、より高速にするために登場しました。仮想 DOM は、DOM の仮想シンボルです。

ただし、主な違いは、変更のたびに、実際の DOM ではなく仮想 DOM が更新されることです。

たとえば、 本物 そして 仮想DOM として表されます ツリー構造。 ツリー内のすべての要素がノードです。あ ノード 新しい項目がアプリケーション UI に追加されると、ツリーに追加されます。

要素の位置が変更されると、 新しい 仮想DOMツリーが作成されます。仮想 DOM 最小の操作数を計算します 実際の DOM に変更を加えるには、実際の DOM 上で。実際の DOM 全体を再レンダリングするコストと操作が削減されるため、効率的でパフォーマンスが向上します。

React の Dom とは何ですか?

これで、Real DOM と Virtual DOM について通常通り理解できました。

方法を見てみましょう 反応する を使用して動作します 仮想 DOM。

  • それぞれの UI は個別です 成分、 そしてすべてのコンポーネントにはその状態があります。
  • 反応が続きます 観察可能なパターン そして状態の変化を観察します。
  • コンポーネントの状態に変更が加えられるたびに、React 仮想 DOM ツリーを更新します しかし変化しません 実際の DOM ツリー。
  • 反応する 比較する の 現行版 の 仮想DOM とともに 前のバージョン 後 更新中。
  • React は、どのオブジェクトが変更されたかを認識します。 仮想DOM。 内のオブジェクトを置き換えます。 実際の DOM 、につながる 最小限の操作 オペレーション。
  • このプロセスは次のように知られています 「差別化」。 この写真を見るとコンセプトが明確になります。
React の Dom とは何ですか?

画像では、 濃紺 サークル は ノード 変更されたもの。の 州 これらのコンポーネントが変更されました。 React は、以前のバージョンと現在のバージョンの差を計算します。 仮想 DOM ツリー、 そして、親サブツリー全体が再レンダリングされ、変更された UI が表示されます。

更新されたツリーは、 バッチ更新されました (実際の DOM への更新は、状態変化ごとに更新を送信するのではなく、バッチで送信されます)。

これをさらに深く理解するには、次のことについて知る必要があります。 反応レンダリング() 関数。

次に、いくつかの重要なことについて知っておく必要があります。 特徴 リアクトの。

JSX

JSX を意味する JavaScript XML。 それは 構文拡張 JSの。 JSX を使用すると、次のように書くことができます。 HTML 構造 を含むファイルに JavaScript コード。

コンポーネント

コンポーネントは 独立した そして 再利用可能 コードの。 React アプリのすべてのユーザー インターフェイスはコンポーネントです。 1 つのアプリケーションに多くの機能がある コンポーネント。

コンポーネントは2種類あり、 クラスコンポーネント そして 機能コンポーネント。

クラス コンポーネントは、その「状態」を使用してユーザー インターフェイスを変更するため、ステートフルです。機能コンポーネントはステートレスなコンポーネントです。これらは、「props」と呼ばれる任意のパラメータを取る JavaScript 関数のように動作します。

反応フック 機能コンポーネントを使用して状態にアクセスするために導入されました。

ライフサイクルメソッド

ライフサイクルメソッド 重要な方法です 内蔵 DOM 内でのコンポーネントの持続時間を通じてコン​​ポーネントを操作します。 React の各コンポーネントは、イベントのライフサイクルに従って進みます。

render() メソッドが最大使用されます。 ライフサイクルメソッド 。

それが唯一の方法です React クラスのコンポーネント 。したがって、各クラスでコンポーネント render() が呼び出されます。

render()メソッド UI によってコンポーネントのレンダリングを処理します。 render() には、画面に表示されるすべてのロジックが含まれています。また、 ヌル 何も表示したくない場合は値を指定します。

以下に例を示します。 

 class Header extends React.Component{ render(){ return React Introduction } }

この例では、 JSX render()に書きます。

とき 州 または 小道具 コンポーネント内で更新されます。 与える（） React 要素の別のツリーを返します。

コンソールまたは JavaScript ファイルにコードを記述すると、次のようなことが起こります。

  • ブラウザは HTML を解析して、ID を持つノードを見つけます。
  • 要素の子要素を削除します。
  • 要素を更新します (ドム) とともに 「更新された値」。
  • 再計算します CSS 親ノードと子ノードの場合。
  • 次に、レイアウトを更新します。

最後に、画面表示上のツリーを移動します。

したがって、私たちが知っているように、 ドム 内容の変更を伴います。より愛着が湧きます。

CSS の再計算とレイアウトの変更には複雑なアルゴリズムが関与しており、パフォーマンスに影響します。

React は仮想 DOM として知られるものを使用するため、これに対処する多くの方法があります。

リアクトドーム

React-dom パッケージは、必要に応じて React モデルからルートをエスケープするためのアプリケーションのトップレベルで DOM 固有のメソッドを提供します。

 import * as ReactDOM from 'react-dom';

ES5 を npm で使用する場合は、次のようにも記述する必要があります。

 var ReactDOM = require('react-dom');

の リアクトダム パッケージには、クライアント アプリとサーバー アプリに固有のモジュールも提供されます。

  • 反応ダム/クライアント
  • 反応ダム/サーバー

React-dom パッケージは次のメソッドをエクスポートします。

  • createPortal()
  • flashSync()

React-dom メソッドもエクスポートされます。

C#の文字列比較
  • 与える （）
  • 水和物（）
  • findDOMNode()
  • unmountComponentAtNode ()

注: ハイドレートとレンダーは両方とも新しいクライアント メソッドに置き換えられました。

ブラウザのサポート

React は最新のブラウザをすべてサポートしており、古いバージョンでは一部のポリフィルが必要です。

注: Internet Explorer など、ES5 メソッドをサポートしていない古いブラウザーはサポートできません。ページに含まれている es5-shim や es5-sham などのポリフィルがあれば、アプリが最新のブラウザで動作することがわかりますが、そのパスを選択するのは自分自身です。

参照

createPortal()

Creates Portal () Portal は、DOM コンポーネントのランキングの外側に存在する DOM ノードに子を読み取る方法を提供します。

flashSync()

提供されたコールバックで React の更新を同時に強制します。これにより、DOM が即座に更新されます。

 // Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated.

注記：

  • 控えめに使用してください。フラッシュ同期はパフォーマンスに大きな悪影響を及ぼします。
  • FlushSync は保留中の境界を強制的にフォールバック状態を表示します。
  • 保留中のエフェクトを実行し、それを返す前に同時に更新を適用します。
  • flashSync は、コールバックの外側で更新をフラッシュし、コールバックの更新をフラッシュします。 例えば、 クリックによる保留中の更新がある場合、React はコールバックで更新をフラッシュする前にそれをフラッシュすることがあります。

レガシーリファレンス

与える（） 

 render(element, container[, callback])

注: Render は、React での Root の作成に置き換えられます。提供されたコンテナーで React 要素を DOM にレンダリングし、コンポーネントへの参照を返します。

React 要素が以前にコンテナにレンダリングされていた場合、その要素に対して更新が実行されるため、最新の React 要素を反映する必要があります。

オプションのコールバックが提供されている場合、コンポーネントがレンダリングされるときに実行されます。

注記：

Render() メソッドは、コンテナ ノードが通過するときにコンテナ ノードのコンテンツを制御します。既存の DOM 要素はすべて置き換えられます。

Render() はコンテナのノードを変更しません (コンテナの子のみを変更できます)。子要素を上書きせずに、既存の DOM ノードにコンポーネントを挿入できる場合があります。

Render() は現在、ReactComponent のルート インスタンスへの後方参照を行っています。

ただし、場合によっては、React の将来のバージョンでコンポーネントが非同期に生成される可能性があるため、その戻り値は継承され、回避することができます。

ReactComponent プロトタイプへの参照が必要な場合、最良の解決策は、要素にリコール参照をアタッチすることです。

レンダリングされたコンテナをサーバーにハイドレートするために使用される Render () は廃止されました。使用 水和物ルート() その代わりに。

水和物()

ハイドレートはハイドレートルートに置き換えられます。

これは render() とまったく同じですが、ReactDOMServer によって HTML コンテンツがレンダリングされるコンテナーに使用されます。 React はイベント リスナーを現在のマークアップに接続しようとします。

 hydrate(element, container[, callback])

注記：

React は、レンダリングされたコンテンツがサーバーとクライアント間で同一であることを期待します。文章の内容を修正することはできますが、不一致はエラーとして扱い、修正する必要があります。開発モードでは、React は水和中の不一致を警告します。

特定の差異の矛盾が修正されるという保証はありません。

これはほとんどのアプリケーションでパフォーマンス上の理由から重要ですが、すべてのフラグを検証するにはコストがかかりすぎます。

strをintに変換する方法

要素の属性またはテキストの内容がサーバーとクライアント間で必然的に異なると仮定します (たとえば、 タイムスタンプ ）。この場合、追加することでアラートを沈黙させることができます。 suppressHydrationWarning = {true} 要素に。

テキスト要素でない場合は、パッチを適用することができないため、将来の更新まで不整合が残る可能性があります。

サーバーとクライアントで意図的に異なるものを提供する必要がある場合は、2 パス レンダリングを実行できます。クライアントに残されたコンポーネントは this.state.isClient のような状態変数を読み取ることができ、そこで true に設定されます。 コンポーネントDidMount()。

最初のレンダー パスはサーバーと同じことを実行して不一致を回避しますが、追加のパスはハイドレーション後に同期的に作成されます。

注: この方法では、コンポーネントが 2 回実行されるため、速度が低下するため、慎重に使用してください。

 unmountComponentAtNode() unmountComponentAtNode(container)

注記：

アンマウントコンポーネントアットノード に置き換えられました root.unmount() リアクトで。マウントされた React コンポーネントを DOM から消去し、そのイベント ハンドラーと状態を消去します。

コンテナーにコンポーネントがマウントされていない場合、コンテナーは何もできません。コンポーネントがマウントされていない場合は true を返し、アンマウントするコンポーネントがない場合は false を返します。

findDOMNode()

注: findDOMNode は、基礎となる DOM ノードにアクセスするために使用されるエスケープ ハッチです。このエスケープ ハッチは、コンポーネントの抽象化を貫通するため、ほとんどの場合推奨されません。 StrictMode では非推奨になりました。

findDOMNode(コンポーネント)

このコンポーネントが DOM にマウントされている場合、対応するネイティブ ブラウザー DOM 要素が返されます。このメソッドは、フォーム フィールド値などの DOM からの値の読み取りや、DOM 測定の実行に役立ちます。ほとんどの場合、DOM ノードに参照をアタッチして、findDOMNode の使用を回避できます。

コンポーネントが null または false を返すと、findDOMNode は null を返します。コンポーネントが文字列にレンダリングされると、findDOMNode はその値を含むテキスト DOM ノードを返します。 findDOMNode が最初の空でない子に対応する DOM ノードを返した場合、コンポーネントは複数の子を持つフラグメントを返すことができます。

注記：

findDOMNode は、マウントされたコンポーネント (つまり、DOM に配置されたコンポーネント) に対してのみ機能します。まだマウントされていないコンポーネントでこれを呼び出そうとすると (まだ作成されていないコンポーネントの render() で findDOMNode() を呼び出すなど)、例外がスローされます。

findDOMNode は関数コンポーネントでは使用できません。

DOM 要素

React は、パフォーマンスとブラウザ間の互換性を確保するために、ブラウザに依存しない DOM システムを実装しています。この機会を利用して、ブラウザの DOM 実装における荒削りな部分をいくつか整理します。

React では、すべての DOM プロパティと属性 (イベント ハンドラーを含む) はキャメルケースである必要があります。たとえば、HTML の tabindex 属性は、React の tab Index 属性に対応します。

例外は、aria-* 属性と data-* 属性であり、これらは小文字である必要があります。たとえば、エリア タグをエリア タグとして使用できます。

属性の違い

いくつかの属性は React と HTML の間で動作が異なります。

チェック済み

selected 属性は、タイプ のチェックボックスまたはラジオのコンポーネントによってサポートされます。制御されたコンポーネントの製造に役立ちます。これを使用して、コンポーネントがチェックされているかどうかを判断できます。

DefaultChecked は、コンポーネントが初めてマウントされるときにチェックされることを決定する未チェックの対応物です。

クラス名

CSS クラスを指定するには、className 属性を使用します。これは、 のようなすべての通常の DOM および SVG 要素に適用されます。 、など。

Web コンポーネントで React を使用する場合 (一般的ではありません)、代わりに class 属性を使用してください。

危険なほどSetInnerHTML

危険なことに、SetInnerHTML は、DOM ブラウザで innerHTML を使用するための React の代替品です。ユーザーがクロスサイト スクリプティング (XSS) 攻撃にさらされやすいため、HTML コードの構成には危険が伴います。

したがって、React から HTML を直接設定できますが、危険であることを覚えておくために、SetInnerHTML と入力し、__html キーを含むオブジェクトを渡す必要があります。

例えば：

 function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor

for は JavaScript の予約語であるため、React 要素は代わりに htmlFor を使用します。

onChange

onChange イベントは期待どおりに動作します。このイベントは、フォームフィールドが変更されるたびに発生します。

既存のブラウザーの動作は意図的に使用しません。これは、ブラウザーの動作の変更が大きく、React はイベントに依存してユーザー入力をリアルタイムで処理するためです。

選択された

を選択済みとしてマークしたい場合は、代わりに の値内のそのオプションの値を参照してください。詳細な手順については、「タグの選択」を参照してください。

注記：

最大の場合、クラス名は外部 CSS スタイル シートで定義されたクラスを参照します。スタイルは React アプリで使用され、レンダリング時に計算されたスタイルを追加します。 style 属性は、CSS 文字列の代わりに、camel プロパティを持つ JavaScript オブジェクトを受け入れます。

適合します DOM スタイル JavaScript プロパティはより効率的であり、 XSS セキュリティホール。

例えば： 

 const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; }

スタイルには自動接頭辞が付けられないことに注意してください。古いブラウザをサポートするには、スタイル プロパティを提供する必要があります。

 const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; }

スタイル キーは、JS 内から DOM ノードのプロパティへのアクセスに対応するラクダです。プロバイダーのプレフィックス MS は大文字で始まります。

React は、一部のインライン数値スタイル プロパティに「px」接尾辞を自動的に追加します。 「px」以外の単位を使用する場合は、希望の単位を含む文字列として値を指定します。

例えば： 

 // Result style: '10px' Hello World! // Result style: '10%' Hello World!

ただし、すべてのスタイル プロパティがピクセル文字列に変換されるわけではありません。

編集可能なコンテンツのアラートを抑制する

子要素に対するコンテンツが編集可能としてマークされている場合、機能しないため、警告が表示されます。この属性は警告を抑制します。

抑制の警告

サーバー側の React レンダリングを使用する場合、サーバーとクライアントが異なるコンテンツでレンダリングすると警告が表示されます。ただし、まれに完全に一致することを保証するのは困難です。たとえば、タイムスタンプはサーバーまたはクライアントで異なることが予想されます。

抑制警告を true に設定すると、要素の属性とコンテンツの間の不一致については警告されません。

これは 1 レベルの深さでのみ機能し、エスケープとして使用することを目的としていました。

アナログ通信

価値

value 属性は、 および コンポーネントによって設計されます。これを使用してコンポーネントの値を設定できます。

制御されたコンポーネントの製造に役立ちます。 [defaultValue] および [チェックなし] に等しいと、シリアルにマウントされた場合のコンポーネントの値が設定されます。

サポートされているすべての HTML 属性

カスタムおよび標準の DOM 属性がサポートされています。

React は、DOM で JavaScript 中心の API を提供しました。また、React コンポーネントにはカスタム プロパティや DOM 関連のプロパティが含まれることが多く、React は DOM API と同じ CamelCase 規則を使用します。

 // Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API