You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/render-and-commit.md
+54-54
Original file line number
Diff line number
Diff line change
@@ -1,44 +1,44 @@
1
1
---
2
-
title: Render and Commit
2
+
title: レンダーとコミット
3
3
---
4
4
5
5
<Intro>
6
6
7
-
Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
*The steps involved in displaying a component on screen
16
-
*Why rendering does not always produce a DOM update
13
+
* React での「レンダー」の意味
14
+
*いつ、なぜ React はコンポーネントをレンダーするのか
15
+
*画面上にコンポーネントが表示されるステップ
16
+
*なぜレンダーしても必ずしも DOM 更新が起きないのか
17
17
18
18
</YouWillLearn>
19
19
20
-
Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
1.**Triggering** a render (delivering the guest's order to the kitchen)
23
-
2.**Rendering** the component (preparing the order in the kitchen)
24
-
3.**Committing** to the DOM (placing the order on the table)
22
+
1.レンダーの**トリガ**（キッチンに注文を送る）
23
+
2.コンポーネントの**レンダー**（キッチンで注文を準備する）
24
+
3.DOM への**コミット**（テーブルに注文を置く）
25
25
26
26
<IllustrationBlocksequential>
27
-
<Illustrationcaption="Trigger"alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen."src="/images/docs/illustrations/i_render-and-commit1.png" />
28
-
<Illustrationcaption="Render"alt="The Card Chef gives React a fresh Card component."src="/images/docs/illustrations/i_render-and-commit2.png" />
29
-
<Illustrationcaption="Commit"alt="React delivers the Card to the user at their table."src="/images/docs/illustrations/i_render-and-commit3.png" />
## Step 1: Trigger a render {/*step-1-trigger-a-render*/}
32
+
## ステップ 1：レンダーのトリガ {/*step-1-trigger-a-render*/}
33
33
34
-
There are two reasons for a component to render:
34
+
コンポーネントがレンダーされる理由には 2 つあります。
35
35
36
-
1.It's the component's **initial render.**
37
-
2.The component's (or one of its ancestors') **state has been updated.**
36
+
1.コンポーネントの**初回レンダー**。
37
+
2.コンポーネント（またはその祖先のいずれか）の **state の更新**。
38
38
39
-
### Initial render {/*initial-render*/}
39
+
### 初回レンダー {/*initial-render*/}
40
40
41
-
When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling [`createRoot`](/reference/react-dom/client/createRoot)with the target DOM node, and then calling its `render`method with your component:
41
+
アプリが開始するときには、初回のレンダーをトリガする必要があります。フレームワークやサンドボックスでは、このコードが隠されたりすることがありますが、これはターゲットとなる DOM ノードで [`createRoot`](/reference/react-dom/client/createRoot)を呼び出し、コンポーネントでその `render`メソッドを呼び出すことによって行われます。
42
42
43
43
<Sandpack>
44
44
@@ -63,28 +63,28 @@ export default function Image() {
63
63
64
64
</Sandpack>
65
65
66
-
Try commenting out the `root.render()`call and see the component disappear!
### Re-renders when state updates {/*re-renders-when-state-updates*/}
68
+
### state 更新後の再レンダー {/*re-renders-when-state-updates*/}
69
69
70
-
Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set`function.](/reference/react/useState#setstate) Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)
70
+
コンポーネントが最初にレンダーされた後、[`set`関数](/reference/react/useState#setstate)を使って state を更新することで、さらなるレンダーをトリガすることができます。コンポーネントの state を更新すると、自動的にレンダーがキューイングされます。（これは、レストランの客が最初の注文の後に、喉の渇きや空腹の状態に応じてお茶やデザートなどいろいろなものを注文するようなものだと考えることができます。）
71
71
72
72
<IllustrationBlocksequential>
73
-
<Illustrationcaption="State update..."alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!"src="/images/docs/illustrations/i_rerender1.png" />
74
-
<Illustrationcaption="...triggers..."alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card."src="/images/docs/illustrations/i_rerender2.png" />
75
-
<Illustrationcaption="...render!"alt="The Card Chef gives React the pink Card."src="/images/docs/illustrations/i_rerender3.png" />
This process is recursive: if the updated component returns some other component, React will render _that_ component next, and if that component also returns something, it will render _that_ component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.
***During the initial render,**React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `<section>`, `<h1>`, and three `<img>` tags.
128
-
***During a re-render,**React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase.
***Same inputs, same output.** Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!)
135
-
***It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.)
Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in "Strict Mode", React calls each component's function twice, which can help surface mistakes caused by impure functions.
The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the [Performance](https://reactjs.org/docs/optimizing-performance.html) section. **Don't optimize prematurely!**
## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/}
149
+
## ステップ 3：React が DOM への変更をコミットする {/*step-3-react-commits-changes-to-the-dom*/}
150
150
151
-
After rendering (calling) your components, React will modify the DOM.
151
+
あなたのコンポーネントをレンダー（関数として呼び出し）した後、React は DOM を変更します。
152
152
153
-
***For the initial render,**React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen.
154
-
***For re-renders,**React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
153
+
***初回レンダー時には**、React は [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API を使用して、作成したすべての DOM ノードを画面に表示します。
154
+
***再レンダー時には**、React は最新のレンダー出力に合わせて DOM を変更するため、必要な最小限の操作（レンダー中に計算されたもの！）を適用します。
155
155
156
-
**React only changes the DOM nodes if there's a difference between renders.** For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into the `<input>`, updating its `value`, but the text doesn't disappear when the component re-renders:
156
+
**React はレンダー間で違いがあった場合にのみ DOM ノードを変更します**。例えば、以下のコンポーネントは親から渡された異なる props で毎秒再レンダーされます。`<input>` にテキストを追加して `value` に変化があった場合でも、コンポーネントが再レンダーされたときにテキストが消えないことに注意してください：
157
157
158
158
<Sandpack>
159
159
@@ -193,21 +193,21 @@ export default function App() {
193
193
194
194
</Sandpack>
195
195
196
-
This works because during this last step, React only updates the content of `<h1>`with the new `time`. It sees that the `<input>`appears in the JSX in the same place as last time, so React doesn't touch the `<input>`—or its`value`!
After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion throughout the docs.
199
+
レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再描画します。このプロセスは「ブラウザレンダリング」として知られていますが、ドキュメント全体での混乱を避けるために、我々は「ペイント」と呼ぶことにします。
200
200
201
-
<Illustrationalt="A browser painting 'still life with card element'."src="/images/docs/illustrations/i_browser-paint.png" />
0 commit comments