技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

私の英語は限られており、私のスキルは平凡で、知識は豊富です。私は翻訳者ではないので、私の言うことが信じられない場合は、原文を読んでください。

元のアドレス:https://facebook.github.io/react/docs/advanced-performance.html

---

###パフォーマンスの最適化

開発者が実際のプロジェクトで React を使用することを選択するときは、最初に次の質問をします。React を使用すると、プロジェクトがより速く、より柔軟になり、保守が容易になるかどうかです。さらに、状態データが変更されるたびにインターフェイスを再レンダリングするプロセスがパフォーマンスのボトルネックを引き起こすのでしょうか? React は内部的に、毎回 UI 更新を引き起こす高価な DOM 操作を最小限に抑えるためのいくつかの巧妙なテクニックを使用してパフォーマンスを保証します。

####DOM への直接的な影響を回避する
React は、ブラウザーのネイティブ DOM ツリーをマッピングするために使用される仮想 DOM のレイヤーを実装します。ブラウザ DOM を直接操作する速度は JavaScript オブジェクトを操作するよりもはるかに遅いため、React は仮想 DOM のこの層を通じて DOM を直接操作することを回避できます。コンポーネントのプロパティやステータスが変更されるたびに、react はメモリ内に新しい仮想 dom を構築し、元の古い仮想 dom と比較してブラウザの dom ツリーを更新する必要があるかどうかを判断します。これにより、dom のレンダリングが可能な限り最適化されます。パフォーマンスが低下する可能性があります。

これに加えて、react はコンポーネントのライフサイクル機能を提供します。shouldComponentUpdateの場合、コンポーネントは再レンダリングを決定する前にこの関数を呼び出します (仮想 DOM の比較が完了し、最終的な DOM が生成された後)。この関数は開発者に再レンダリングの権限を与え、関数はデフォルトで直接戻ります。true、DOM 更新がデフォルトで直接開始されることを示します。

shouldComponentUpdate: function(nextProps, nextState) {
	return true;
}

なお、react はこの関数を頻繁に呼び出すため、この関数のロジックを自分で実装する予定がある場合は、可能な限りパフォーマンスを確保してください。

たとえば、複数の投稿があるチャット アプリケーションがある場合、現時点ではそのうちの 1 つだけが変更される場合、次のように実装します。shouldComponentUpdate、react は、状況に応じて変更されていない投稿の再レンダリングを回避します。

shouldComponentUpdate: function(nextProps, nextState) {
	// TODO: return whether or not current chat thread is different to former one.
	// 根据实际情况判断当前帖子的状态是否和之前不同
}

つまり、React はコストのかかる DOM 操作を可能な限り回避し、開発者がこの動作に干渉できるようにします。

####ShouldComponentUpdate の実行中
以下に示すように、子要素を含むコンポーネントの例を示します。

前の 次