fix: review wording

Author: Jim876633

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

@@ -1,5 +1,5 @@
 ---
-title: Render 和提交
+title: Render 和 Commit
 ---
 
 <Intro>
@@ -21,12 +21,12 @@ title: Render 和提交
 
 1. **觸發** render (將客人的訂單發送到廚房)
 2. **Rendering** component (在廚房裡準備菜餚)
-3. **提交**給 DOM (將菜餚送上桌)
+3. **Commit** 到 DOM (將菜餚送上桌)
 
 <IllustrationBlock sequential>
-  <Illustration caption="觸發" 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="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="提交" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.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>
 
 ## 步驟 1: 觸發 render {/*step-1-trigger-a-render*/}
@@ -67,7 +67,7 @@ export default function Image() {
 
 ### 當狀態更新時重新 render {/*re-renders-when-state-updates*/}
 
-一但 component 被初始 render，你可以透過使用 [`set` 函式](/reference/react/useState#setstate) 更新其狀態來觸發之後的 render。更新 component 的狀態會自動加入重新 render 的佇列（queue）。(你可以將這個過程想像成一位餐廳顧客點完第一道菜後，根據他的口渴或飢餓程度，又繼續點了茶、點心或其他各種菜色的流程。)
+一但 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" />
@@ -82,7 +82,7 @@ export default function Image() {
 * **當初始 render 時，** React 會呼叫 root component.
 * **對於後續的 render，** React 會呼叫因狀態更新而觸發 render 的 function component。
 
-這段過程是遞迴的：如果更新的 component 回傳其他的 component，React 將會 render _那個_ component，如果那個 component 又回傳其他的 component，React 會接著 render _那個_ component，以此類推。這個過程將一直持續到沒有回傳更多的 component，React 才知道應該在螢幕上顯示什麼。
+這段過程是遞迴的：如果更新的 component 回傳其他的 component，React 將會 render _那個_ component，如果 component 又回傳其他的 component，React 會接著 render _下一個_ component，以此類推。這個過程將一直持續到沒有回傳更多的 component，React 才知道應該在螢幕上顯示什麼。
 
 在接下來的範例，React 將會呼叫 `Gallery()` 和 `Image()` 幾次
 
@@ -92,7 +92,7 @@ export default function Image() {
 export default function Gallery() {
   return (
     <section>
-      <h1>令人啟發的雕塑</h1>
+      <h1>Inspiring Sculptures</h1>
       <Image />
       <Image />
       <Image />
@@ -124,12 +124,12 @@ img { margin: 0 10px 10px 0; }
 
 </Sandpack>
 
-* **當初始 render 時，** React 會為 `<section>`， `<h1>`，和三個 `<img>` 標籤 [建立 DOM 節點](https://developer.mozilla.org/docs/Web/API/Document/createElement)
-* **當重新 render 時，** React 會計算他們的屬性（如果有的話），是否與上一次 render 時有所不同。在下一個步驟 - 提交階段之前，它不會進行任何動作。
+* **當初始 render 時，** React 會為 `<section>`、`<h1>` 和三個 `<img>` 標籤[建立 DOM 節點](https://developer.mozilla.org/docs/Web/API/Document/createElement)
+* **當重新 render 時，** React 會計算他們的屬性（如果有的話），是否與上一次 render 時有所不同。在下一個步驟 - commit 階段之前，它不會進行任何動作。
 
 <Pitfall>
 
-Rendering 必須永遠是一個 [純運算（pure calculation）](/learn/keeping-components-pure)
+Rendering 必須永遠是一個[純運算](/learn/keeping-components-pure)
 
 * **相同的輸入，會得到相同的輸出。** 當輸入相同的值時，component 應該永遠回傳相同的 JSX。(當有人點了一份番茄沙拉時，他們不應該拿到一份洋蔥沙拉！)
 * **它只做自己的事情。** 在 rendering 之前，不應該改變任何先前已存在的任何物件或變數。（一份訂單不應該改變其他任何人的訂單。）
@@ -142,11 +142,11 @@ Rendering 必須永遠是一個 [純運算（pure calculation）](/learn/keeping
 
 #### 效能最佳化 {/*optimizing-performance*/}
 
-如果更新的 component 在 tree 的位置非常高，預設情況下，對擁有巢狀子元件的 component 更新元件時，每個子元件都將被重新 render，這不會獲得最佳的效能。如果遇到效能問題，可以在 [效能（Performance）](https://reactjs.org/docs/optimizing-performance.html) 中找到幾個解決方法。**但不要太早進行最佳化！**
+如果要更新的 component 在 tree 的非常頂部，預設情況下對擁有巢狀子元件的 component 更新元件時，每個子元件都將被重新 render，這不會獲得最佳的效能。如果遇到效能問題，可以在[效能](https://reactjs.org/docs/optimizing-performance.html)中找到幾個解決方法。**但不要太早進行最佳化！**
 
 </DeepDive>
 
-## 步驟 3: React 把更改提交給 DOM {/*step-3-react-commits-changes-to-the-dom*/}
+## 步驟 3: React 把更改 commit 到 DOM {/*step-3-react-commits-changes-to-the-dom*/}
 
 在 rendering（呼叫）你的 component 後，React 將會更改你的 DOM。
 
@@ -193,7 +193,7 @@ export default function App() {
 
 </Sandpack>
 
-這個範例之所以能夠運作，是因為在最後一步中，React 只會依據新的 `time` 去更新 `<h1>` 元素中的內容。React 發現這個 `<input>` 元素在 JSX 中出現的位置與上一次相同，因此不會修改 `<input>` 元素或其 `value` 值。
+這個範例之所以能夠運作，是因為在最後一步中，React 只會依據新的 `time` 去更新 `<h1>` 的內容。React 發現這個 `<input>` 在 JSX 中出現的位置與上一次相同，因此不會修改 `<input>` 或其 `value` 值。
 ## 結語：瀏覽器繪製 {/*epilogue-browser-paint*/}
 
 在 rendering 完成並且在 React 更新 DOM 後，瀏覽器將會重新繪製螢幕畫面。儘管這個過程被稱為「瀏覽器 rendering」，我們更傾向於將它稱為「繪製」，以避免混淆。
@@ -204,8 +204,8 @@ export default function App() {
 
 * 在 React 應用程式中，任何螢幕畫面更新都會發生三個步驟：
   1. 觸發
-  2. render
-  3. 提交
+  2. Render
+  3. Commit
 * 你可以使用嚴格模式去找到 component 中的錯誤
 * 如果 rendering 後的結果與上次相同，React 將不會更改 DOM。