React => パフォーマンス

基本 - HTML DOMと仮想DOM

HTML DOMは高価です

各Webページは、オブジェクトのツリーとして内部的に表されます。この表現は、 Document Object Modelと呼ばれます。さらに、プログラミング言語（JavaScriptなど）がHTML要素にアクセスできるようにする、言語に依存しないインタフェースです。

言い換えると

HTML DOMは、HTML要素を取得、変更、追加、または削除する方法の標準です。

しかし、これらのDOM操作は非常に高価です。

仮想DOMは解決策です

Reactのチームは、 HTML DOMを抽象化し、独自のVirtual DOMを作成して、アプリケーションの現在の状態を複製するためにHTML DOMに適用する必要がある操作の最小数を計算するという考えを思いつきました。

Virtual DOMは不要なDOMの変更から時間を節約します。

どのように正確ですか？

各時点で、ReactはVirtual DOMとして表されるアプリケーション状態を持ちVirtual DOM 。アプリケーションの状態が変わるたびに、これはReactがパフォーマンスを最適化するために実行するステップです

アプリケーションの新しい状態を表す新しい仮想DOMを生成する
古い仮想DOM（現在のHTML DOMを表す）と新しい仮想DOMを比較する
2.現在のHTML DOMを表す古い仮想DOMを新しい仮想DOMに変換する操作の最小数を求めます

それについてもっと知るには - ReactのDiffアルゴリズムを読んでください

これらの操作が見つかると、それらは同等のHTML DOM操作にマップされます

Virtual DOMはHTML DOMの抽象化であり、それらの間に同形の関係があることを覚えておいてください

これで見つかった同等のHTML DOM操作に転送された操作の最小数が、アプリケーションのHTML DOMに直接適用されるようになり、 HTML DOMを不必要に変更する時間が節約されます。

注意：Virtual DOMはJavaScriptオブジェクトなので、Virtual DOMに適用される操作は安価です。

リアクションの差分アルゴリズム

1つのツリーを別のツリーに変換するための最小操作数を生成することは、O（n ^ 3）のオーダーの複雑さを有する。ここで、nはツリー内のノードの数である。反作用は、この問題を線形時間で解くための2つの仮定に依存する - O（n）

同じクラスの2つのコンポーネントが同様のツリーを生成し、異なるクラスの2つのコンポーネントが異なるツリーを生成します。
さまざまなレンダリングで安定している要素に固有のキーを提供することは可能です。

2つのノードが異なるかどうかを判断するために、Reactが3つのケースを区別します

タイプが異なる場合、2つのノードが異なります。

たとえば、 <div>...</div>は<span>...</span>とは異なり<span>...</span>

2つのノードが異なるキー

たとえば、 <div key="1">...</div>が<div key="2">...</div>

さらに、パフォーマンスを最適化したい場合は、 以下のことが重要であり、理解することが非常に重要です

それらが[2つのノード]が同じタイプでない場合、Reactは、それらがレンダリングしたものと一致することを試みることさえありません。最初のものをDOMから削除し、2番目のものを挿入するだけです。

理由は次のとおりです

ある要素が生成するもののように見えるDOMを生成することはほとんどありません。 Reactは、これら2つの構造にマッチさせようと時間を費やす代わりに、ツリーを最初から再ビルドします。

ヒントとコツ

2つのノードが同じ型でない場合、Reactはそれらを照合しようとせず、DOMから最初のノードを削除し、2番目のノードを挿入します。これが、最初のヒントが言う理由です

同じような出力を持つ2つのコンポーネントクラスを交互に見ている場合は、同じクラスにすることができます。

コンポーネントが再レンダリングされないようにshouldComponentUpdateを使用します。

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id; 
}

ReactJSによる性能測定

あなたが測定できないものを改善することはできません 。 Reactコンポーネントのパフォーマンスを向上させるには、それを測定できる必要があります。 ReactJSはパフォーマンスを測定するアドオンツールを提供します。 react-addons-perfモジュールをインポートしてパフォーマンスを測定する

import Perf from 'react-addons-perf' // ES6
var Perf = require('react-addons-perf') // ES5 with npm
var Perf = React.addons.Perf; // ES5 with react-with-addons.js

インポートされたPerfモジュールの以下のメソッドを使用できます。

Perf.printInclusive（）
Perf.printExclusive（）
Perf.printWasted（）
Perf.printOperations（）
Perf.printDOM（）

ほとんどの場合、最も重要なのはPerf.printWasted()これは個々のコンポーネントの無駄な時間を表形式で表したものです

表のWasted time列に注意し、上記のTips＆Tricksセクションを使用してComponentのパフォーマンスを向上させることができます

React Official GuideとBenchling Enggの優れた記事を参照してください。リアクションパフォーマンス

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

React
パフォーマンス

サーチ…

基本 - HTML DOMと仮想DOM

リアクションの差分アルゴリズム

ヒントとコツ

ReactJSによる性能測定