反応要素とは何ですか

react では、要素は最小の構築単位であり、DOM ではなくオブジェクトです。要素はコード内で jsx を使用して定義でき、構文は「const element =...」です。要素が作成された後、 DOM を変更したい場合は、新しい要素を作成することしかできません。

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

react 要素とは

Element

1.Element は React の最小の構築単位であり、DOM ではなくオブジェクトです。作成コストは比較的高いか、低いか。

(1) 通常、コード内で要素を定義するには JSX を使用します:

        const element = <h1 id="Hello-nbsp-world">Hello, world</h1>;

(2) ReactDOM.render を使用して

        ReactDOM.render( element, document.getElementById('root') );

2 をレンダリングします。作成した後は変更できません。映画で言うところの1コマのようなものです。DOMの表示を変更したい場合は、新しいElementを作成するしかありません。

3.React は前後の 2 つの要素を比較し、更新が必要な内容のみを更新します。

拡張知識:

仮想 DOM

1.React は、DOM 要素を直接構築するのではなく、オブジェクトを作成することで DOM 要素を構築します。 DOM 構造と似ています。次に、実際の DOM がこの構造に基づいてレンダリングされます。これが React DOM です。

2. 変更がある場合は、新しいオブジェクトを作成し、前の構造と比較して、2 つの違いを記録します。ここで diff アルゴリズムを確認できます。

3. 次に、記録された差異に基づいて DOM を更新します。

ReactElement

1. 仮想 'DOM';

2. 本質的に不変オブジェクト;

type 属性: 'h1' などの文字列の場合は DOM ノードを表し、その props 属性は DOM ノードの属性です。type 属性が

関数である場合は、コンポーネントまたはクラス、コンポーネントを表します;

3. 2 つのタイプの ReactElement を相互にネストしたり、混合して DOM ツリーを記述することができます;

[関連する推奨事項: JavaScript ビデオ チュートリアル、webfrontend]

以上が反応要素とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。