Merge pull request #387 from Jim876633/docs/render-and-commit

Author: neighborhood999

src/content/learn/render-and-commit.md

@@ -1,44 +1,44 @@
 ---
-title: Render and Commit
+title: Render 和 Commit
 ---
 
 <Intro>
 
-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.
+在你的 component 顯示在畫面上之前，必須被 React render。了解這個過程中的步驟將有助於你思考你的程式碼是如何執行的，並能解釋其行為。
 
 </Intro>
 
 <YouWillLearn>
 
-* What rendering means in React
-* When and why React renders a component
-* The steps involved in displaying a component on screen
-* Why rendering does not always produce a DOM update
+* 在 React 中 rendering 所代表的意思
+* React render component 的時機及原因
+* 顯示 component 在畫面上所涉及的步驟
+* 為什麼 rendering 不一定會導致 DOM 更新
 
 </YouWillLearn>
 
-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:
+想像一下，你的 component 就像廚房中的廚師，從食材中組合出美味的菜餚。在這種情況下，React 就像是服務生，接收來自顧客的訂單，並將菜餚送到他們的桌上。這個請求和提供 UI 的過程包含三個步驟：
 
-1. **Triggering** a render (delivering the guest's order to the kitchen)
-2. **Rendering** the component (preparing the order in the kitchen)
-3. **Committing** to the DOM (placing the order on the table)
+1. **觸發** render (將客人的訂單發送到廚房)
+2. **Rendering** component (在廚房裡準備菜餚)
+3. **Commit** 到 DOM (將菜餚送上桌)
 
 <IllustrationBlock sequential>
   <Illustration caption="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" />
   <Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
   <Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
 </IllustrationBlock>
 
-## Step 1: Trigger a render {/*step-1-trigger-a-render*/}
+## 步驟 1: 觸發 render {/*step-1-trigger-a-render*/}
 
-There are two reasons for a component to render:
+有兩個原因會使 component 進行 render：
 
-1. It's the component's **initial render.**
-2. The component's (or one of its ancestors') **state has been updated.**
+1. 這是 component 的初始 render。
+2. component（或是他的祖父層之一）的**狀態發生改變。**
 
-### Initial render {/*initial-render*/}
+### 初始 render {/*initial-render*/}
 
-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:
+當你的應用程式啟動時，會觸發初始 render。有些框架和開發環境可能會隱藏這部分的程式碼，但實際上它是透過使用 [`createRoot`](/reference/react-dom/client/createRoot) 的方法來指定目標 DOM 節點，然後再呼叫 `render` 函式 render component：
 
 <Sandpack>
 
@@ -63,28 +63,28 @@ export default function Image() {
 
 </Sandpack>
 
-Try commenting out the `root.render()` call and see the component disappear!
+請試著將 `root.render()` 這行程式碼註解掉，然後就會發現 component 消失了！
 
-### Re-renders when state updates {/*re-renders-when-state-updates*/}
+### 當狀態更新時重新 render {/*re-renders-when-state-updates*/}
 
-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.)
+一但 component 被初始 render，你可以透過使用 [`set` 函式](/reference/react/useState#setstate) 更新其狀態來觸發之後的 render。更新 component 的狀態會自動加入重新 render 的 queue。(你可以將這個過程想像成一位餐廳顧客點完第一道菜後，根據他的口渴或飢餓程度，又繼續點了茶、點心或其他各種菜色的流程。)
 
 <IllustrationBlock sequential>
   <Illustration caption="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" />
   <Illustration caption="...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" />
   <Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
 </IllustrationBlock>
 
-## Step 2: React renders your components {/*step-2-react-renders-your-components*/}
+## 步驟 2: React render 你的 component {/*step-2-react-renders-your-components*/}
 
-After you trigger a render, React calls your components to figure out what to display on screen. **"Rendering" is React calling your components.**
+在觸發 render 之後，React 將呼叫你的 component 以確定什麼該顯示在螢幕畫面上。**「Rendering」 指的是 React 正在呼叫你的 component.**
 
-* **On initial render,** React will call the root component.
-* **For subsequent renders,** React will call the function component whose state update triggered the render.
+* **當初始 render 時，** React 會呼叫 root component.
+* **對於後續的 render，** React 會呼叫因狀態更新而觸發 render 的 function component。
 
-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.
+這段過程是遞迴的：如果更新的 component 回傳其他的 component，React 將會 render _那個_ component，如果 component 又回傳其他的 component，React 會接著 render _下一個_ component，以此類推。這個過程將一直持續到沒有回傳更多的 component，React 才知道應該在螢幕上顯示什麼。
 
-In the following example, React will call `Gallery()` and  `Image()` several times:
+在接下來的範例，React 將會呼叫 `Gallery()` 和 `Image()` 幾次
 
 <Sandpack>
 
@@ -124,36 +124,36 @@ img { margin: 0 10px 10px 0; }
 
 </Sandpack>
 
-* **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. 
-* **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.
+* **當初始 render 時，** React 會為 `<section>`、`<h1>` 和三個 `<img>` 標籤[建立 DOM 節點](https://developer.mozilla.org/docs/Web/API/Document/createElement)
+* **當重新 render 時，** React 會計算他們的屬性（如果有的話），是否與上一次 render 時有所不同。在下一個步驟 - commit 階段之前，它不會進行任何動作。
 
 <Pitfall>
 
-Rendering must always be a [pure calculation](/learn/keeping-components-pure):
+Rendering 必須永遠是一個[純運算](/learn/keeping-components-pure)
 
-* **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!)
-* **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.)
+* **相同的輸入，會得到相同的輸出。** 當輸入相同的值時，component 應該永遠回傳相同的 JSX。(當有人點了一份番茄沙拉時，他們不應該拿到一份洋蔥沙拉！)
+* **它只做自己的事情。** 在 rendering 之前，不應該改變任何先前已存在的任何物件或變數。（一份訂單不應該改變其他任何人的訂單。）
 
