React では、要素は最小の構築単位であり、DOM ではありません。要素は jsx を使用してコードで定義でき、構文は「const element =...」です。要素を作成した後は変更できません。 DOM を変更したい場合は、新しい要素を作成することしかできません。
このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。
要素
1.Element は React の最小の構築単位であり、DOM ではなくオブジェクトであり、作成コストは比較的低くなります。
(1) 通常、コード内の要素を定義するには JSX を使用します。
const 要素 = <h1>こんにちは、世界</h1>;(2) ReactDOM.renderを使用してレンダリングする
ReactDOM.render( 要素, document.getElementById('root') );2. 要素は一度作成すると変更できません。DOM の表示を変更したい場合は、新しい要素を作成することしかできません。
3. React は前後の 2 つの要素を比較し、更新が必要な内容のみを更新します。
知識を広げてください:
仮想 DOM
1. React は DOM 要素を直接構築しませんが、DOM 構造に似たオブジェクトを作成します。次に、実際の DOM がこの構造に基づいてレンダリングされます。これが React DOM です。
2. 変更があった場合は、新しいオブジェクトを作成し、前の構造と比較して、2 つの違いを記録します。ここで diff アルゴリズムを確認できます。
3. その後、記録された差異に基づいて DOM が更新されます。
反応要素
1. 仮想「DOM」。
2. 本質は不変のオブジェクトです。
type 属性: 'h1' などの文字列の場合は DOM ノードを表し、type 属性が表すコンポーネントの場合は、その props 属性が DOM ノードの属性になります。
関数またはクラスの場合、コンポーネントを表します。
3. 2 種類の ReactElement を相互にネストしたり、混合して DOM ツリーを記述することができます。