docs(cn): translate learn/reusing logic with custom hooks into Chinese #1157
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
…rthaYan/zh-hans.react.dev into learn/reusing-logic-with-custom-hooks
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
Yucohny
reviewed
Jun 19, 2023
| --- | ||
|
|
||
| <Intro> | ||
|
|
||
| React comes with several built-in Hooks like `useState`, `useContext`, and `useEffect`. Sometimes, you'll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application's needs. | ||
| React 有一些内置 Hook，例如 `useState`， `useContext` 和 `useEffect`。有时你需要一个用途更特殊的 Hook：例如获取数据，记录用户是否在线或者连接聊天室。虽然 React 中可能找不到这些 Hook，但是你可以根据应用需求创建自己的 Hook。 |
There was a problem hiding this comment.
Suggested change
| React 有一些内置 Hook，例如 `useState`， `useContext` 和 `useEffect`。有时你需要一个用途更特殊的 Hook：例如获取数据，记录用户是否在线或者连接聊天室。虽然 React 中可能找不到这些 Hook，但是你可以根据应用需求创建自己的 Hook。 | |
| React 有一些内置 Hook，例如 `useState`，`useContext` 和 `useEffect`。有时你需要一个用途更特殊的 Hook：例如获取数据，记录用户是否在线或者连接聊天室。虽然 React 中可能找不到这些 Hook，但是你可以根据应用需求创建自己的 Hook。 |
|
|
||
| Now imagine you *also* want to use the same logic in a different component. You want to implement a Save button that will become disabled and show "Reconnecting..." instead of "Save" while the network is off. | ||
| 假设现在你想在另一个不同的组件里 **也** 使用同样的逻辑。你希望实现一个 Save 按钮，每当网络断开这个按钮就会不可用并且显示“Reconnecting...”而不是“Save”。 |
|
|
||
| Now your components don't have as much repetitive logic. **More importantly, the code inside them describes *what they want to do* (use the online status!) rather than *how to do it* (by subscribing to the browser events).** | ||
| 现在组件里没有那么多的重复逻辑了。**更重要的是，组件内部的代码描述的是想要做什么（使用在线状态！），而不是怎么做（通过订阅浏览器事件完成）** |
There was a problem hiding this comment.
Suggested change
| 现在组件里没有那么多的重复逻辑了。**更重要的是，组件内部的代码描述的是想要做什么（使用在线状态！），而不是怎么做（通过订阅浏览器事件完成）** | |
| 现在组件里没有那么多的重复逻辑了。**更重要的是，组件内部的代码描述的是想要做什么（使用在线状态！），而不是怎么做（通过订阅浏览器事件完成）**。 |
|
|
||
| The code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks [need to be pure.](/learn/keeping-components-pure) Think of custom Hooks' code as part of your component's body! | ||
| 每当组件重新渲染，自定义 Hook 中的代码就会重新运行。这就是组件和自定义 Hook 都 [需要纯粹](/learn/keeping-components-pure) 的原因。我们应该把自定义 Hook 的代码看作组件主体的一部分。 |
There was a problem hiding this comment.
虽然能理解意思，但是”需要纯粹“这个表达有点怪怪的，可以考虑一下有没有更加贴切顺畅的表达。
|
@Yucohny 已修改 |
Yucohny
reviewed
Jun 25, 2023
| @@ -643,9 +643,9 @@ export default function ChatRoom({ roomId }) { | |||
| } | |||
| ``` | |||
|
|
|||
| This looks much simpler! (But it does the same thing.) | |||
| 这看上去简洁多了！（但是它做的是同一件事。） | |||
There was a problem hiding this comment.
Suggested change
| 这看上去简洁多了！（但是它做的是同一件事。） | |
| 这看上去简洁多了（但是它做的是同一件事）！ |
|
|
||
| Notice that the logic *still responds* to prop and state changes. Try editing the server URL or the selected room: | ||
| 注意逻辑 **仍然响应** prop 和 state 的变化。尝试编辑 server URL 或选中的房间： |
| @@ -1715,7 +1715,7 @@ html, body { min-height: 300px; } | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| However, you didn't *have to* do that. As with regular functions, ultimately you decide where to draw the boundaries between different parts of your code. You could also take a very different approach. Instead of keeping the logic in the Effect, you could move most of the imperative logic inside a JavaScript [class:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) | |||
| 但是 **没有必要** 这样做。和常规函数一样，最终是由你决定在哪里绘制代码不同部分之间的边界。你也可以采取不一样的方法。把大部分必要的逻辑移入一个 [JavaScript class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)，而不是把逻辑保留在 Effect 中： | |||
There was a problem hiding this comment.
请考虑此处有关“JavaScript class”的表达。
|
可以自己再回顾看看，调整调整有关表达~ |
收到 |
yionr
reviewed
Jun 28, 2023
| 1. **React component names must start with a capital letter,** like `StatusBar` and `SaveButton`. React components also need to return something that React knows how to display, like a piece of JSX. | ||
| 2. **Hook names must start with `use` followed by a capital letter,** like [`useState`](/reference/react/useState) (built-in) or `useOnlineStatus` (custom, like earlier on the page). Hooks may return arbitrary values. | ||
| 1. **React 组件名称必须以大写字母开头**，比如 `StatusBar` 和 `SaveButton`。React 组件还需要返回一些 React 能够显示的内容，比如一段 JSX。 | ||
| 2. **Hook 的名称必须以后跟一个大写字母的 `use` 开头**，像 [`useState`](/reference/react/useState) (内置) 或者 `useOnlineStatus` (像本文早前的自定义 Hook)。Hook 可以返回任意值。 |
|
|
||
| </DeepDive> | ||
|
|
||
| ### Custom Hooks let you share stateful logic, not state itself {/*custom-hooks-let-you-share-stateful-logic-not-state-itself*/} | ||
| ### 自定义 Hook 共享有状态逻辑，而不是 state 本身 {/*custom-hooks-let-you-share-stateful-logic-not-state-itself*/} |
There was a problem hiding this comment.
是否可以改成 “自定义 Hook 用于共享有状态的逻辑”？
第一次看有点看不懂，相比而言看英文更清楚
There was a problem hiding this comment.
贡献状态逻辑，而不是状态本身。
除了表达上，还需要注意 stateful 与 state 中文翻译的对应。
|
|
||
| Because custom Hooks re-render together with your component, they always receive the latest props and state. To see what this means, consider this chat room example. Change the server URL or the chat room: | ||
| 由于自定义 Hook 会随着组件一起重新渲染，所以组件可以永远接收到最新的 props 和 state。想知道这意味着什么，那就看看这个聊天室的示例。修改 Server URL 或者聊天室 ID： |
There was a problem hiding this comment.
这里更直观一点其实把最后一句改为“修改 ServeUrl 或者 roomID：”更好，但是这么改的话和原文的翻译好像又有些区别，不知道能不能这么改？
|
|
||
| Let's say you want to implement a fade-in animation *from scratch* using the browser [`requestAnimationFrame`](https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame) API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you [hold in a ref](/learn/manipulating-the-dom-with-refs) until it reaches `1`. Your code might start like this: | ||
| 假设你想要使用浏览器的 [`requestAnimationFrame`](https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame) API 实现一个 **从头开始的** fade-in 动画。你也许会从一个设置动画循环的 Effect 开始。在动画的每一帧中，你可以修改 [ref 持有的](/learn/manipulating-the-dom-with-refs) DOM 节点的 opacity 属性直到 `1`。你的代码一开始可能是这样： |
There was a problem hiding this comment.
“实现一个 从头开始的 fade-in 动画” 应该改为 “从头开始 实现一个 fade-in 动画”。
|
|
||
| Currently, your `useCounter` Hook does two things. It sets up an interval, and it also increments a state variable on every interval tick. Split out the logic that sets up the interval into a separate Hook called `useInterval`. It should take two arguments: the `onTick` callback, and the `delay`. After this change, your `useCounter` implementation should look like this: | ||
| 现在 `useCounter` Hook 做两件事。设置一个 interval，并且在每个interval tick 内递增一次 state 变量。将设置 interval 的逻辑拆分到一个独立 Hook `useInterval`。它应该有两个参数：`onTick` 回调函数和 `delay`。本次修改后 `useCounter` 的实现应该如下所示： |
There was a problem hiding this comment.
“并且在每个interval tick 内递增一次 state 变量。”
少了个空格
|
|
||
| In fact, there are five (!) different red dots being rendered. You don't see them because currently they all appear at the same position. This is what you need to fix. What you want to implement instead is a "staggered" movement: each dot should "follow" the previous dot's path. For example, if you quickly move your cursor, the first dot should follow it immediately, the second dot should follow the first dot with a small delay, the third dot should follow the second dot, and so on. | ||
| 事实上，有 5(!) 个正在被渲染的不同红点。你看不见是因为他们现在都显示在同一位置。这就是你需要修复的问题。你想要实现的是一个“交错”运动：每个圆点应该“跟随”它前一个点的路径。例如如果你快速移动光标，第一个点应该立刻跟着它，第二个应该在小小的延时后跟上第一个点，第三个点应该跟着第二个点等等。 |
There was a problem hiding this comment.
这里感叹号一定要使用全角符号吗，效果如下所示，看上去有点奇怪 5（！）个
目前修改为 5（!）个
There was a problem hiding this comment.
是的，如果需要使用相关符号，统一调整为全角符号。但是有的时候可以考虑直接去除符号的表达，如此处可以直接去除“(!)”，不作为翻译后的内容。
|
|
||
| You need to implement the `useDelayedValue` custom Hook. Its current implementation returns the `value` provided to it. Instead, you want to return the value back from `delay` milliseconds ago. You might need some state and an Effect to do this. | ||
| 你需要实现自定义 Hook `useDelayedValue`。它当前实现返回的是提供给它的 `value`。而你想从 `delay` 毫秒之前返回 `value`。你可能需要一些 state 和一个 Effect 来完成这个任务。 |
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.
@QC-L @Yucohny @awxiaoxian2020 已翻译完成，需要校对