-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.
+否則，你的程式碼會變得越來越複雜，可能會遇到令人困惑的錯誤和不可預測的行為。在「嚴格模式」下開發時，React 將呼叫每個 component 函式兩次，這可以幫助你發現由不純函數引發的錯誤。
 
 </Pitfall>
 
 <DeepDive>
 
-#### Optimizing performance {/*optimizing-performance*/}
+#### 效能最佳化 {/*optimizing-performance*/}
 
-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!**
+如果要更新的 component 在 tree 的非常頂部，預設情況下對擁有巢狀子元件的 component 更新元件時，每個子元件都將被重新 render，這不會獲得最佳的效能。如果遇到效能問題，可以在[效能](https://reactjs.org/docs/optimizing-performance.html)中找到幾個解決方法。**但不要太早進行最佳化！**
 
 </DeepDive>
 
-## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/}
+## 步驟 3: React 把更改 commit 到 DOM {/*step-3-react-commits-changes-to-the-dom*/}
 
-After rendering (calling) your components, React will modify the DOM. 
+在 rendering（呼叫）你的 component 後，React 將會更改你的 DOM。
 
-* **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. 
-* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
+* **對於初始 render，** React 會使用 [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API 在螢幕上顯示所有你建立的 DOM 節點。
+* **對於重新 render，** React 會採取最小必要的操作 (在 rendering 時計算！)，以使得 DOM 與 rendering 後的的輸出相符。
 
-**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:
+**React 只有在 render 時有差異才會更改 DOM 節點。** 例如，這裡有一個 component，每秒從其 parent 傳遞不同的 props 重新 render。請注意，你可以在 `<input>` 中輸入一些文字，更新它的 `value`，但是這些文字不會在 conponent 重新 render 時消失。
 
 <Sandpack>
 
@@ -193,21 +193,21 @@ export default function App() {
 
 </Sandpack>
 
-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`!
-## Epilogue: Browser paint {/*epilogue-browser-paint*/}
+這個範例之所以能夠運作，是因為在最後一步中，React 只會依據新的 `time` 去更新 `<h1>` 的內容。React 發現這個 `<input>` 在 JSX 中出現的位置與上一次相同，因此不會修改 `<input>` 或其 `value` 值。
+## 結語：瀏覽器繪製 {/*epilogue-browser-paint*/}
 
-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.
+在 rendering 完成並且在 React 更新 DOM 後，瀏覽器將會重新繪製螢幕畫面。儘管這個過程被稱為「瀏覽器 rendering」，我們更傾向於將它稱為「繪製」，以避免混淆。
 
 <Illustration alt="A browser painting 'still life with card element'." src="/images/docs/illustrations/i_browser-paint.png" />
 
 <Recap>
 
-* Any screen update in a React app happens in three steps:
-  1. Trigger
+* 在 React 應用程式中，任何螢幕畫面更新都會發生三個步驟：
+  1. 觸發
   2. Render
   3. Commit
-* You can use Strict Mode to find mistakes in your components
-* React does not touch the DOM if the rendering result is the same as last time
+* 你可以使用嚴格模式去找到 component 中的錯誤
+* 如果 rendering 後的結果與上次相同，React 將不會更改 DOM。
 
 </Recap>