ReactDOM パッケージとその使用

すべての React 開発者は、外部ライブラリを使用するための独自のアプローチを持っています。コアエッセンシャルに使用を制限しようとする人もいれば、ほとんどすべてに外部ライブラリを使用する人もいます。

今日の記事では、React に不可欠なライブラリの 1つである ReactDOM に取り組みます。このパッケージは、React アプリケーションで DOM レンダリングを管理するために必要なメソッドを提供します。

React の ReactDOM パッケージ

汎用の React ライブラリと組み合わせて、このパッケージは React で動的アプリケーションを構築するために必要です。これは、重要な render() 関数を提供します。これは、あらゆるクラスコンポーネントの重要な構成要素です。

一般に、このパッケージは DOM と対話するためのメソッドを提供します。これにより、アプリケーション DOM を効率的に管理できます。ReactDOM パッケージに含まれている最も重要なメソッドのリストは次のとおりです。

• Render()
• findDOMNode()
• unmountComponentAtNode()
• hydrate()
• createPortal()

DOM と仮想 DOM とは何ですか

本質的に、DOM（ドキュメントオブジェクトモデルの略）は、Web ページをオブジェクトとして表現したものです。ページのコンテンツにアクセス、読み取り、または変更するための API を提供します。

React が普及する前は、JavaScript 開発者は jQuery などのライブラリを使用して DOM を直接変更していました。DOM への変更がほとんど目立たなかったとしても、ブラウザがページ全体を再レンダリングしたため、手動の DOM 操作は非効率的でした。

React は、変更を追跡して実際の DOM を一度に更新する DOM の任意のコピーである仮想 DOM を提供したため、人気を博しました。

このアプローチははるかに効率的だったので、仮想 DOM は今日でも React のコア機能の 1つです。ReactDOM ライブラリには、React で DOM と対話するための重要な機能が含まれています。

React に ReactDOM をインストールする

以前は、ReactDOM メソッドが汎用パッケージに含まれていましたが、現在は個別にインポートする必要があります。まず、アプリディレクトリを選択し、コマンドラインに次のように入力してパッケージをインストールする必要があります。

npm install react-dom

次に、それをインポートできます。最新バージョンの JavaScript を使用している場合は、import ステートメントを使用してそれを行うことができます。

import ReactDOM from 'react-dom'

または、render メソッドのみをインポートする必要がある場合は、次のようにインポートできます。

import { render } from 'react-dom'

次のパターンを使用して、他の特定のメソッドをインポートできます。