docs: hooks-effect #103
Merged
docs: hooks-effect #103
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Deploy preview for zh-hant-reactjs-org ready! Built with commit a3bcc04 |
92 tasks
neighborhood999
requested review from
gaearon
and removed request for
gaearon
There was a problem hiding this comment.
Hi @leah-z-liu
Thank you for helping translation, I left some suggestions. If have any question feel free left comments.
| @@ -33,25 +33,25 @@ function Example() { | |||
| } | |||
| ``` | |||
|
|
|||
| This snippet is based on the [counter example from the previous page](/docs/hooks-state.html), but we added a new feature to it: we set the document title to a custom message including the number of clicks. | |||
| 這個範例基於[上一頁的反面範例](/docs/hooks-state.html)，但是我們添加了一個新的功能：我們把文件標題設置為包含了點擊次數的自定義信息。 | |||
There was a problem hiding this comment.
Suggested change
| 這個範例基於[上一頁的反面範例](/docs/hooks-state.html)，但是我們添加了一個新的功能：我們把文件標題設置為包含了點擊次數的自定義信息。 | |
| 這個範例基於[上一頁的計數器範例](/docs/hooks-state.html)，但是我們增加了一個新的功能：我們把網頁標題設定為包含點擊次數的自定義訊息。 |
|
|
||
| Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Whether or not you're used to calling these operations "side effects" (or just "effects"), you've likely performed them in your components before. | ||
| fetch 資料、設置 subscription、或手動改變 React component 中的 DOM 都是 side effect 的範例。無論你是否習慣將這些操作稱為「side effect」（或簡稱 「effect」），你之前可能已經在 component 中執行了這些操作。 |
There was a problem hiding this comment.
Suggested change
| fetch 資料、設置 subscription、或手動改變 React component 中的 DOM 都是 side effect 的範例。無論你是否習慣將這些操作稱為「side effect」（或簡稱 「effect」），你之前可能已經在 component 中執行了這些操作。 | |
| 資料 fetch、設定 subscription、或手動改變 React component 中的 DOM 都是 side effect 的範例。無論你是否習慣將這些操作稱為「side effect」（或簡稱「effect」），你之前可能已經在 component 中執行了這些操作。 |
|
|
||
| There are two common kinds of side effects in React components: those that don't require cleanup, and those that do. Let's look at this distinction in more detail. | ||
| React component 有兩種常見的 side effect：一種不需要執行清除，另一種則需要。讓我們仔細看看這一區別。 |
There was a problem hiding this comment.
Suggested change
| React component 有兩種常見的 side effect：一種不需要執行清除，另一種則需要。讓我們仔細看看這一區別。 | |
| React component 有兩種常見的 side effect：一種不需要執行清除，另一種則需要。讓我們仔細看看它們區別。 |
|
|
||
| ## Effects Without Cleanup {#effects-without-cleanup} | ||
| ## 無需清除 的 Effect {#effects-without-cleanup} |
There was a problem hiding this comment.
Suggested change
| ## 無需清除 的 Effect {#effects-without-cleanup} | |
| ## 無需清除的 Effect {#effects-without-cleanup} |
|
|
||
| Sometimes, we want to **run some additional code after React has updated the DOM.** Network requests, manual DOM mutations, and logging are common examples of effects that don't require a cleanup. We say that because we can run them and immediately forget about them. Let's compare how classes and Hooks let us express such side effects. | ||
| 有時，我們希望**在 React 更新 DOM 之後運行一些額外的程式碼。**網路請求、手動 DOM 變更、和 logging 是無需清除的 effect 的常見範例。我們這樣說是因為我們可以運行它們並立即忘記它們。讓我們比較一下 class 和 Hooks 如何讓我們表達這樣的 side effect。 |
There was a problem hiding this comment.
Suggested change
| 有時，我們希望**在 React 更新 DOM 之後運行一些額外的程式碼。**網路請求、手動 DOM 變更、和 logging 是無需清除的 effect 的常見範例。我們這樣說是因為我們可以運行它們並立即忘記它們。讓我們比較一下 class 和 Hooks 如何讓我們表達這樣的 side effect。 | |
| 有時候，我們希望**在 React 更新 DOM 之後執行一些額外的程式碼。**網路請求、手動變更 DOM、和 logging，它們都是無需清除 effect 的常見範例。我們之所以這樣說，是因為我們可以執行它們，並立即忘記它們。讓我們比較一下 class 和 Hooks 如何讓我們表達這樣的 side effect。 |
| > | ||
| >If you use this optimization, make sure the array includes **all values from the component scope (such as props and state) that change over time and that are used by the effect**. Otherwise, your code will reference stale values from previous renders. Learn more about [how to deal with functions](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) and [what to do when the array changes too often](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often). | ||
| >如果你使用此優化，請確保 array 包括了 **component 範圍內隨時間變化並被 effect 用到的所有值（例如 props 和 state）**。否則，你的程式碼將引用先前 render 中的舊值。了解更多 [如何處理 functions](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) 和 [如果 array 經常變化的話該怎麼辦](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often). |
There was a problem hiding this comment.
Suggested change
| >如果你使用此優化，請確保 array 包括了 **component 範圍內隨時間變化並被 effect 用到的所有值（例如 props 和 state）**。否則，你的程式碼將引用先前 render 中的舊值。了解更多 [如何處理 functions](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) 和 [如果 array 經常變化的話該怎麼辦](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often). | |
| >如果你使用此最佳化，請確保 array 包括了 **component 範圍內隨時間變化並被 effect 用到的所有值（例如 props 和 state）**。否則，你的程式碼將引用先前 render 中的舊值。了解更多[如何處理 function](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) 和[如果 array 經常變化的話該怎麼辦](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often)。 |
| > | ||
| >If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the dependencies array always works. | ||
| >如果你想運行一個 effect 並且僅（在 mount 和 unmount 時）將其清除一次，則可以傳遞一個空 array（`[]`）作為第二個參數。這告訴 React 你的 effect 不依賴於 _任何_ props 或 state 的值，因此它不需要重新運行。這不屬於特殊情況 — 依賴項目 array 一直這樣工作。 |
There was a problem hiding this comment.
Suggested change
| >如果你想運行一個 effect 並且僅（在 mount 和 unmount 時）將其清除一次，則可以傳遞一個空 array（`[]`）作為第二個參數。這告訴 React 你的 effect 不依賴於 _任何_ props 或 state 的值，因此它不需要重新運行。這不屬於特殊情況 — 依賴項目 array 一直這樣工作。 | |
| >如果你想執行一個 effect 並且僅（在 mount 和 unmount 時）將其清除一次，則可以傳遞一個空 array（`[]`）作為第二個參數。這告訴 React 你的 effect 不依賴於_任何_ props 或 state 的值，因此它不需要重新運行。這不屬於特殊情況 — 依賴項目 array 一直這樣工作。 |
| > | ||
| >If you pass an empty array (`[]`), the props and state inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem. | ||
| >如果你傳遞一個空 array（`[]`）， effect 中的 props 和 state 始終具有其初始值。儘管將`[]`作為第二個參數傳遞更接近於我們熟悉的 `componentDidMount` 和 `componentWillUnmount` 的模式，但通常有[更好的](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies)[解決方案](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often)可以避免過於頻繁地重新運行 effect。另外，別忘了 React 在瀏覽器繪製完成之後才推遲運行 `useEffect`，所以做額外的工作沒有很大的問題。 |
There was a problem hiding this comment.
Suggested change
| >如果你傳遞一個空 array（`[]`）， effect 中的 props 和 state 始終具有其初始值。儘管將`[]`作為第二個參數傳遞更接近於我們熟悉的 `componentDidMount` 和 `componentWillUnmount` 的模式，但通常有[更好的](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies)[解決方案](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often)可以避免過於頻繁地重新運行 effect。另外，別忘了 React 在瀏覽器繪製完成之後才推遲運行 `useEffect`，所以做額外的工作沒有很大的問題。 | |
| >如果你傳遞一個空 array（`[]`），effect 中的 props 和 state 始終具有其初始值。儘管將 `[]`作為第二個參數傳遞更接近於我們熟悉的 `componentDidMount` 和 `componentWillUnmount` 的模式，但通常有[更好的](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies)[解決方案](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often)可以避免過於頻繁地重新執行 effect。另外，別忘了 React 在瀏覽器繪製完成之後才延遲執行 `useEffect`，所以做額外的工作沒有很大的問題。 |
| > | ||
| >We recommend using the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) rule as part of our [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It warns when dependencies are specified incorrectly and suggests a fix. | ||
| >我們建議使用 [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) 規則作為我們 [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package 的一部分。當不正確地指定依賴項時，它會發出警告，並提出修復建議。 |
There was a problem hiding this comment.
Suggested change
| >我們建議使用 [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) 規則作為我們 [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package 的一部分。當不正確地指定依賴項時，它會發出警告，並提出修復建議。 | |
| >我們建議使用 [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) 規則作為我們 [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package 的一部分。當不正確地指定依賴時，它會發出警告，並提出修改建議。 |
|
|
||
| At this point you might be questioning how Hooks work. How can React know which `useState` call corresponds to which state variable between re-renders? How does React "match up" previous and next effects on every update? **On the next page we will learn about the [Rules of Hooks](/docs/hooks-rules.html) -- they're essential to making Hooks work.** | ||
| 現在，你可能會質疑 Hook 的工作方式。 React 怎麼知道哪個 `useState` 呼叫對應於 re-render 之間的哪個 state 變數？React 如何在每次更新中「匹配」上一個和下一個 effect？**在下一頁，我們會學習 [Hook 的規則](/docs/hooks-rules.html) — 它們對於 Hook 的正常運行至關重要。** |
There was a problem hiding this comment.
Suggested change
| 現在，你可能會質疑 Hook 的工作方式。 React 怎麼知道哪個 `useState` 呼叫對應於 re-render 之間的哪個 state 變數？React 如何在每次更新中「匹配」上一個和下一個 effect？**在下一頁，我們會學習 [Hook 的規則](/docs/hooks-rules.html) — 它們對於 Hook 的正常運行至關重要。** | |
| 現在，你可能會質疑 Hook 的工作方式。 React 怎麼知道哪個 `useState` 呼叫對應於 re-render 之間的哪個 state 變數？React 如何在每次更新中「匹配」上一個和下一個 effect？**在下一頁，我們會學習 [Hook 的規則](/docs/hooks-rules.html) — 它們對於 Hook 的正常執行至關重要。** |
There was a problem hiding this comment.
Hi @leah-z-liu
Thank you for helping translation, I left some suggestions. If have any question feel free left comments.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Sorry about the delay! The hooks-effect page is pretty long -- please let me know if I missed something and/or if you have any suggestions.