ホームページ >ウェブフロントエンド >フロントエンドQ&A >反応要素とは何ですか
react では、要素は最小の構築単位であり、DOM ではなくオブジェクトです。要素はコード内で jsx を使用して定義でき、構文は「const element =...」です。要素が作成された後、 DOM を変更したい場合は、新しい要素を作成することしかできません。
このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。
Element
1.Element は React の最小の構築単位であり、DOM ではなくオブジェクトです。作成コストは比較的高いか、低いか。
(1) 通常、コード内で要素を定義するには JSX を使用します:
const element = <h1>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 サイトの他の関連記事を参照してください。