docs(cn): translate content/docs/hooks-state.md into Chinese

content/docs/hooks-state.md

@@ -6,15 +6,15 @@ 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).
 
-The [previous page](/docs/hooks-intro.html) introduced Hooks with this example:
+[前几章](/docs/hooks-intro.html)我们已经用这个例子介绍过 Hooks:
 
 ```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 +28,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 +56,40 @@ 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
 
-As a reminder, function components in React look like this:
+## Hooks 和函数式组件
+
+复习一下， React 的函数组件是这个样子的：
 
 ```js
 const Example = (props) => {
-  // You can use Hooks here!
+  // 你可以在这用Hooks
   return <div />;
 }
 ```
 
-or this:
+或是这样：
 
 ```js
 function Example(props) {
-  // You can use Hooks here!
+  // 你可以在这用Hooks
   return <div />;
 }
 ```
 
-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 **don't** work inside classes. But you can use them instead of writing classes.
+Hooks 在 class 内部是 **无效的**。但你可以在不写 class 情况下使用它。
 
-## 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 +99,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,84 +121,86 @@ 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 保存。
+
+**我们应该传递给 `useState` 哪些参数？** `useState()` 方法里面唯一的参数就是初始状态。与 class 不一样，状态可以不是对象。如果我们只需要数字或字符串，我们就可以只存储字符串和数字。在我们例子中，我们只要一个数字记录用户点击次数，所以我们传了 `0` 作为我们状态的初始值。（如果想要存储两个不同的状态变量，只需调用 `useState()`两次即可。）
 
-**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.)
 
-**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).
+**`useState`方法的返回值是什么？** 它返回一组值：当前状态和一个更新状态的函数。这就是我们写 `const [count, setCount] = useState()` 的原因。
+这和 class 里面的 `this.state.count` 和 `this.setState` 类似，不过你同时返回了两个。如果你们对我们使用的语法不熟悉，你可以在[底部](/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` 干了什么，我们的例子应该更加容易理解了：
 
 ```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` 返回给你当前的状态。否则状态就不会被"保持"了！这也是钩子函数*总是*以`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
   <p>You clicked {this.state.count} times</p>
 ```
 
-In a function, we can use `count` directly:
-
+在函数里面，我们可以直接用 `count`:
 
 ```js
   <p>You clicked {count} times</p>
 ```
 
-## Updating State
+## 更新状态
 
-In a class, we need to call `this.setState()` to update the `count` state:
+在 class 中，我们需要调用 `this.setState()` 来更新 `count` 状态：
 
 ```js{1}
   <button onClick={() => this.setState({ count: this.state.count + 1 })}>
     Click me
   </button>
 ```
 
-In a function, we already have `setCount` and `count` as variables so we don't need `this`:
+在函数中，我们已经有了 `setCount` 和 `count` 变量，所以我们不需要 `this`:
 
 ```js{1}
   <button onClick={() => setCount(count + 1)}>
     Click me
   </button>
 ```
 
-## Recap
+## 总结
 
-Let's now **recap what we learned line by line** and check our understanding.
+现在我们可以**一行行过一下**代码，并且看下我们是否真正理解了。
 
 <!--
   I'm not proud of this line markup. Please somebody fix this.
   But if GitHub got away with it for years we can cheat.
 -->
 ```js{1,4,9}
  1:  import { useState } from 'react';
- 2:
+ 2: 
  3:  function Example() {
  4:    const [count, setCount] = useState(0);
  5:
@@ -212,69 +215,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.
 
-### Tip: What Do Square Brackets Mean?
+你可能感觉要理解的东西太多了。不要急于求成！如果你有不理解的地方，再看一遍上面的代码并且从头读到尾。我们保证只要你试着"忘记" class 里面 state 的工作原理，并且擦亮眼睛看下这段代码，就会有种豁然开朗的感觉。 
 
-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.