Diffアルゴリズムの解析：Reactを使ったレンダリング処理の解析

この記事では、Diff アルゴリズムの分析: React を使用したレンダリング処理の分析について説明します。必要な方は参考にしていただければ幸いです。

1. 仮想 DOM とは何ですか? React では、レンダリングの実行結果は、仮想 DOM と呼ばれる単なる軽量の JavaScript オブジェクトです。

簡単に言うと、いわゆる仮想 DOM とは、実際には JavaScript オブジェクトを HTML DOM ノードにマッピングするものであり、JavaScript オブジェクトを使用して Html 構造を表現するものであり、このオブジェクトが仮想 DOM です。
Html:

•   
  • Item 1
    
  • Item 2

JavaScript オブジェクト表現 (仮想 DOM)

• {
    tagName: 'ul',
    props: {
      id: 'list'
    },
    children: [
      {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
      {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
    ]
  }

2. いつ仮想 DOM に生成されますか

React のライフサイクルには、読み込み、更新、およびステージのアンロード; 添付されているのは React のライフサイクル図です

前述したように、レンダリングの実行結果は実際の DOM ノードではなく、単なる軽量の JavaScript オブジェクトです。 render 関数が呼び出されると、仮想 DOM が作成されます。

• class Tab extends React.Component {
      render() {
          React.createElement(
            'p',
            { className: 'class'},
            'Hello React'
          )
      }
  }

仮想 DOM は React.createElemen を通じて作成され、この関数は Render 関数内でのみ呼び出されます。 React のロードと更新のプロセス 仮想 DOM の生成は仮想 DOM 内でのみ発生します。実際の DOM へのマウントは、当然 ReactDom.render 関数です。
3. 仮想 DOM の実装方法

実装は実際には非常に簡単です。主なことは、関数を定義し、渡すパラメーターを組み合わせて React 要素オブジェクトを形成することです。type はコンポーネントの型です。クラス、関数、または文字列 ('p' など) を渡します
大まかにソースコードを反応させる:

• function createElement(type, config, children) {
    let propName;
  
    const props = {};
  
    let key = null;
    let ref = null;
    let self = null;
    let source = null;
  
    if (config != null) {
      if (hasValidRef(config)) {
        //  如果有ref，将它取出来
        ref = config.ref;
      }
      if (hasValidKey(config)) {
        //  如果有key，将它取出来
        key = '' + config.key;
      }
  
      self = config.__self === undefined ? null : config.__self;
      source = config.__source === undefined ? null : config.__source;
      
      for (propName in config) {
        if (
          hasOwnProperty.call(config, propName) &&
          !RESERVED_PROPS.hasOwnProperty(propName)
        ) {
          //  将除ref，key等这些特殊的属性放到新的props对象里
          props[propName] = config[propName];
        }
      }
    }
  
    //  获取子元素
    const childrenLength = arguments.length - 2;
    if (childrenLength === 1) {
      props.children = children;
    } else if (childrenLength > 1) {
      const childArray = Array(childrenLength);
      for (let i = 0; i 

印刷コンポーネント:

4 、なぜVirtual Domを使用する必要があるのですか

DOM管理の歴史的段階:

JSまたはjQueryでDOMを操作する: アプリケーションがますます複雑になるにつれて、JSで維持する必要があるフィールドがますます増えています。イベントを監視し、イベント コールバックを呼び出してページの DOM を更新する必要があります。また、操作も増え、アプリケーションの保守が非常に困難になります。
その後、コード編成を通じてメンテナンスの困難さを軽減することを期待して、MVC と MVP のアーキテクチャ パターンが作成されました。ただし、MVC アーキテクチャでは、メンテナンスの状態を減らすことはできません。また、状態を更新するときにページ上で必要な更新操作を減らすこともできません。操作する必要がある DOM は、別の場所にあるだけです。
状態が変わると対応するDOM要素を操作する必要があるので、ビューを状態にバインドするものを作ってみてはどうでしょうか。そうすれば、状態が変わるとビューも自動的に変わります。これは、後で人々が MVVM パターンを思いついた方法です。ビュー コンポーネントがどの状態にバインドされているかをテンプレートで宣言している限り、状態が更新されると、双方向バインディング エンジンがビューを自動的に更新します。ただし、MVVM 双方向データ バインディングの定義が唯一の方法ではありません。非常に直感的な方法があります。状態が変化したら、テンプレート エンジンを使用してビュー全体を再レンダリングし、古いビューを新しいビューに置き換えます。
4. React は 4 番目のモードを採用していますが、DOM の操作コストが高すぎる一方で、JavaScript の操作ははるかに高速であり、HTML DOM は JavaScript オブジェクトで簡単に表現できます (仮想 DOM が誕生しました)。

このアプローチでは多くの問題が発生します。最大の問題は、小さな状態変更でも DOM 全体の再構築が必要となり、コスト効率が高すぎるため、非常に時間がかかることです。また、React Virtual DOM は特別な機能を追加します。 DOM ツリー全体への変更を回避するために、状態更新プロセス中に操作を実行します。

関連するおすすめ:

以上がDiffアルゴリズムの解析：Reactを使ったレンダリング処理の解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。