From a51f03b276fe6f8f5c2be446a827910055fbb648 Mon Sep 17 00:00:00 2001 From: bailnl Date: Sat, 16 Feb 2019 01:04:48 +0800 Subject: [PATCH 01/48] docs(cn): translate content/docs/hooks-custom.md to Chinese --- content/docs/hooks-custom.md | 67 ++++++++++++++++++------------------ 1 file changed, 34 insertions(+), 33 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index ac9dad6daa..948f43965f 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -1,16 +1,16 @@ --- id: hooks-custom -title: Building Your Own Hooks +title: 自定义 Hooks permalink: docs/hooks-custom.html next: hooks-reference.html prev: hooks-rules.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*Hooks* 是 React 16.8 的新增特性，允许你不在编写类(class)的情况下使用状态(state)及 React 其他特性。 -Building your own Hooks lets you extract component logic into reusable functions. +通过自定义 Hooks，可以将组件逻辑提取到可重用的函数中。 -When we were learning about [using the Effect Hook](/docs/hooks-effect.html#example-using-hooks-1), we saw this component from a chat application that displays a message indicating whether a friend is online or offline: +当我们学习[使用 Effect Hook](/docs/hooks-effect.html#example-using-hooks-1)时，我们从聊天程序中看到了下面这个组件，该组件指示朋友当前的状态是否在线： ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -36,7 +36,7 @@ function FriendStatus(props) { } ``` -Now let's say that our chat application also has a contact list, and we want to render names of online users with a green color. We could copy and paste similar logic above into our `FriendListItem` component but it wouldn't be ideal: +现在让聊天应用拥有一个联系人列表，当用户在线时将名字设置为绿色。我们可以将上面类似的逻辑复制并粘贴到 `FriendListItem` 组件中来，但是这样并不理想： ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -63,15 +63,16 @@ function FriendListItem(props) { } ``` -Instead, we'd like to share this logic between `FriendStatus` and `FriendListItem`. +相反，我们想在 `FriendStatus` 和 `FriendListItem` 之间共享逻辑。 -Traditionally in React, we've had two popular ways to share stateful logic between components: [render props](/docs/render-props.html) and [higher-order components](/docs/higher-order-components.html). We will now look at how Hooks solve many of the same problems without forcing you to add more components to the tree. +在之前React中，有两种流行的方式来共享组件之间的状态逻辑: [render props](/docs/render-props.html) 和 [高阶组件](/docs/higher-order-components.html)，我们现在将看看 Hook 是如何在不强制添加更多组件的情况下解决相同的问题。 ## Extracting a Custom Hook {#extracting-a-custom-hook} +## 提取自定义 Hook {#extracting-a-custom-hook} -When we want to share logic between two JavaScript functions, we extract it to a third function. Both components and Hooks are functions, so this works for them too! +当我们想在两个函数之间共享逻辑时，我们会将它提取成第三个函数中。而组件和 Hooks 都是函数，当然也同样适用。 -**A custom Hook is a JavaScript function whose name starts with "`use`" and that may call other Hooks.** For example, `useFriendStatus` below is our first custom Hook: +**自定义 Hook 是一个函数，其名称以“`use`”开头，函数内部可以调用其他的 Hooks。** 例如，下面的 `useFriendStatus` 是我们第一个自定义的 Hook: ```js{3} import React, { useState, useEffect } from 'react'; @@ -94,11 +95,11 @@ function useFriendStatus(friendID) { } ``` -There's nothing new inside of it -- the logic is copied from the components above. Just like in a component, make sure to only call other Hooks unconditionally at the top level of your custom Hook. +这里面并没有任何新的内容——逻辑是从上面的组件复制的。就像在组件中一样，请确保只在自定义 Hook 的顶层无条件(译者注：如if，三元等)地调用其他 Hooks. -Unlike a React component, a custom Hook doesn't need to have a specific signature. We can decide what it takes as arguments, and what, if anything, it should return. In other words, it's just like a normal function. Its name should always start with `use` so that you can tell at a glance that the [rules of Hooks](/docs/hooks-rules.html) apply to it. +与 React 组件不同的是，自定义 Hook 不需要具有特定的签名。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 `use` 开头，这样可以一目了然地看出其符合[Hook 的规则](/docs/hooks-rules.html)。 -The purpose of our `useFriendStatus` Hook is to subscribe us to a friend's status. This is why it takes `friendID` as an argument, and returns whether this friend is online: +我们这个 Hook `useFriendStatus` 的目的是订阅某个朋友的在线状态。这也就是为什么我们需要 `friendID` 作为参数，并返回这位朋友的是否在线状态。 ```js function useFriendStatus(friendID) { @@ -110,13 +111,13 @@ function useFriendStatus(friendID) { } ``` -Now let's see how we can use our custom Hook. +现在让我们看看应该如何使用自定义 Hook。 -## Using a Custom Hook {#using-a-custom-hook} +## 使用自定义Hook {#using-a-custom-hook} -In the beginning, our stated goal was to remove the duplicated logic from the `FriendStatus` and `FriendListItem` components. Both of them want to know whether a friend is online. +在开始的时候，我们的目标是在 `FriendStatus` 和 `FriendListItem` 组件中去除重复的逻辑，即：这两个组件都想知道朋友是否在线。 -Now that we've extracted this logic to a `useFriendStatus` hook, we can *just use it:* +现在我们已经将这个逻辑提到了名称叫 `useFriendStatus` 的自定义 Hook 中，接下来我们可以使用它。 ```js{2} function FriendStatus(props) { @@ -141,19 +142,19 @@ function FriendListItem(props) { } ``` -**Is this code equivalent to the original examples?** Yes, it works in exactly the same way. If you look closely, you'll notice we didn't make any changes to the behavior. All we did was to extract some common code between two functions into a separate function. **Custom Hooks are a convention that naturally follows from the design of Hooks, rather than a React feature.** +**这段代码等价于原来的示例代码吗?** 是的，它的工作方式完全一样。如果你仔细观察，你会发现我们没有对其行为做任何的改变，我们所做的只是将两个函数之间一些共同的代码提取到单独的函数中。**自定义 Hook 是一种自然遵循 Hooks 设计的约定，而不是 React 的特性。** -**Do I have to name my custom Hooks starting with “`use`”?** Please do. This convention is very important. Without it, we wouldn't be able to automatically check for violations of [rules of Hooks](/docs/hooks-rules.html) because we couldn't tell if a certain function contains calls to Hooks inside of it. +**我必须以 “`use`” 开头来自定义 Hooks 吗?** 请这么做。这个约定非常重要。没有它，React 无法自动检查是否违反了[Hook 的规则](/docs/hooks-rules.html)，因为我们无法判断某个函数是否包含了 Hooks 的调用。 -**Do two components using the same Hook share state?** No. Custom Hooks are a mechanism to reuse *stateful logic* (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated. +**在两个组件中使用相同的 Hook 会共享状态吗?** 不会。自定义 Hooks 是一种重用*有状态逻辑*的机制(例如设置订阅并记住当前值)，所以每次使用自定义 Hook 时，其中的所有 `state` 和 `effect` 都是完全隔离的。 -**How does a custom Hook get isolated state?** Each *call* to a Hook gets isolated state. Because we call `useFriendStatus` directly, from React's point of view our component just calls `useState` and `useEffect`. And as we [learned](/docs/hooks-state.html#tip-using-multiple-state-variables) [earlier](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), we can call `useState` and `useEffect` many times in one component, and they will be completely independent. +**自定义Hook如何获得隔离状态?** 每次对Hook的*调用*都会被隔离状态. 因为我们直接调用 `useFriendStatus`，从 React 的角度来看，我们的组件只是调用了`useState` 和 `useEffect`. 正如我们前面的章节了解到的([tip：使用多个state](/docs/hooks-state.html#tip-using-multiple-state-variables) 和 [tip: 使用多个effect分离问题](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns))，我们可以在一个组件中调用 `useState` 和 `useEffect` 很多次，它们将是完全独立的。 -### Tip: Pass Information Between Hooks {#tip-pass-information-between-hooks} +### Tip: 在多个 Hook 之间传递信息 {#tip-pass-information-between-hooks} -Since Hooks are functions, we can pass information between them. +由于 Hooks 是函数，我们可以在它们之间传递信息。 -To illustrate this, we'll use another component from our hypothetical chat example. This is a chat message recipient picker that displays whether the currently selected friend is online: +为了说明这一点，我们将使用假设聊天示例中的另一个组件。这是一个聊天消息收件人选取器，显示当前选定的好友是否在线: ```js{8-9,13} const friendList = [ @@ -184,24 +185,24 @@ function ChatRecipientPicker() { } ``` -We keep the currently chosen friend ID in the `recipientID` state variable, and update it if the user chooses a different friend in the `` 中选择了其他的朋友，我们就更新这个变量。 -Because the `useState` Hook call gives us the latest value of the `recipientID` state variable, we can pass it to our custom `useFriendStatus` Hook as an argument: +因为 `useState` 为我们提供了 `recipientID` 状态变量的最新值，所以我们可以将它作为参数传递给我们的自定义 Hook `useFriendStatus`： ```js const [recipientID, setRecipientID] = useState(1); const isRecipientOnline = useFriendStatus(recipientID); ``` -This lets us know whether the *currently selected* friend is online. If we pick a different friend and update the `recipientID` state variable, our `useFriendStatus` Hook will unsubscribe from the previously selected friend, and subscribe to the status of the newly selected one. +这让我们知道*当前选中*的朋友是否在线。如果我们选择不同的朋友并更新 `recipientID` 状态变量，我们的 `useFriendStatusHook` 将会取消订阅之前选中的朋友，并订阅新选中的朋友状态。 ## `useYourImagination()` {#useyourimagination} -Custom Hooks offer the flexibility of sharing logic that wasn't possible in React components before. You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven't considered. What's more, you can build Hooks that are just as easy to use as React's built-in features. +自定义 Hooks 提供了以前在 React 组件中无法实现的共享逻辑的灵活性。你可以通过编写自定义 Hooks，去涵盖各种用例，如表单处理，动画，声明订阅，计时器，以及可能还有更多我们未考虑过的用例。更重要的是，你可以编写与 React 的内置特性一样易于使用的 Hooks。 -Try to resist adding abstraction too early. Now that function components can do more, it's likely that the average function component in your codebase will become longer. This is normal -- don't feel like you *have to* immediately split it into Hooks. But we also encourage you to start spotting cases where a custom Hook could hide complex logic behind a simple interface, or help untangle a messy component. +尽量不要过早地添加抽象。既然函数组件可以做得更多，那么代码库中平均函数组件很可能会变得更长。这是正常的——不要觉得你必须立即将其拆分为 Hook。但我们鼓励你去发现可以通过自定义 Hook 将复杂的逻辑隐藏在简单的界面背后或者能解放组件混乱的情况。 -For example, maybe you have a complex component that contains a lot of local state that is managed in an ad-hoc way. `useState` doesn't make centralizing the update logic any easier so might you prefer to write it as a [Redux](https://redux.js.org/) reducer: +例如，你可能有一个复杂的组件，包含了以临时方式来管理大量的本地状态。`useState` 不会使集中更新逻辑变得更容易，因此您可能更愿意将其编写为 [redux](http://redux.js.org/) reducer。 ```js function todosReducer(state, action) { @@ -218,9 +219,9 @@ function todosReducer(state, action) { } ``` -Reducers are very convenient to test in isolation, and scale to express complex update logic. You can further break them apart into smaller reducers if necessary. However, you might also enjoy the benefits of using React local state, or might not want to install another library. +Reducers 非常便于单独测试，并且可以扩展以表达复杂的更新逻辑。如有必要，您可以将它们分成更小的 reducer。但是，您可能还享受使用 React 本地状态的好处，或者可能不想安装其他库。 -So what if we could write a `useReducer` Hook that lets us manage the *local* state of our component with a reducer? A simplified version of it might look like this: +那么，如果我们可以编写一个名叫 `useReducer` 的 Hook 来让我们使用 reducer 管理组件的本地状态呢？它的简化版本可能如下所示： ```js function useReducer(reducer, initialState) { @@ -235,7 +236,7 @@ function useReducer(reducer, initialState) { } ``` -Now we could use it in our component, and let the reducer drive its state management: +现在我们可以在我们的组件中使用它，让 reducer 驱动它的状态管理： ```js{2} function Todos() { @@ -249,4 +250,4 @@ function Todos() { } ``` -The need to manage local state with a reducer in a complex component is common enough that we've built the `useReducer` Hook right into React. You'll find it together with other built-in Hooks in the [Hooks API reference](/docs/hooks-reference.html). +在复杂组件中使用 reducer 管理本地状态的需求很常见，我们已经将 `useReducer` Hook 内置到 React 中。你可以在[Hooks API 参考](/docs/hooks-reference.html)中找到它与其他内置的 Hook 一起使用。 From 9c89386f4935e56c3f9f89562337adc0d472d471 Mon Sep 17 00:00:00 2001 From: bailnl Date: Mon, 18 Feb 2019 21:00:41 +0800 Subject: [PATCH 02/48] Update content/docs/hooks-custom.md --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 948f43965f..c2415dcd7d 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -36,7 +36,7 @@ function FriendStatus(props) { } ``` -现在让聊天应用拥有一个联系人列表，当用户在线时将名字设置为绿色。我们可以将上面类似的逻辑复制并粘贴到 `FriendListItem` 组件中来，但是这样并不理想： +现在比如说我们的聊天应用有一个联系人列表，当用户在线时需要把名字设置为绿色。我们可以把上面类似的逻辑复制并粘贴到 `FriendListItem` 组件中来，但这并不是理想的做法： ```js{4-15} import React, { useState, useEffect } from 'react'; From 2d5c269ed4d011bff5522418b897f74564ade3ff Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:01:50 +0800 Subject: [PATCH 03/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index c2415dcd7d..362b6bf483 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -200,7 +200,7 @@ function ChatRecipientPicker() { 自定义 Hooks 提供了以前在 React 组件中无法实现的共享逻辑的灵活性。你可以通过编写自定义 Hooks，去涵盖各种用例，如表单处理，动画，声明订阅，计时器，以及可能还有更多我们未考虑过的用例。更重要的是，你可以编写与 React 的内置特性一样易于使用的 Hooks。 -尽量不要过早地添加抽象。既然函数组件可以做得更多，那么代码库中平均函数组件很可能会变得更长。这是正常的——不要觉得你必须立即将其拆分为 Hook。但我们鼓励你去发现可以通过自定义 Hook 将复杂的逻辑隐藏在简单的界面背后或者能解放组件混乱的情况。 +尽量不要过早地增加抽象。既然函数定义组件可以做更多事了，那么代码库中函数定义组件的代码行数可能会变得更多。这是正常的 —— 不要觉得你必须立即将其拆分为 Hook。但我们鼓励你去发现可以通过自定义 Hook 将复杂的逻辑隐藏在简单的接口背后，或者可以帮助解决组件内部杂乱无章的情况的点。 例如，你可能有一个复杂的组件，包含了以临时方式来管理大量的本地状态。`useState` 不会使集中更新逻辑变得更容易，因此您可能更愿意将其编写为 [redux](http://redux.js.org/) reducer。 From 5caaaee5a1f51ea28bce08c5eae0204baf9690b2 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:02:22 +0800 Subject: [PATCH 04/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 362b6bf483..384d80956c 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -198,7 +198,7 @@ function ChatRecipientPicker() { ## `useYourImagination()` {#useyourimagination} -自定义 Hooks 提供了以前在 React 组件中无法实现的共享逻辑的灵活性。你可以通过编写自定义 Hooks，去涵盖各种用例，如表单处理，动画，声明订阅，计时器，以及可能还有更多我们未考虑过的用例。更重要的是，你可以编写与 React 的内置特性一样易于使用的 Hooks。 +自定义 Hooks 提供了以前在 React 组件中无法实现的共享逻辑的灵活性。你可以创建涵盖各种场景的自定义 Hooks，如表单处理、动画、订阅声明、计时器，以及可能还有更多我们没想到的场景。更重要的是，创建自定义 Hooks 就想使用 React 内置的功能一样简单。 尽量不要过早地增加抽象。既然函数定义组件可以做更多事了，那么代码库中函数定义组件的代码行数可能会变得更多。这是正常的 —— 不要觉得你必须立即将其拆分为 Hook。但我们鼓励你去发现可以通过自定义 Hook 将复杂的逻辑隐藏在简单的接口背后，或者可以帮助解决组件内部杂乱无章的情况的点。 From afd60a37c543cf166a2e3946ec83e5fe213e0895 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:02:53 +0800 Subject: [PATCH 05/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 384d80956c..edc79518bd 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -194,7 +194,7 @@ function ChatRecipientPicker() { const isRecipientOnline = useFriendStatus(recipientID); ``` -这让我们知道*当前选中*的朋友是否在线。如果我们选择不同的朋友并更新 `recipientID` 状态变量，我们的 `useFriendStatusHook` 将会取消订阅之前选中的朋友，并订阅新选中的朋友状态。 +这让我们知道*当前选中*的好友是否在线。如果我们选择不同的好友并更新 `recipientID` 状态变量，我们的 `useFriendStatusHook` 将会取消订阅之前选中的好友，并订阅新选中的好友状态。 ## `useYourImagination()` {#useyourimagination} From 9ee8613ef25292e30f7b9a44fc58a0796e3397c7 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:03:22 +0800 Subject: [PATCH 06/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index edc79518bd..ba290ab280 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -65,7 +65,7 @@ function FriendListItem(props) { 相反，我们想在 `FriendStatus` 和 `FriendListItem` 之间共享逻辑。 -在之前React中，有两种流行的方式来共享组件之间的状态逻辑: [render props](/docs/render-props.html) 和 [高阶组件](/docs/higher-order-components.html)，我们现在将看看 Hook 是如何在不强制添加更多组件的情况下解决相同的问题。 +目前为止，在 React 中有两种流行的方式来共享组件之间的状态逻辑: [render props](/docs/render-props.html) 和[高阶组件](/docs/higher-order-components.html)，现在让我们来看看 Hooks 是如何在让你不增加组件的情况下解决相同问题的。 ## Extracting a Custom Hook {#extracting-a-custom-hook} ## 提取自定义 Hook {#extracting-a-custom-hook} From 0333619a900b127e3e46a647900ed549358be214 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:03:39 +0800 Subject: [PATCH 07/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index ba290ab280..1396132375 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -10,7 +10,7 @@ prev: hooks-rules.html 通过自定义 Hooks，可以将组件逻辑提取到可重用的函数中。 -当我们学习[使用 Effect Hook](/docs/hooks-effect.html#example-using-hooks-1)时，我们从聊天程序中看到了下面这个组件，该组件指示朋友当前的状态是否在线： +在我们学习[使用 Effect Hook](/docs/hooks-effect.html#example-using-hooks-1)时，我们已经见过这个聊天程序中的组件，该组件用来显示好友的在线状态： ```js{4-15} import React, { useState, useEffect } from 'react'; From 01bf897399926194555ed21c6a2ba4cb317aaffe Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:04:12 +0800 Subject: [PATCH 08/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 1396132375..d00964580d 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -70,7 +70,7 @@ function FriendListItem(props) { ## Extracting a Custom Hook {#extracting-a-custom-hook} ## 提取自定义 Hook {#extracting-a-custom-hook} -当我们想在两个函数之间共享逻辑时，我们会将它提取成第三个函数中。而组件和 Hooks 都是函数，当然也同样适用。 +当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。而组件和 Hooks 都是函数，所以也同样适用这种方式。 **自定义 Hook 是一个函数，其名称以“`use`”开头，函数内部可以调用其他的 Hooks。** 例如，下面的 `useFriendStatus` 是我们第一个自定义的 Hook: From 257bfb97f9f40c781a7cad8ded0cd9b9896c57b5 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:04:31 +0800 Subject: [PATCH 09/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index d00964580d..4b2505f966 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -99,7 +99,7 @@ function useFriendStatus(friendID) { 与 React 组件不同的是，自定义 Hook 不需要具有特定的签名。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 `use` 开头，这样可以一目了然地看出其符合[Hook 的规则](/docs/hooks-rules.html)。 -我们这个 Hook `useFriendStatus` 的目的是订阅某个朋友的在线状态。这也就是为什么我们需要 `friendID` 作为参数，并返回这位朋友的是否在线状态。 +我们这个 Hook `useFriendStatus` 的目的是订阅某个好友的在线状态。这也就是为什么我们需要 `friendID` 作为参数，并返回这位朋友的在线状态。 ```js function useFriendStatus(friendID) { From 8d3a268392d44cf9c9f715e31015c086115b4fed Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:04:41 +0800 Subject: [PATCH 10/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 4b2505f966..d62a0aabdd 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -113,7 +113,7 @@ function useFriendStatus(friendID) { 现在让我们看看应该如何使用自定义 Hook。 -## 使用自定义Hook {#using-a-custom-hook} +## 使用自定义 Hook {#using-a-custom-hook} 在开始的时候，我们的目标是在 `FriendStatus` 和 `FriendListItem` 组件中去除重复的逻辑，即：这两个组件都想知道朋友是否在线。 From ca3ebe1ec2b90ebe9420ad3123fb17d3eefa356f Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:04:57 +0800 Subject: [PATCH 11/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index d62a0aabdd..c1aff8e31a 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -115,7 +115,7 @@ function useFriendStatus(friendID) { ## 使用自定义 Hook {#using-a-custom-hook} -在开始的时候，我们的目标是在 `FriendStatus` 和 `FriendListItem` 组件中去除重复的逻辑，即：这两个组件都想知道朋友是否在线。 +我们一开始的目标是在 `FriendStatus` 和 `FriendListItem` 组件中去除重复的逻辑，即：这两个组件都想知道好友是否在线。 现在我们已经将这个逻辑提到了名称叫 `useFriendStatus` 的自定义 Hook 中，接下来我们可以使用它。 From 7691deb8dece69f715134d96eda0715e693fe56b Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:05:17 +0800 Subject: [PATCH 12/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index c1aff8e31a..7c34a0c191 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -117,7 +117,7 @@ function useFriendStatus(friendID) { 我们一开始的目标是在 `FriendStatus` 和 `FriendListItem` 组件中去除重复的逻辑，即：这两个组件都想知道好友是否在线。 -现在我们已经将这个逻辑提到了名称叫 `useFriendStatus` 的自定义 Hook 中，接下来我们可以使用它。 +现在我们已经把这个逻辑提到了一个叫 `useFriendStatus` 的自定义 Hook 中，然后就可以*用它了：* ```js{2} function FriendStatus(props) { From d459aa8c7c1eabcc5d6bf7efa903778dcffc1f7b Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:05:44 +0800 Subject: [PATCH 13/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 7c34a0c191..8bd09e9e7f 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -146,7 +146,7 @@ function FriendListItem(props) { **我必须以 “`use`” 开头来自定义 Hooks 吗?** 请这么做。这个约定非常重要。没有它，React 无法自动检查是否违反了[Hook 的规则](/docs/hooks-rules.html)，因为我们无法判断某个函数是否包含了 Hooks 的调用。 -**在两个组件中使用相同的 Hook 会共享状态吗?** 不会。自定义 Hooks 是一种重用*有状态逻辑*的机制(例如设置订阅并记住当前值)，所以每次使用自定义 Hook 时，其中的所有 `state` 和 `effect` 都是完全隔离的。 +**在两个组件中使用相同的 Hook 会共享状态吗?** 不会。自定义 Hooks 是一种重用*状态逻辑*的机制(例如设置订阅并记住当前值)，所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。 **自定义Hook如何获得隔离状态?** 每次对Hook的*调用*都会被隔离状态. 因为我们直接调用 `useFriendStatus`，从 React 的角度来看，我们的组件只是调用了`useState` 和 `useEffect`. 正如我们前面的章节了解到的([tip：使用多个state](/docs/hooks-state.html#tip-using-multiple-state-variables) 和 [tip: 使用多个effect分离问题](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns))，我们可以在一个组件中调用 `useState` 和 `useEffect` 很多次，它们将是完全独立的。 From 165e81317439addb5a3e48e4448bcc25791d8c2c Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:06:39 +0800 Subject: [PATCH 14/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 8bd09e9e7f..27dff6f0bb 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -148,7 +148,7 @@ function FriendListItem(props) { **在两个组件中使用相同的 Hook 会共享状态吗?** 不会。自定义 Hooks 是一种重用*状态逻辑*的机制(例如设置订阅并记住当前值)，所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。 -**自定义Hook如何获得隔离状态?** 每次对Hook的*调用*都会被隔离状态. 因为我们直接调用 `useFriendStatus`，从 React 的角度来看，我们的组件只是调用了`useState` 和 `useEffect`. 正如我们前面的章节了解到的([tip：使用多个state](/docs/hooks-state.html#tip-using-multiple-state-variables) 和 [tip: 使用多个effect分离问题](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns))，我们可以在一个组件中调用 `useState` 和 `useEffect` 很多次，它们将是完全独立的。 +**自定义 Hook 如何获取独立的 state?** 每次*调用* Hook，它都会获取独立的 state。由于我们直接调用了 `useFriendStatus`，从 React 的角度来看，我们的组件只是调用了 `useState` 和 `useEffect`。 正如我们在[前面的章节](/docs/hooks-state.html#tip-using-multiple-state-variables)[了解到的](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns)，我们可以在一个组件中多次调用 `useState` 和 `useEffect`，它们是完全独立的。 ### Tip: 在多个 Hook 之间传递信息 {#tip-pass-information-between-hooks} From b4a0dfddac3c8346334b48dbbc72100fe46d3318 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:06:58 +0800 Subject: [PATCH 15/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 27dff6f0bb..2544b2dd4e 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -152,7 +152,7 @@ function FriendListItem(props) { ### Tip: 在多个 Hook 之间传递信息 {#tip-pass-information-between-hooks} -由于 Hooks 是函数，我们可以在它们之间传递信息。 +由于 Hooks 就是函数，我们可以在它们之间传递信息。 为了说明这一点，我们将使用假设聊天示例中的另一个组件。这是一个聊天消息收件人选取器，显示当前选定的好友是否在线: From 26643878387afc9ae74e0fa6fbd29d3afa320542 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:07:10 +0800 Subject: [PATCH 16/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 2544b2dd4e..760718b7b0 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -154,7 +154,7 @@ function FriendListItem(props) { 由于 Hooks 就是函数，我们可以在它们之间传递信息。 -为了说明这一点，我们将使用假设聊天示例中的另一个组件。这是一个聊天消息收件人选取器，显示当前选定的好友是否在线: +我们将使用聊天应用中的另一个组件来说明这一点。这是一个消息接收人的选择器，它会显示当前选定的好友是否在线: ```js{8-9,13} const friendList = [ From 655c47b878d12e5106d0cbb7d5649ffbbe503db8 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 18 Feb 2019 21:07:27 +0800 Subject: [PATCH 17/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 760718b7b0..53d61b5774 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -185,7 +185,7 @@ function ChatRecipientPicker() { } ``` -我们将当前选择的朋友 ID 保存在 `recipientID` 状态变量中，如果用户在 `` 中选择其他好友时更新这个变量。 因为 `useState` 为我们提供了 `recipientID` 状态变量的最新值，所以我们可以将它作为参数传递给我们的自定义 Hook `useFriendStatus`： From 20e8f075e16be10537a24b5acdbac20a1baeed2b Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 21:29:17 +0800 Subject: [PATCH 18/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 53d61b5774..9a90feb72d 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -6,7 +6,7 @@ next: hooks-reference.html prev: hooks-rules.html --- -*Hooks* 是 React 16.8 的新增特性，允许你不在编写类(class)的情况下使用状态(state)及 React 其他特性。 +*Hooks* 是 React 16.8 的新增特性，允许你不在编写 class 组件的情况下使用 state 及 React 其他特性。 通过自定义 Hooks，可以将组件逻辑提取到可重用的函数中。 From 05282b7eb38603b9af9c5d7c1fc57644c992dfa2 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 21:30:17 +0800 Subject: [PATCH 19/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 9a90feb72d..576de645ea 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -10,7 +10,7 @@ prev: hooks-rules.html 通过自定义 Hooks，可以将组件逻辑提取到可重用的函数中。 -在我们学习[使用 Effect Hook](/docs/hooks-effect.html#example-using-hooks-1)时，我们已经见过这个聊天程序中的组件，该组件用来显示好友的在线状态： +在我们学习[使用 Effect Hook](/docs/hooks-effect.html#example-using-hooks-1) 时，我们已经见过这个聊天程序中的组件，该组件用于显示好友的在线状态： ```js{4-15} import React, { useState, useEffect } from 'react'; From 38d7bef932aadcbcc4f594bf61e69e661605f0ae Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 21:31:52 +0800 Subject: [PATCH 20/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 576de645ea..5cac855335 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -63,7 +63,7 @@ function FriendListItem(props) { } ``` -相反，我们想在 `FriendStatus` 和 `FriendListItem` 之间共享逻辑。 +相反，我们希望在 `FriendStatus` 和 `FriendListItem` 之间共享逻辑。 目前为止，在 React 中有两种流行的方式来共享组件之间的状态逻辑: [render props](/docs/render-props.html) 和[高阶组件](/docs/higher-order-components.html)，现在让我们来看看 Hooks 是如何在让你不增加组件的情况下解决相同问题的。 From 8932442e921be4b0e7760e91c4a0c1a32bbb3702 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 21:32:49 +0800 Subject: [PATCH 21/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 5cac855335..2a942d62ad 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -72,7 +72,7 @@ function FriendListItem(props) { 当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。而组件和 Hooks 都是函数，所以也同样适用这种方式。 -**自定义 Hook 是一个函数，其名称以“`use`”开头，函数内部可以调用其他的 Hooks。** 例如，下面的 `useFriendStatus` 是我们第一个自定义的 Hook: +**自定义 Hook 是一个函数，其名称以 “`use`” 开头，函数内部可以调用其他的 Hooks。** 例如，下面的 `useFriendStatus` 是我们第一个自定义的 Hook: ```js{3} import React, { useState, useEffect } from 'react'; From c4d7d5ef11197436bdfca6801946302ac7b1835f Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 21:34:07 +0800 Subject: [PATCH 22/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 2a942d62ad..7c2ddb8c7c 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -236,7 +236,7 @@ function useReducer(reducer, initialState) { } ``` -现在我们可以在我们的组件中使用它，让 reducer 驱动它的状态管理： +在组件中使用它，让 reducer 驱动它管理 state： ```js{2} function Todos() { From 862755108d1ad63a06740288a6ec299043259cda Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:08:00 +0800 Subject: [PATCH 23/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 7c2ddb8c7c..6a35dc6a7c 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -250,4 +250,4 @@ function Todos() { } ``` -在复杂组件中使用 reducer 管理本地状态的需求很常见，我们已经将 `useReducer` Hook 内置到 React 中。你可以在[Hooks API 参考](/docs/hooks-reference.html)中找到它与其他内置的 Hook 一起使用。 +在复杂组件中使用 reducer 管理内部 state 的需求很常见，我们已经将 `useReducer` 的 Hook 内置到 React 中。你可以在 [Hooks API 参考](/docs/hooks-reference.html)中找到它使用，搭配其他内置的 Hook 一起使用。 From dddb8d78e38d51f4dea848d47e659b020d78cf59 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:08:35 +0800 Subject: [PATCH 24/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 6a35dc6a7c..2a4a28361d 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -221,7 +221,7 @@ function todosReducer(state, action) { Reducers 非常便于单独测试，并且可以扩展以表达复杂的更新逻辑。如有必要，您可以将它们分成更小的 reducer。但是，您可能还享受使用 React 本地状态的好处，或者可能不想安装其他库。 -那么，如果我们可以编写一个名叫 `useReducer` 的 Hook 来让我们使用 reducer 管理组件的本地状态呢？它的简化版本可能如下所示： +那么，为什么我们不编写一个 `useReducer` 的 Hook，使用 reducer 的方式来管理组件的内部 state 呢？其简化版本可能如下所示： ```js function useReducer(reducer, initialState) { From 7a1cdde11bce2c9f651f586d53ca77cd915bbf66 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:09:48 +0800 Subject: [PATCH 25/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 2a4a28361d..75ddeb0f29 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -95,7 +95,7 @@ function useFriendStatus(friendID) { } ``` -这里面并没有任何新的内容——逻辑是从上面的组件复制的。就像在组件中一样，请确保只在自定义 Hook 的顶层无条件(译者注：如if，三元等)地调用其他 Hooks. +此处并未包含任何新的内容——逻辑是从上述组件拷贝来的。与组件中一致，请确保只在自定义 Hook 的顶层无条件地调用其他 Hooks。 与 React 组件不同的是，自定义 Hook 不需要具有特定的签名。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 `use` 开头，这样可以一目了然地看出其符合[Hook 的规则](/docs/hooks-rules.html)。 From c44ad07d4736afd5028047547978b122cf44c9e0 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:10:11 +0800 Subject: [PATCH 26/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 75ddeb0f29..1f0790e79b 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -219,7 +219,7 @@ function todosReducer(state, action) { } ``` -Reducers 非常便于单独测试，并且可以扩展以表达复杂的更新逻辑。如有必要，您可以将它们分成更小的 reducer。但是，您可能还享受使用 React 本地状态的好处，或者可能不想安装其他库。 +Reducers 非常便于单独测试，且易于扩展，以表达复杂的更新逻辑。如有必要，您可以将它们分成更小的 reducer。但是，你可能还享受着 React 内部 state 带来的好处，或者可能根本不想安装其他库。 那么，为什么我们不编写一个 `useReducer` 的 Hook，使用 reducer 的方式来管理组件的内部 state 呢？其简化版本可能如下所示： From 7469707e788840b692fd284745dcefd344ad9ef7 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:10:42 +0800 Subject: [PATCH 27/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 1f0790e79b..37b1061a9b 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -202,7 +202,7 @@ function ChatRecipientPicker() { 尽量不要过早地增加抽象。既然函数定义组件可以做更多事了，那么代码库中函数定义组件的代码行数可能会变得更多。这是正常的 —— 不要觉得你必须立即将其拆分为 Hook。但我们鼓励你去发现可以通过自定义 Hook 将复杂的逻辑隐藏在简单的接口背后，或者可以帮助解决组件内部杂乱无章的情况的点。 -例如，你可能有一个复杂的组件，包含了以临时方式来管理大量的本地状态。`useState` 不会使集中更新逻辑变得更容易，因此您可能更愿意将其编写为 [redux](http://redux.js.org/) reducer。 +例如，有个复杂的组件，其中包含了大量以特殊的方式来管理的内部状态。`useState` 并不会使得集中更新逻辑变得容易，因此您可能更愿意使用 [redux](http://redux.js.org/) 中的 reducer 来编写。 ```js function todosReducer(state, action) { From a40b02a589e571ce9c2b0b477baa88e79e17324e Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:11:53 +0800 Subject: [PATCH 28/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 37b1061a9b..faa028dfe8 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -200,7 +200,7 @@ function ChatRecipientPicker() { 自定义 Hooks 提供了以前在 React 组件中无法实现的共享逻辑的灵活性。你可以创建涵盖各种场景的自定义 Hooks，如表单处理、动画、订阅声明、计时器，以及可能还有更多我们没想到的场景。更重要的是，创建自定义 Hooks 就想使用 React 内置的功能一样简单。 -尽量不要过早地增加抽象。既然函数定义组件可以做更多事了，那么代码库中函数定义组件的代码行数可能会变得更多。这是正常的 —— 不要觉得你必须立即将其拆分为 Hook。但我们鼓励你去发现可以通过自定义 Hook 将复杂的逻辑隐藏在简单的接口背后，或者可以帮助解决组件内部杂乱无章的情况的点。 +尽量避免过早地增加抽象逻辑。既然函数组件能够做的更多，那么代码库中函数组件的代码行数可能会剧增。这属于正常现象 —— 不必立即将它们拆分为 Hooks。但我们仍鼓励你能通过自定义 Hooks 寻找可能，以达到简化代码逻辑，解决组件杂乱无章的目的。 例如，有个复杂的组件，其中包含了大量以特殊的方式来管理的内部状态。`useState` 并不会使得集中更新逻辑变得容易，因此您可能更愿意使用 [redux](http://redux.js.org/) 中的 reducer 来编写。 From bf8b3bfa4cb2b85b3f5c1003fc6379a9b5a86856 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:13:11 +0800 Subject: [PATCH 29/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index faa028dfe8..3a72c9879f 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -97,7 +97,7 @@ function useFriendStatus(friendID) { 此处并未包含任何新的内容——逻辑是从上述组件拷贝来的。与组件中一致，请确保只在自定义 Hook 的顶层无条件地调用其他 Hooks。 -与 React 组件不同的是，自定义 Hook 不需要具有特定的签名。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 `use` 开头，这样可以一目了然地看出其符合[Hook 的规则](/docs/hooks-rules.html)。 +与 React 组件不同的是，自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 `use` 开头，这样可以一眼看出其符合[Hook 的规则](/docs/hooks-rules.html)。 我们这个 Hook `useFriendStatus` 的目的是订阅某个好友的在线状态。这也就是为什么我们需要 `friendID` 作为参数，并返回这位朋友的在线状态。 From 8a7e077716bbf5d0ea45ebf03d6645035f8bd348 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:14:44 +0800 Subject: [PATCH 30/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 3a72c9879f..595c2beeb5 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -99,7 +99,7 @@ function useFriendStatus(friendID) { 与 React 组件不同的是，自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 `use` 开头，这样可以一眼看出其符合[Hook 的规则](/docs/hooks-rules.html)。 -我们这个 Hook `useFriendStatus` 的目的是订阅某个好友的在线状态。这也就是为什么我们需要 `friendID` 作为参数，并返回这位朋友的在线状态。 +此处 `useFriendStatus` 的 Hook 目的是订阅某个好友的在线状态。这就是我们需要将 `friendID` 作为参数，并返回这位朋友的在线状态的原因。 ```js function useFriendStatus(friendID) { From 8041ed94ad0d564dd7a0449daf9e5fc702a7e75c Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:15:57 +0800 Subject: [PATCH 31/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 595c2beeb5..1683d54bda 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -117,7 +117,7 @@ function useFriendStatus(friendID) { 我们一开始的目标是在 `FriendStatus` 和 `FriendListItem` 组件中去除重复的逻辑，即：这两个组件都想知道好友是否在线。 -现在我们已经把这个逻辑提到了一个叫 `useFriendStatus` 的自定义 Hook 中，然后就可以*用它了：* +现在我们已经把这个逻辑提取到 `useFriendStatus` 的自定义 Hook 中，然后就可以*使用它了：* ```js{2} function FriendStatus(props) { From 60c353698600da5f0eab35ae700db0a59c053789 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:16:40 +0800 Subject: [PATCH 32/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 1683d54bda..764c9a0cb9 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -198,7 +198,7 @@ function ChatRecipientPicker() { ## `useYourImagination()` {#useyourimagination} -自定义 Hooks 提供了以前在 React 组件中无法实现的共享逻辑的灵活性。你可以创建涵盖各种场景的自定义 Hooks，如表单处理、动画、订阅声明、计时器，以及可能还有更多我们没想到的场景。更重要的是，创建自定义 Hooks 就想使用 React 内置的功能一样简单。 +自定义 Hooks 解决了以前在 React 组件中无法灵活共享逻辑的问题。你可以创建涵盖各种场景的自定义 Hooks，如表单处理、动画、订阅声明、计时器，甚至可能还有其他我们没想到的场景。更重要的是，创建自定义 Hooks 就像使用 React 内置的功能一样简单。 尽量避免过早地增加抽象逻辑。既然函数组件能够做的更多，那么代码库中函数组件的代码行数可能会剧增。这属于正常现象 —— 不必立即将它们拆分为 Hooks。但我们仍鼓励你能通过自定义 Hooks 寻找可能，以达到简化代码逻辑，解决组件杂乱无章的目的。 From a1c4a8dc038c377e4d3aace55ba143fa2d85a324 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:17:37 +0800 Subject: [PATCH 33/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 764c9a0cb9..f9b83ac621 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -148,7 +148,7 @@ function FriendListItem(props) { **在两个组件中使用相同的 Hook 会共享状态吗?** 不会。自定义 Hooks 是一种重用*状态逻辑*的机制(例如设置订阅并记住当前值)，所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。 -**自定义 Hook 如何获取独立的 state?** 每次*调用* Hook，它都会获取独立的 state。由于我们直接调用了 `useFriendStatus`，从 React 的角度来看，我们的组件只是调用了 `useState` 和 `useEffect`。 正如我们在[前面的章节](/docs/hooks-state.html#tip-using-multiple-state-variables)[了解到的](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns)，我们可以在一个组件中多次调用 `useState` 和 `useEffect`，它们是完全独立的。 +**自定义 Hook 如何获取独立的 state?**每次*调用* Hook，它都会获取独立的 state。由于我们直接调用了 `useFriendStatus`，从 React 的角度来看，我们的组件只是调用了 `useState` 和 `useEffect`。 正如我们在[之前章节](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns)中[了解到的](/docs/hooks-state.html#tip-using-multiple-state-variables)一样，我们可以在一个组件中多次调用 `useState` 和 `useEffect`，它们是完全独立的。 ### Tip: 在多个 Hook 之间传递信息 {#tip-pass-information-between-hooks} From c47afd2a441ad4f8bee48a3ce0b1e8ed930ea1f5 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:18:14 +0800 Subject: [PATCH 34/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index f9b83ac621..351f579b53 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -152,7 +152,7 @@ function FriendListItem(props) { ### Tip: 在多个 Hook 之间传递信息 {#tip-pass-information-between-hooks} -由于 Hooks 就是函数，我们可以在它们之间传递信息。 +由于 Hooks 本身就是函数，因此我们可以在它们之间传递信息。 我们将使用聊天应用中的另一个组件来说明这一点。这是一个消息接收人的选择器，它会显示当前选定的好友是否在线: From 01e3dda4e06dd5884dcc97da647dc27fa0271f03 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Thu, 7 Mar 2019 22:18:49 +0800 Subject: [PATCH 35/48] Update content/docs/hooks-custom.md Co-Authored-By: bailnl --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 351f579b53..eeb31b4431 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -187,7 +187,7 @@ function ChatRecipientPicker() { 我们将当前选择的好友 ID 保存在 `recipientID` 状态变量中，并在用户从 `` 中选择其他好友时更新这个变量。 +我们将当前选择的好友 ID 保存在 `recipientID` 状态变量中，并在用户从 `