{"body":"","files":[{"path":"docs\/docs\/11-advanced-performance.ja-JP.md","status":"A"}],"patch":"diff --git a\/docs\/docs\/11-advanced-performance.ja-JP.md b\/docs\/docs\/11-advanced-performance.ja-JP.md\nnew file mode 100644\nindex 0000000000..3c33ae3b02\n--- \/dev\/null\n+++ b\/docs\/docs\/11-advanced-performance.ja-JP.md\n@@ -0,0 +1,205 @@\n+---\n+id: advanced-performance\n+title: 先進的なパフォーマンス\n+permalink: advanced-performance-ja-JP.html\n+prev: perf-ja-JP.html\n+---\n+\n+Reactをプロジェクトで使用しようとする際にまず最初に気になるのは、アプリケーションがReactを使用しないバージョンと比べて、同じくらい速くてレスポンシブであるかどうかということです。ステータスの変更毎にレスポンスでコンポーネントのサブツリーの全てを再度レンダリングするという考え方によって、このプロセスがパフォーマンスにネガティブな影響を与えるのではないかと人々は不安に思います。ReactはUIを更新するのに必要な、コストのかかる多くのDOMの操作を最小限にするためのいくつかの賢い技術を使用します。\n+\n+## DOMを一致させることを防ぐこと\n+\n+ReactはブラウザでレンダリングされるDOMのサブツリーの記述語である *virtual DOM* を使用しています。この2つの表現によってReactは、JavaScriptのオブジェクトの操作よりも遅い、DOMノードを作成したり存在しているDOMノードにアクセスすることを防いでいます。コンポーネントの `props` や `state` が変更された時、Reactは新しいvirtual DOMを構成して、それを古いものと比較することによって、実際のDOMの更新が必要かどうか決定します。それらが同じものでなかった場合にのみ、ReactはDOMを[一致](\/react\/docs\/reconciliation.html)させ、最小限の変更を適用します。\n+この最上位で、Reactはコンポーネントライフサイクルファンクションである `shouldComponentUpdate` を提供します。これは、再度レンダリングを行うプロセス（virtual DOMの比較と起こり得る最終的なDOMの一致）が始まる前に誘発されます。そして、開発者にこのプロセスの循環を短くすることを可能にします。デフォルトのこの関数の実行時にはReactが更新を行って、以下のように `true` が返ります。\n+\n+```javascript\n+shouldComponentUpdate: function(nextProps, nextState) {\n+ return true;\n+}\n+```\n+\n+Reactがとても頻繁にこの関数を呼び出すので、実行が速いものである必要があることを頭に置いておいてください。\n+\n+いくつかのチャットのスレッドを持つメッセージングのアプリケーションを持っていると仮定してください。そして、スレッドのうち1つだけが変更されたと考えてください。 `ChatThread` コンポーネントで `shouldComponentUpdate` を実行した際には、Reactは以下のように、他のスレッドのレンダリングステップをスキップできます。\n+\n+```javascript\n+shouldComponentUpdate: function(nextProps, nextState) {\n+ \/\/ TODO: 現在のチャットスレッドが以前のものと\n+ \/\/ 異なっているかどうかをリターンする。\n+}\n+```\n+\n+つまり、要約すると、ReactはDOMのサブツリーを一致させる必要があるためにコストのかかるDOMの操作を実行するのを避けます。 `shouldComponentUpdate` を使用して、このプロセスを短縮することができます。そして、virtual DOMを比較して、更新すべきDOMだけを更新します。\n+\n+## shouldComponentUpdate の実行\n+\n+以下はコンポーネントのサブツリーです。1つ1つは `shouldComponentUpdate` が何をリターンするかとvirtual DOMが同じものであるかどうかを示しています。最終的には、円の色が、コンポーネントを一致させる必要があるかどうかを示しています。\n+\n+

dillon1000/react

Files changed