リアクトダムは何をするのですか?

「react-dom」の機能は、仮想 DOM をドキュメントにレンダリングして実際の DOM に変換することです。「react-dom」は、反応プロジェクトを開発するときに使用する必要があるツールキットです。は、アプリケーションのトップレベルで使用できる DOM 固有のメソッドを提供します。また、React モデルの外部で特別な DOM 操作を行うためのインターフェイスとしても使用できます。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react-dom の役割とは何ですか

React を使用して Web ページを開発する場合、2 つのパッケージがダウンロードされます。1 つは React で、もう 1 つは React パッケージです。 React のコアコードである React-dom は、React から DOM 操作に関連する部分を取り除いたものです。

react の核心は仮想 DOM であり、React には仮想 DOM を生成する関数 act.createElement と Component クラスが含まれています。コンポーネントを自分でカプセル化する場合、ライフサイクル関数などを使用するために Component クラスを継承する必要があります。 React-dom パッケージの中核となる機能は、これらの仮想 DOM をドキュメントにレンダリングし、実際の DOM に変換することです。

react-dom は、react プロジェクトを開発するときに使用する必要があるツールキットで、主に Web 側でのレンダリングに使用される dom のプラットフォーム実装です。 React-dom パッケージは、アプリケーションのトップレベルで、または React モデルの外部で DOM に対する特別な操作を行うためのインターフェイスとして使用できる DOM 固有のメソッドを提供します。

react-dom には主に、findDOMNode、unmountComponentAtNode、render の 3 つの API が含まれています。以下、発動順に紹介します。

1. render

render は、React によってレンダリングされた仮想 DOM をブラウザ DOM にレンダリングするために使用され、通常はトップレベルのコンポーネントで使用されます。このメソッドは、要素をコンテナにマウントし、要素のインスタンス (つまり、refs 参照) を返します。ステートレス コンポーネントの場合、render は null を返します。コンポーネントがロードされると、コールバックが呼び出されます。構文は次のとおりです:

render(ReactElement element,DOMElement container,[function callback])

例:

import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router'
import { Provider } from 'react-redux'
import store from './store'
// Provider react-redux的内容
ReactDOM.render(
  <Provider store={store}>
    <Router/>
  </Provider>, document.getElementById(&#39;root&#39;))

2、findDOMNode

findDOMNode は、操作するために実際の DOM 要素を取得するために使用されます。 DOM ノード。

その前に、まず知っておく必要があります。React では、仮想 DOM は実際に HTML に追加され、コンポーネントがマウントされた後 (render()) に実際の DOM に変換されるため、componentDidMount とcomponentDidUpdate を使用できます。 2 つの方法で入手できます。例は次のとおりです:

import { findDOMNode } from 'react-dom';
<Example ref={ node=>{ this.node = node} }> // 利用ref获取Example组件的实例
const dom = findDOMNode(this.node); // 通过findDOMNode获取实例对应的真实DOM

注: 複雑な操作に関しては、多数の要素 DOM API が利用可能ですが、DOM 操作はパフォーマンスに大きな影響を与えるため、DOM 操作は最小限に抑える必要があります。

3. unmountComponentAtNode

unmountComponentAtNode はアンマウント操作を実行するために使用され、componentWillUnmount の前に実行されます。

推奨される学習: 「react ビデオ チュートリアル 」

以上がリアクトダムは何をするのですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。