From e59453d289ac007f193fa1633819d85d4b5d192f Mon Sep 17 00:00:00 2001 From: Koji Ishimoto Date: Wed, 25 Dec 2024 14:15:36 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E3=83=9A=E3=82=A4=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=81=AE=E7=BF=BB=E8=A8=B3=E3=82=92=E6=8F=8F=E7=94=BB=E3=81=B8?= =?UTF-8?q?=E3=81=A8=E7=B5=B1=E4=B8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/render-and-commit.md | 8 ++++---- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index ca43b9a62..7a6f99db6 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -194,11 +194,12 @@ export default function App() { これが上手く動作するのは、最終ステップで React によって更新されるのが、新しい `time` の値で更新される `

` の中身だけだからです。`` は JSX 内で前回と同じ場所にあるので、React は `` やその `value` に触れません！ -## エピローグ：ブラウザのペイント {/*epilogue-browser-paint*/} -レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再描画します。このプロセスは「ブラウザレンダリング」として知られていますが、我々は、混乱を避けるために、ドキュメント全体を通して「ペイント」と呼ぶことにします。 +## エピローグ：ブラウザの描画 {/*epilogue-browser-paint*/} - +レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再描画します。このプロセスは「ブラウザレンダリング」として知られていますが、我々は、混乱を避けるために、ドキュメント全体を通して「描画」と呼ぶことにします。 + + @@ -210,4 +211,3 @@ export default function App() { * レンダー結果が前回と同一である場合、React は DOM を触らない。 - diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 4dfb2fc76..38535160a 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -293,7 +293,7 @@ React アプリにおいて、ツリー構造で関係性をモデル化でき * レンダーツリーの概念は、トップレベルとリーフコンポーネントを特定するのに役立つ。トップレベルのコンポーネントはそれらの下の全コンポーネントのレンダーパフォーマンスに影響を与え、リーフコンポーネントは頻繁に再レンダーされる。これらを把握することでレンダーパフォーマンスの理解とデバッグに役立つ。 * 依存関係ツリーは、React アプリ内のモジュール依存関係を表現する。 * 依存関係ツリーは、アプリを届けるために必要なコードをバンドルするビルドツールによって使用される。 -* 依存関係ツリーは、ペイントまでの時間を遅らせるバンドルサイズの問題をデバッグしたり、どのコードをバンドル対象とするか最適化するきっかけとなることに役立つ。 +* 依存関係ツリーは、描画までの時間を遅らせるバンドルサイズの問題をデバッグしたり、どのコードをバンドル対象とするか最適化するきっかけとなることに役立つ。 From 4185564bb9823ec9c04b90f9b489d2a44b402be3 Mon Sep 17 00:00:00 2001 From: Koji Ishimoto Date: Mon, 30 Dec 2024 20:30:05 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E6=94=B9=E8=A1=8C=E3=81=AE=E4=BB=95?= =?UTF-8?q?=E6=96=B9=E3=82=92=E5=8E=9F=E6=96=87=E3=81=A8=E5=90=8C=E3=81=98?= =?UTF-8?q?=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/render-and-commit.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 7a6f99db6..acc8ce3de 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -194,7 +194,6 @@ export default function App() { これが上手く動作するのは、最終ステップで React によって更新されるのが、新しい `time` の値で更新される `

` の中身だけだからです。`` は JSX 内で前回と同じ場所にあるので、React は `` やその `value` に触れません！ - ## エピローグ：ブラウザの描画 {/*epilogue-browser-paint*/} レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再描画します。このプロセスは「ブラウザレンダリング」として知られていますが、我々は、混乱を避けるために、ドキュメント全体を通して「描画」と呼ぶことにします。