From abd61389425cb2295d143e831cb8f08634b24cff Mon Sep 17 00:00:00 2001 From: lousong Date: Sat, 2 Feb 2019 14:38:48 +0800 Subject: [PATCH 01/43] add hooks-state translate --- content/docs/hooks-state.md | 147 +++++++++++++++++++----------------- 1 file changed, 77 insertions(+), 70 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index c910268ac1..54ef7e2f15 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -6,15 +6,16 @@ next: hooks-effect.html prev: hooks-overview.html --- -*Hooks* are an upcoming feature that lets you use state and other React features without writing a class. They're currently in React v16.8.0-alpha.1. +*Hooks* 是一个新功能提案，它让你不用写class也可以使用state和其他React特性。React v16.7.0-alpha已经具备了Hooks功能，[开放RFC](https://github.com/reactjs/rfcs/pull/68). + +[前几章](/docs/hooks-intro.html)我们已经用这个例子介绍过Hooks -The [previous page](/docs/hooks-intro.html) introduced Hooks with this example: ```js{4-5} import { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // 声明一个新的状态变量：count const [count, setCount] = useState(0); return ( @@ -28,11 +29,11 @@ function Example() { } ``` -We'll start learning about Hooks by comparing this code to an equivalent class example. +我们将通过对比上述代码和使用class实现相同功能的代码的方式来学习Hooks -## Equivalent Class Example +## 使用class实现相同功能的例子 -If you used classes in React before, this code should look familiar: +如果你之前使用过React的class,你可能会对下面的代码有似曾相识的感觉： ```js class Example extends React.Component { @@ -56,39 +57,41 @@ class Example extends React.Component { } ``` -The state starts as `{ count: 0 }`, and we increment `state.count` when the user clicks a button by calling `this.setState()`. We'll use snippets from this class throughout the page. +状态初始化 `{ count: 0 }`,当用户点击按钮后，`this.setState()`被调用来增加 `state.count`。我们在整个页面都会使用到这一段代码。 ->Note +>注意 > ->You might be wondering why we're using a counter here instead of a more realistic example. This is to help us focus on the API while we're still making our first steps with Hooks. +>你可能会想知道为什么我们要用一个计数器例子而不使用一个更加实际的应用。这是为了帮助我们关注API本身，因为我们还在迈出使用Hooks的第一步。 + -## Hooks and Function Components +## Hooks 和 函数式 组件 -As a reminder, function components in React look like this: +复习一下，React的函数组件是这个样子的： ```js const Example = (props) => { - // You can use Hooks here! + // 你可以在这用Hooks return
; } ``` -or this: +或是这样： ```js function Example(props) { - // You can use Hooks here! + // 你可以在这用Hooks return
; } ``` -You might have previously known these as "stateless components". We're now introducing the ability to use React state from these, so we prefer the name "function components". +你之前可能听过另一个概念"无状态组件"，我们现在介绍的是在"无状态组件"基础上使用React的State,所以我们更愿意叫他"函数组件"。 +Hooks 在class内部是 **无效的**。但你可以在不写class情况下使用它。 Hooks **don't** work inside classes. But you can use them instead of writing classes. -## What's a Hook? +## Hook是什么？ -Our new example starts by importing the `useState` Hook from React: +接下来我们介绍一个使用React里面的`useState`的例子： ```js{1} import { useState } from 'react'; @@ -98,17 +101,17 @@ function Example() { } ``` -**What is a Hook?** A Hook is a special function that lets you "hook into" React features. For example, `useState` is a Hook that lets you add React state to function components. We'll learn other Hooks later. +**Hook是什么？** Hook是一个特殊的函数，它可以让你接入到React的特性。例如，`useState`是一个让你添加React State到函数组件的钩子。之后我们将学习其他的钩子函数。 -**When would I use a Hook?** If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We're going to do that right now! +**什么时候我会用到Hook** 如果你正在写一个函数组件并且你想要把状态加入到组件里面，如果是以前的话你必须把函数转化成class的形式。现在你可以在现有的函数组件内部使用钩子函数。让我们立即行动！ ->Note: +>注意： > ->There are some special rules about where you can and can't use Hooks within a component. We'll learn them in [Rules of Hooks](/docs/hooks-rules.html). +>这里有一些在组件内部能使用Hooks和不能使用Hooks的规则。详情请访问[Hooks使用规则](/docs/hooks-rules.html)。 -## Declaring a State Variable +## 声明一个状态变量 -In a class, we initialize the `count` state to `0` by setting `this.state` to `{ count: 0 }` in the constructor: +在下面class中，我们在构造函数中通过设置`this.state` 为 `{ count: 0 }`来初始化`count` 状态为 `0`： ```js{4-6} class Example extends React.Component { @@ -120,58 +123,60 @@ class Example extends React.Component { } ``` -In a function component, we have no `this`, so we can't assign or read `this.state`. Instead, we call the `useState` Hook directly inside our component: +在函数组件内部，我们没有 `this`，所以我们不能读或写 `this.state`.我们直接在我们组件内部调用`useState`钩子函数： ```js{4,5} import { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // 声明一个新状态变量：count const [count, setCount] = useState(0); ``` -**What does calling `useState` do?** It declares a "state variable". Our variable is called `count` but we could call it anything else, like `banana`. This is a way to "preserve" some values between the function calls — `useState` is a new way to use the exact same capabilities that `this.state` provides in a class. Normally, variables "disappear" when the function exits but state variables are preserved by React. +**`useState`方法做了哪些事情 ?** 它定义一个“状态变量”。我们命名它为 `count`， 你也可以给它取其他的名字，像 `banana`。这是一种在函数调用过程中保存值的方式 —— `useState`是一种使用class里面的`this.state`的新方法。一般来说，在函数退出后变量就就会"消失"，但状态变量在函数退出后仍然会被React保存。 -**What do we pass to `useState` as an argument?** The only argument to the `useState()` Hook is the initial state. Unlike with classes, the state doesn't have to be an object. We can keep a number or a string if that's all we need. In our example, we just want a number for how many times the user clicked, so pass `0` as initial state for our variable. (If we wanted to store two different values in state, we would call `useState()` twice.) +**我们应该传递给`useState`哪些参数** `useState()`方法里面唯一的参数就是初始状态。与class不一样，状态可以不是对象。如果我们只需要数字或字符串，我们就可以只存储字符串和数字。在我们例子中，我们只要一个数字记录用户点击次数，所以我们传了 `0` 作为我们状态的初始值。（如果想要存储两个不同的状态变量，只需调用 `useState()`两次即可。） -**What does `useState` return?** It returns a pair of values: the current state and a function that updates it. This is why we write `const [count, setCount] = useState()`. This is similar to `this.state.count` and `this.setState` in a class, except you get them in a pair. If you're not familiar with the syntax we used, we'll come back to it [at the bottom of this page](/docs/hooks-state.html#tip-what-do-square-brackets-mean). -Now that we know what the `useState` Hook does, our example should make more sense: +**`useState`方法的返回值是什么？** 它返回一组值：当前状态和一个更新状态的函数。这就是我们写`const [count, setCount] = useState()`的原因。 +这和class里面的`this.state.count` 和 `this.setState`类似，不过你同时返回了两个。如果你们对我们使用的语法不熟悉，你可以在[底部](/docs/hooks-state.html#tip-what-do-square-brackets-mean)找到它。 + +既然我们知道了`useState`干了什么，我们的例子应该更加容易理解了： ```js{4,5} import { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // 声明状态变量：count const [count, setCount] = useState(0); ``` -We declare a state variable called `count`, and set it to `0`. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current `count`, we can call `setCount`. +我们声明了 `count`变量，然后把它设为 `0`。React会在重新渲染的时候保存它当前的值，并且把最新的值传递给我们的函数。如果我想要更新当前的`count`,我们可以调用`setCount`。 + ->Note +>注意 > ->You might be wondering: why is `useState` not named `createState` instead? +>你可能好奇：为什么叫 `useState`而不叫 `createState`? > ->"Create" wouldn't be quite accurate because the state is only created the first time our component renders. During the next renders, `useState` gives us the current state. Otherwise it wouldn't be "state" at all! There's also a reason why Hook names *always* start with `use`. We'll learn why later in the [Rules of Hooks](/docs/hooks-rules.html). +>"Create"可能不是很准确，因为状态只在组件首次渲染的时候创建。在下一次重新渲染时，`useState`返回给你当前的状态。否则状态就不会被"保持"了！这也是Hook函数*总是*以`use`开头的一个原因。我们也可以访问[Hooks规则](/docs/hooks-rules.html)了解这些。 -## Reading State +## 读取状态 -When we want to display the current count in a class, we read `this.state.count`: +当我们在class中显示当前的count，我们直接访问`this.state.count`： ```js

You clicked {this.state.count} times

``` -In a function, we can use `count` directly: - +在函数里面，我们可以直接用`count`: ```js

You clicked {count} times

``` -## Updating State +## 更新状态 -In a class, we need to call `this.setState()` to update the `count` state: +在class中，我们需要调用 `this.setState()` 来更新 `count` 状态： ```js{1} ``` -In a function, we already have `setCount` and `count` as variables so we don't need `this`: +在函数中，我们已经有了 `setCount` 和 `count`变量，所以我们不需要 `this`: ```js{1} ``` -## Recap +## 总结 -Let's now **recap what we learned line by line** and check our understanding. +现在我们可以**一行行过一下**代码，并且看下我们是否真正理解了。 ```js{1,4,9} 1: import { useState } from 'react'; - 2: + 2: 3: function Example() { 4: const [count, setCount] = useState(0); 5: @@ -212,69 +217,71 @@ Let's now **recap what we learned line by line** and check our understanding. 14: } ``` -* **Line 1:** We import the `useState` Hook from React. It lets us keep local state in a function component. -* **Line 4:** Inside the `Example` component, we declare a new state variable by calling the `useState` Hook. It returns a pair of values, to which we give names. We're calling our variable `count` because it holds the number of button clicks. We initialize it to zero by passing `0` as the only `useState` argument. The second returned item is itself a function. It lets us update the `count` so we'll name it `setCount`. -* **Line 9:** When the user clicks, we call `setCount` with a new value. React will then re-render the `Example` component, passing the new `count` value to it. +* **第一行:** 引入 React中的`useState` 钩子函数。它让我们在函数组件中存储内部状态。 +* **第四行:** 在`Example`组件内部，我们调用 `useState`钩子函数定义了一个新的状态变量。它返回一个数组给我们的变量。我们把变量命名为`count`,因为它存储的是点击次数。我们通过传参数`0`给 `useState`方法来把变量初始化为`0`。第二个返回的值是一个函数。它让我们可以更新 `count`的值,所以我们叫它 `setCount`。 +* **第九行:** 当用户点击按钮后，我们传递一个新的值给 `setCount`方法。React会重新渲染`Example`组件，并把最新的 `count` 传给它。 + -This might seem like a lot to take in at first. Don't rush it! If you're lost in the explanation, look at the code above again and try to read it from top to bottom. We promise that once you try to "forget" how state works in classes, and look at this code with fresh eyes, it will make sense. +你可能感觉要理解的东西太多了。不要急于求成！如果你有不理解的地方，再看一遍上面的代码并且从头读到尾。我们保证只要你试着"忘记" class里面state的工作原理，并且擦亮眼睛看下这段代码，就会有种豁然开朗的感觉。 -### Tip: What Do Square Brackets Mean? +### 提示：方括号有什么用？ -You might have noticed the square brackets when we declare a state variable: +你可能注意到我们用方括号定义了一个状态变量 ```js const [count, setCount] = useState(0); ``` -The names on the left aren't a part of the React API. You can name your own state variables: +等号左边名字并不是React API的部分，你可以自己取名字： ```js const [fruit, setFruit] = useState('banana'); ``` -This JavaScript syntax is called ["array destructuring"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring). It means that we're making two new variables `fruit` and `setFruit`, where `fruit` is set to the first value returned by `useState`, and `setFruit` is the second. It is equivalent to this code: +这种Javascript语法叫[数组解构](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring)。它意味着我们同时创建了`fruit` 和 `setFruit`两个变量， +`fruit`值为`useState`返回的第一个值，`setFruit`是返回的第二个。它等价于下面的代码： ```js - var fruitStateVariable = useState('banana'); // Returns a pair - var fruit = fruitStateVariable[0]; // First item in a pair - var setFruit = fruitStateVariable[1]; // Second item in a pair + var fruitStateVariable = useState('banana'); // 返回一个数组 + var fruit = fruitStateVariable[0]; // 数组里的第一个值 + var setFruit = fruitStateVariable[1]; // 数组里的第二个值 ``` -When we declare a state variable with `useState`, it returns a pair — an array with two items. The first item is the current value, and the second is a function that lets us update it. Using `[0]` and `[1]` to access them is a bit confusing because they have a specific meaning. This is why we use array destructuring instead. +当我们使用 `useSatate`定义变量时候，它返回有两个值的数组。第一个是当前的状态，第二个是更新状态的函数。使用 `[0]` 和 `[1]` 来访问它们会让人困惑，因为他们的含义不一样。这就是为什么我们使用数组析构的方式的原因。 ->Note +>注意 > ->You might be curious how React knows which component `useState` corresponds to since we're not passing anything like `this` back to React. We'll answer [this question](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components) and many others in the FAQ section. +>你可能会好奇React怎么知道是哪个组件的`useState`，因为我们并没有传递`this`给React。我们将在FAQ里面对[这些问题](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components)及其他问题进行解答。 -### Tip: Using Multiple State Variables +### 提示：使用多个状态变量 -Declaring state variables as a pair of `[something, setSomething]` is also handy because it lets us give *different* names to different state variables if we want to use more than one: +使用`[something, setSomething]`方式定义状态变量会很便捷，因为如果我们需要使用不止一个状态变量，我们可以使用不同的名字： ```js function ExampleWithManyStates() { - // Declare multiple state variables! + // 定义多个状态变量 const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); ``` - -In the above component, we have `age`, `fruit`, and `todos` as local variables, and we can update them individually: +上面组件中，我们有 `age`,`fruit` 和 `todos` 局部变量，并且我们可以独立地更新它们： ```js function handleOrangeClick() { - // Similar to this.setState({ fruit: 'orange' }) + // 和 this.setState({ fruit: 'orange' }) 类似 setFruit('orange'); } ``` -You **don't have to** use many state variables. State variables can hold objects and arrays just fine, so you can still group related data together. However, unlike `this.setState` in a class, updating a state variable always *replaces* it instead of merging it. +你 **不一定** 要使用多个状态变量。状态变量也可以存储对象和数组，所以你可以把有关联的数据组合起来。然而，不像在class内部`this.setState`，更新一个状态变量往往`替换`它而不是合并它。 + +关于分割独立的状态变量，我们在[FAQ](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables)中提供了很多建议。 -We provide more recommendations on splitting independent state variables [in the FAQ](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables). +## 下一步 +上述页面中，我们已经学到了React提供的一个叫 `useState` 钩子函数，有时候我们也叫它 `State Hook`。它让我们在React函数组件上添加局部状态，局部状态只需初始化一次就可一直使用。 -## Next Steps +我们也学到了一点点关于Hooks是什么的知识。Hooks是能让你在函数组件中接入React特性的函数。它们名字都以 `use` 开始，还有很多Hooks等着我们去探索。 -On this page we've learned about one of the Hooks provided by React, called `useState`. We're also sometimes going to refer to it as the "State Hook". It lets us add local state to React function components -- which we did for the first time ever! -We also learned a little bit more about what Hooks are. Hooks are functions that let you "hook into" React features from function components. Their names always start with `use`, and there are more Hooks we haven't seen yet. +**接下来我们继续下一章[学习下一个Hook: `useEffect` .](/docs/hooks-effect.html)** 它让你了解到组件的副作用，并且它跟class里面的生命周期函数很类似。 -**Now let's continue by [learning the next Hook: `useEffect`.](/docs/hooks-effect.html)** It lets you perform side effects in components, and is similar to lifecycle methods in classes. From 95dd15ba3a69d22af24cf07033a1672422b8c326 Mon Sep 17 00:00:00 2001 From: lousong Date: Sat, 2 Feb 2019 15:16:30 +0800 Subject: [PATCH 02/43] fix typeset --- content/docs/hooks-state.md | 78 ++++++++++++++++++------------------- 1 file changed, 38 insertions(+), 40 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 54ef7e2f15..0d997252b6 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -6,10 +6,9 @@ next: hooks-effect.html prev: hooks-overview.html --- -*Hooks* 是一个新功能提案，它让你不用写class也可以使用state和其他React特性。React v16.7.0-alpha已经具备了Hooks功能，[开放RFC](https://github.com/reactjs/rfcs/pull/68). - -[前几章](/docs/hooks-intro.html)我们已经用这个例子介绍过Hooks +*Hooks* 是一个新功能提案，它让你不用写 class 也可以使用 state 和其他 React 特性。React v16.7.0-alpha 已经具备了 Hooks 功能，[开放 RFC ](https://github.com/reactjs/rfcs/pull/68). +[前几章](/docs/hooks-intro.html)我们已经用这个例子介绍过 Hooks: ```js{4-5} import { useState } from 'react'; @@ -29,11 +28,11 @@ function Example() { } ``` -我们将通过对比上述代码和使用class实现相同功能的代码的方式来学习Hooks +我们将通过对比上述代码和使用 class 实现相同功能的代码的方式来学习 Hooks。 ## 使用class实现相同功能的例子 -如果你之前使用过React的class,你可能会对下面的代码有似曾相识的感觉： +如果你之前使用过 React 的 class,你可能会对下面的代码有似曾相识的感觉： ```js class Example extends React.Component { @@ -61,12 +60,12 @@ class Example extends React.Component { >注意 > ->你可能会想知道为什么我们要用一个计数器例子而不使用一个更加实际的应用。这是为了帮助我们关注API本身，因为我们还在迈出使用Hooks的第一步。 +>你可能会想知道为什么我们要用一个计数器例子而不使用一个更加实际的应用。这是为了帮助我们关注 API 本身，因为我们还在迈出使用 Hooks 的第一步。 -## Hooks 和 函数式 组件 +## Hooks 和函数式组件 -复习一下，React的函数组件是这个样子的： +复习一下， React 的函数组件是这个样子的： ```js const Example = (props) => { @@ -84,14 +83,13 @@ function Example(props) { } ``` -你之前可能听过另一个概念"无状态组件"，我们现在介绍的是在"无状态组件"基础上使用React的State,所以我们更愿意叫他"函数组件"。 +你之前可能听过另一个概念"无状态组件"，我们现在介绍的是在"无状态组件"基础上使用 React 的 State ,所以我们更愿意叫他"函数组件"。 -Hooks 在class内部是 **无效的**。但你可以在不写class情况下使用它。 -Hooks **don't** work inside classes. But you can use them instead of writing classes. +Hooks 在 class 内部是 **无效的**。但你可以在不写 class 情况下使用它。 ## Hook是什么？ -接下来我们介绍一个使用React里面的`useState`的例子： +接下来我们介绍一个使用 React 里面的`useState`的例子： ```js{1} import { useState } from 'react'; @@ -101,17 +99,17 @@ function Example() { } ``` -**Hook是什么？** Hook是一个特殊的函数，它可以让你接入到React的特性。例如，`useState`是一个让你添加React State到函数组件的钩子。之后我们将学习其他的钩子函数。 +**Hook是什么？** Hook 是一个特殊的函数，它可以让你接入到 React 的特性。例如， `useState` 是一个让你添加 React State 到函数组件的钩子。之后我们将学习其他的钩子函数。 -**什么时候我会用到Hook** 如果你正在写一个函数组件并且你想要把状态加入到组件里面，如果是以前的话你必须把函数转化成class的形式。现在你可以在现有的函数组件内部使用钩子函数。让我们立即行动！ +**什么时候我会用到Hook？** 如果你正在写一个函数组件并且你想要把状态加入到组件里面，如果是以前的话你必须把函数转化成class的形式。现在你可以在现有的函数组件内部使用钩子函数。让我们立即行动！ >注意： > ->这里有一些在组件内部能使用Hooks和不能使用Hooks的规则。详情请访问[Hooks使用规则](/docs/hooks-rules.html)。 +>这里有一些在组件内部能使用 Hooks 和不能使用 Hooks 的规则。详情请访问[Hooks使用规则](/docs/hooks-rules.html)。 ## 声明一个状态变量 -在下面class中，我们在构造函数中通过设置`this.state` 为 `{ count: 0 }`来初始化`count` 状态为 `0`： +在下面 class 中，我们在构造函数中通过设置 `this.state` 为 `{ count: 0 }` 来初始化`count` 状态为 `0`： ```js{4-6} class Example extends React.Component { @@ -123,7 +121,7 @@ class Example extends React.Component { } ``` -在函数组件内部，我们没有 `this`，所以我们不能读或写 `this.state`.我们直接在我们组件内部调用`useState`钩子函数： +在函数组件内部，我们没有 `this`，所以我们不能读或写 `this.state`。我们直接在我们组件内部调用 `useState` 钩子函数： ```js{4,5} import { useState } from 'react'; @@ -133,15 +131,15 @@ function Example() { const [count, setCount] = useState(0); ``` -**`useState`方法做了哪些事情 ?** 它定义一个“状态变量”。我们命名它为 `count`， 你也可以给它取其他的名字，像 `banana`。这是一种在函数调用过程中保存值的方式 —— `useState`是一种使用class里面的`this.state`的新方法。一般来说，在函数退出后变量就就会"消失"，但状态变量在函数退出后仍然会被React保存。 +** `useState` 方法做了哪些事情 ?** 它定义一个“状态变量”。我们命名它为 `count` ， 你也可以给它取其他的名字，像 `banana` 。这是一种在函数调用过程中保存值的方式 —— `useState` 是一种使用 class 里面的 `this.state` 的新方法。一般来说，在函数退出后变量就就会"消失"，但状态变量在函数退出后仍然会被 React 保存。 -**我们应该传递给`useState`哪些参数** `useState()`方法里面唯一的参数就是初始状态。与class不一样，状态可以不是对象。如果我们只需要数字或字符串，我们就可以只存储字符串和数字。在我们例子中，我们只要一个数字记录用户点击次数，所以我们传了 `0` 作为我们状态的初始值。（如果想要存储两个不同的状态变量，只需调用 `useState()`两次即可。） +**我们应该传递给 `useState` 哪些参数？** `useState()` 方法里面唯一的参数就是初始状态。与 class 不一样，状态可以不是对象。如果我们只需要数字或字符串，我们就可以只存储字符串和数字。在我们例子中，我们只要一个数字记录用户点击次数，所以我们传了 `0` 作为我们状态的初始值。（如果想要存储两个不同的状态变量，只需调用 `useState()`两次即可。） -**`useState`方法的返回值是什么？** 它返回一组值：当前状态和一个更新状态的函数。这就是我们写`const [count, setCount] = useState()`的原因。 -这和class里面的`this.state.count` 和 `this.setState`类似，不过你同时返回了两个。如果你们对我们使用的语法不熟悉，你可以在[底部](/docs/hooks-state.html#tip-what-do-square-brackets-mean)找到它。 +**`useState`方法的返回值是什么？** 它返回一组值：当前状态和一个更新状态的函数。这就是我们写 `const [count, setCount] = useState()` 的原因。 +这和 class 里面的 `this.state.count` 和 `this.setState` 类似，不过你同时返回了两个。如果你们对我们使用的语法不熟悉，你可以在[底部](/docs/hooks-state.html#tip-what-do-square-brackets-mean)找到它。 -既然我们知道了`useState`干了什么，我们的例子应该更加容易理解了： +既然我们知道了 `useState` 干了什么，我们的例子应该更加容易理解了： ```js{4,5} import { useState } from 'react'; @@ -151,24 +149,24 @@ function Example() { const [count, setCount] = useState(0); ``` -我们声明了 `count`变量，然后把它设为 `0`。React会在重新渲染的时候保存它当前的值，并且把最新的值传递给我们的函数。如果我想要更新当前的`count`,我们可以调用`setCount`。 +我们声明了 `count` 变量，然后把它设为 `0`。React 会在重新渲染的时候保存它当前的值，并且把最新的值传递给我们的函数。如果我想要更新当前的 `count`,我们可以调用 `setCount`。 >注意 > ->你可能好奇：为什么叫 `useState`而不叫 `createState`? +>你可能好奇：为什么叫 `useState` 而不叫 `createState`? > ->"Create"可能不是很准确，因为状态只在组件首次渲染的时候创建。在下一次重新渲染时，`useState`返回给你当前的状态。否则状态就不会被"保持"了！这也是Hook函数*总是*以`use`开头的一个原因。我们也可以访问[Hooks规则](/docs/hooks-rules.html)了解这些。 +>"Create"可能不是很准确，因为状态只在组件首次渲染的时候创建。在下一次重新渲染时，`useState` 返回给你当前的状态。否则状态就不会被"保持"了！这也是钩子函数*总是*以`use`开头的一个原因。我们也可以访问[Hooks规则](/docs/hooks-rules.html)了解这些。 ## 读取状态 -当我们在class中显示当前的count，我们直接访问`this.state.count`： +当我们在 class 中显示当前的 count，我们直接访问 `this.state.count`： ```js

You clicked {this.state.count} times

``` -在函数里面，我们可以直接用`count`: +在函数里面，我们可以直接用 `count`: ```js

You clicked {count} times

@@ -176,7 +174,7 @@ function Example() { ## 更新状态 -在class中，我们需要调用 `this.setState()` 来更新 `count` 状态： +在 class 中，我们需要调用 `this.setState()` 来更新 `count` 状态： ```js{1} ``` -在函数中，我们已经有了 `setCount` 和 `count`变量，所以我们不需要 `this`: +在函数中，我们已经有了 `setCount` 和 `count` 变量，所以我们不需要 `this`: ```js{1} ``` -## 总结 +## 重述 -现在我们可以**一行行过一下**代码，并且看下我们是否真正理解了。 +现在我们可以**逐行重述我们学到的知识**，并且看下我们是否真正理解了。 ```js{1,4,9} 1: import { useState } from 'react'; - 2: + 2: 3: function Example() { 4: const [count, setCount] = useState(0); 5: @@ -272,6 +272,7 @@ function ExampleWithManyStates() { 我们提供了更多关于分离独立状态变量的建议[在FAQ中](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables)。 ## 下一步 + 上述页面中，我们了解了React提供的一个叫 `useState` Hook，有时候我们也叫它 `State Hook`。它让我们在React函数组件上添加内部 state——这是我们第一次这么做。 我们也学到了一点点关于 Hook 是什么的知识。Hook 是能让你在函数组件中“钩住”React特性的函数。它们名字通常都以 `use` 开始，还有更多 Hook 等着我们去探索。 From a53db493bf25535c392163f3bc784a94780796fb Mon Sep 17 00:00:00 2001 From: Koopos Date: Sun, 3 Feb 2019 22:11:51 +0800 Subject: [PATCH 09/43] =?UTF-8?q?=E6=B6=88=E9=99=A4=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E7=A9=BA=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/hooks-state.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 5c67eea84d..ffc5fb0d4e 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -216,7 +216,7 @@ function Example() { * **第四行:** 在 `Example` 组件内部，我们通过调用 `useState` Hook 声明了一个新的状态变量。它返回一对值，我们为其命名。我们把变量命名为 `count`,因为它存储的是点击次数。我们通过传`0`作为 `useState` 唯一参数来将其初始化为 `0`。第二个返回的值本身就是一个函数。它让我们可以更新 `count` 的值,所以我们叫它 `setCount`。 * **第九行:** 当用户点击按钮后，我们传递一个新的值给 `setCount` 方法。React会重新渲染 `Example` 组件，并把最新的 `count` 传给它。 -乍一看这似乎有点太多了。不要急于求成！如果你有不理解的地方，请再次查看上面的代码并尝试从头读到尾阅读它。我们保证一旦你试着"忘记" class 里面 state 的工作原理，用新的眼光看这段代码，就容易理解了。 +乍一看这似乎有点太多了。不要急于求成！如果你有不理解的地方，请再次查看上面的代码并尝试从头到尾阅读它。我们保证一旦你试着"忘记" class 里面 state 的工作原理，用新的眼光看这段代码，就容易理解了。 ### 提示：方括号有什么用？ @@ -277,6 +277,5 @@ function ExampleWithManyStates() { 我们也学到了一点点关于 Hook 是什么的知识。Hook 是能让你在函数组件中“钩住”React特性的函数。它们名字通常都以 `use` 开始，还有更多 Hook 等着我们去探索。 - **现在我们继续下一章[学习下一个 Hook: `useEffect` .](/docs/hooks-effect.html)** 它让你产生组件中的副作用，并且它跟 class 里面的生命周期函数很类似。 From 4356d06e0605c0db88fbd52645d70b1a9134cc13 Mon Sep 17 00:00:00 2001 From: Koopos Date: Sun, 3 Feb 2019 22:12:56 +0800 Subject: [PATCH 10/43] Update hooks-state.md --- content/docs/hooks-state.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index ffc5fb0d4e..4f226a3e89 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -278,4 +278,3 @@ function ExampleWithManyStates() { 我们也学到了一点点关于 Hook 是什么的知识。Hook 是能让你在函数组件中“钩住”React特性的函数。它们名字通常都以 `use` 开始，还有更多 Hook 等着我们去探索。 **现在我们继续下一章[学习下一个 Hook: `useEffect` .](/docs/hooks-effect.html)** 它让你产生组件中的副作用，并且它跟 class 里面的生命周期函数很类似。 - From 1f2d78d87ee7c0a9e6f37baed4a0bb0e2cc3b6df Mon Sep 17 00:00:00 2001 From: Koopos Date: Tue, 5 Feb 2019 16:51:55 +0800 Subject: [PATCH 11/43] Update hooks-state.md --- content/docs/hooks-state.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 4f226a3e89..440704fae0 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -32,7 +32,7 @@ function Example() { ## 等价的 class 示例 -如果你之前使用过 React 的 class,这段代码看起来应该很熟悉： +如果你之前在 React 中使用过 class,这段代码看起来应该很熟悉： ```js class Example extends React.Component { @@ -56,7 +56,7 @@ class Example extends React.Component { } ``` -状态起始时候为 `{ count: 0 }`,当用户点击按钮后，我们通过调用`this.setState()`来增加 `state.count`。我们将在整个页面中使用这个 class 的代码片段。 +起始 state 为 `{ count: 0 }`，当用户点击按钮后，我们通过调用 `this.setState()` 来增加 `state.count`。我们将在整个页面中使用这个 class 的代码片段。 >注意 > @@ -84,7 +84,7 @@ function Example(props) { 你之前可能已经知道这些是"无状态组件"。我们现在介绍的是在这些基础上使用 React State 的能力 ,所以我们更喜欢叫他"函数组件"。 -Hook 在 class 内部是 **不** 起作用的。但你可以使用它们来代替编写 class。 +Hook 在 class 内部是**不**起作用的。但你可以使用它们来代替编写 class。 ## Hook是什么？ @@ -106,7 +106,7 @@ function Example() { > >关于在组件中，有什么地方能使用 Hook，有什么地方不能使用 Hook，有一些特殊的规则。我们将在[ Hook 规则](/docs/hooks-rules.html)中学习它们。 -## 声明一个状态变量 +## 声明一个 State 变量 在 class 中，我们通过在构造函数中设置 `this.state` 为 `{ count: 0 }` 来初始化 `count` state 为 `0`： @@ -132,7 +132,7 @@ function Example() { **调用 `useState` 方法做了什么?** 它定义一个 “state 变量”。我们的变量叫 `count` ， 但我们可以把它叫做任意的东西，像 `banana` 。这是一种在函数调用之间保存一些值的方式 —— `useState` 是一种新方法，它和 class 里面的 `this.state` 提供的功能完全相同。一般来说，在函数退出后变量就就会"消失"，但 state 变量是被 React 保留的。 -**我们应该传递给 `useState` 哪些参数？** `useState()` 方法里面唯一的参数就是初始 state。与 class 不一样，state 可以不是对象。我们可以保留一个数字或字符串，如果这是我们所需要的。在我们示例中，我们只要一个数字来记录用户点击次数，所以我们传了 `0` 作为变量的初始 state。（如果我们想要在 state 中存储两个不同的变量，只需调用 `useState()`两次即可。） +**我们应该传递哪些参数给 `useState`？** `useState()` 方法里面唯一的参数就是初始 state。与 class 不一样，state 可以不是对象。我们可以保留一个数字或字符串，如果这是我们所需要的。在我们示例中，我们只要一个数字来记录用户点击次数，所以我们传了 `0` 作为变量的初始 state。（如果我们想要在 state 中存储两个不同的变量，只需调用 `useState()`两次即可。） **`useState`方法的返回值是什么？** 它返回一对值：当前 state 和一个更新 state 的函数。这就是我们写 `const [count, setCount] = useState()` 的原因。这和 class 里面 `this.state.count` 和 `this.setState` 类似，唯一区别就是你把它们配成了对。如果你不熟悉我们使用的语法，我们可以返回到[这页的底部](/docs/hooks-state.html#tip-what-do-square-brackets-mean)。 @@ -152,7 +152,7 @@ function Example() { > >你可能想知道：为什么叫 `useState` 而不叫 `createState`? > ->"Create"可能不是很准确，因为 state 只在组件首次渲染的时候被创建。在下一次重新渲染期间，`useState` 给我们当前的 state。否则 它就不是 “state”了！这也是 Hook的名字 *总是*以`use`开头的一个原因。我们将在后面的[ Hook 规则](/docs/hooks-rules.html)中了解原因。 +>"Create"可能不是很准确，因为 state 只在组件首次渲染的时候被创建。在下一次重新渲染时，`useState` 给我们当前的 state。否则 它就不是 “state”了！这也是 Hook的名字 *总是*以`use`开头的一个原因。我们将在后面的 [Hook 规则](/docs/hooks-rules.html)中了解原因。 ## 读取 State @@ -189,7 +189,7 @@ function Example() { ## 重述 -现在我们可以**逐行重述我们学到的知识**，并且看下我们是否真正理解了。 +现在让我们来**仔细回顾学到的知识**，看下我们是否真正理解了。