Skip to content

Commit

Permalink
ペイントの翻訳を描画へと統一
Browse files Browse the repository at this point in the history
  • Loading branch information
dowdiness committed Dec 25, 2024
1 parent be62f92 commit e59453d
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 5 deletions.
8 changes: 4 additions & 4 deletions src/content/learn/render-and-commit.md
Original file line number Diff line number Diff line change
Expand Up @@ -194,11 +194,12 @@ export default function App() {
</Sandpack>

これが上手く動作するのは、最終ステップで React によって更新されるのが、新しい `time` の値で更新される `<h1>` の中身だけだからです。`<input>` は JSX 内で前回と同じ場所にあるので、React は `<input>` やその `value` に触れません!
## エピローグ:ブラウザのペイント {/*epilogue-browser-paint*/}

レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再描画します。このプロセスは「ブラウザレンダリング」として知られていますが、我々は、混乱を避けるために、ドキュメント全体を通して「ペイント」と呼ぶことにします。
## エピローグ:ブラウザの描画 {/*epilogue-browser-paint*/}

<Illustration alt="ブラウザが「カード要素と静物画」をペイントしている" src="/images/docs/illustrations/i_browser-paint.png" />
レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再描画します。このプロセスは「ブラウザレンダリング」として知られていますが、我々は、混乱を避けるために、ドキュメント全体を通して「描画」と呼ぶことにします。

<Illustration alt="ブラウザが「カード要素と静物画」を描画している" src="/images/docs/illustrations/i_browser-paint.png" />

<Recap>

Expand All @@ -210,4 +211,3 @@ export default function App() {
* レンダー結果が前回と同一である場合、React は DOM を触らない。

</Recap>

2 changes: 1 addition & 1 deletion src/content/learn/understanding-your-ui-as-a-tree.md
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@ React アプリにおいて、ツリー構造で関係性をモデル化でき
* レンダーツリーの概念は、トップレベルとリーフコンポーネントを特定するのに役立つ。トップレベルのコンポーネントはそれらの下の全コンポーネントのレンダーパフォーマンスに影響を与え、リーフコンポーネントは頻繁に再レンダーされる。これらを把握することでレンダーパフォーマンスの理解とデバッグに役立つ。
* 依存関係ツリーは、React アプリ内のモジュール依存関係を表現する。
* 依存関係ツリーは、アプリを届けるために必要なコードをバンドルするビルドツールによって使用される。
* 依存関係ツリーは、ペイントまでの時間を遅らせるバンドルサイズの問題をデバッグしたり、どのコードをバンドル対象とするか最適化するきっかけとなることに役立つ。
* 依存関係ツリーは、描画までの時間を遅らせるバンドルサイズの問題をデバッグしたり、どのコードをバンドル対象とするか最適化するきっかけとなることに役立つ。

</Recap>

Expand Down

0 comments on commit e59453d

Please sign in to comment.