Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

paintの翻訳として使われているペイントを描画へと統一しました #816

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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