docs(cn): translate content/docs/hooks-intro.md into Chinese #131

lixiaoyang1992 · 2019-02-23T11:06:18Z

No description provided.

netlify · 2019-02-23T11:10:51Z

Deploy preview for cn-reactjs ready!

Built with commit 5226142

https://deploy-preview-131--cn-reactjs.netlify.com

netlify · 2019-02-23T11:12:09Z

Deploy preview for zh-hans-reactjs ready!

Built with commit 5226142

https://deploy-preview-131--zh-hans-reactjs.netlify.com

penouc

line 38: 接下来改成紧接着是不是好一些

penouc · 2019-02-25T10:54:11Z

content/docs/hooks-intro.md


-At React Conf 2018, Sophie Alpert and Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them. Watch the video here:
+在React Conf 2018，Sophie Alpert和Dan Abramov介绍了Hooks, 接下来Ryan Florence演示了如何使用它们重构一个应用. 你可以在这里看到这个视频：


在React Conf 2018 上，Sophie Alpert和Dan Abramov介绍了Hooks, 紧接着Ryan Florence演示了如何使用它们重构一个应用. 你可以在这里看到这个视频：

是的，读起来更通顺了

content/docs/hooks-intro.md

ycjcl868 · 2019-03-16T04:32:40Z

中英文之间加空格，好点吧。 @QC-L

yuqingc · 2019-03-17T08:57:54Z

有些问题需先统一改一下：@lixiaoyang1992

英文两边空格，请参考 React 中文文档译文排版指南
Hooks 和 Hook 都翻译成 Hook
术语翻译参考 [READ ONLY] The Glossary Sheet #2

content/docs/hooks-intro.md

QC-L · 2019-03-18T14:04:59Z

content/docs/hooks-intro.md

 permalink: docs/hooks-intro.html
 next: hooks-overview.html
 ---

-*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
+*Hook* 是 React 16.8中的增加的新特性。它使你在类之外使用 state 和其他 React 特性。


Suggested change

*Hook* 是 React 16.8中的增加的新特性。它使你在类之外使用 state 和其他 React 特性。

*Hook* 是 React 16.8 中的增加的新特性。它使你在类之外使用 state 和其他 React 特性。

QC-L · 2019-03-18T14:05:10Z

content/docs/hooks-intro.md

@@ -25,86 +25,86 @@ function Example() {
 }
 ```

-This new function `useState` is the first "Hook" we'll learn about, but this example is just a teaser. Don't worry if it doesn't make sense yet!
+这个叫做 `useState`的新函数是我们学习的第一个“Hook”，这个例子只是一个开场戏。如果你现在还一头雾水，不必担心。


Suggested change

这个叫做 `useState`的新函数是我们学习的第一个“Hook”，这个例子只是一个开场戏。如果你现在还一头雾水，不必担心。

这个叫做 `useState` 的新函数是我们学习的第一个“Hook”，这个例子只是一个开场戏。如果你现在还一头雾水，不必担心。

QC-L · 2019-03-18T14:05:31Z

content/docs/hooks-intro.md


-At React Conf 2018, Sophie Alpert and Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them. Watch the video here:
+在 React Conf 2018上，Sophie Alpert 和 Dan Abramov 介绍了 Hook, 紧接着 Ryan Florence 演示了如何使用它们重构一个应用. 你可以在这里看到这个视频：


Suggested change

在 React Conf 2018上，Sophie Alpert 和 Dan Abramov 介绍了 Hook, 紧接着 Ryan Florence 演示了如何使用它们重构一个应用. 你可以在这里看到这个视频：

在 React Conf 2018 上，Sophie Alpert 和 Dan Abramov 介绍了 Hook，紧接着 Ryan Florence 演示了如何使用它们重构一个应用。你可以在这里看到这个视频：

QC-L · 2019-03-18T14:07:25Z

content/docs/hooks-intro.md


-**You can start learning Hooks [on the next page](/docs/hooks-overview.html).** On this page, we'll continue by explaining why we're adding Hooks to React and how they can help you write great applications.
+**你可以在[下一页](/docs/hooks-overview.html)开始学习 Hook。** 在这一页，我们将继续解释我们为什么在 React 中加入 Hook，以及它将如何帮助你写出更好的应用。


Suggested change

**你可以在[下一页](/docs/hooks-overview.html)开始学习 Hook。** 在这一页，我们将继续解释我们为什么在 React 中加入 Hook，以及它将如何帮助你写出更好的应用。

**你可以在[下一章节](/docs/hooks-overview.html)开始学习 Hook。**在此章节，我们将继续解释我们为什么在 React 中加入 Hook，以及它将如何帮助你写出更好的应用。

zcfan

注意惯用语、词组翻译，有不理解的可以参考某些翻译网站的文献例句，如“https://cn.linguee.com”。
感谢造福群众~

zcfan · 2019-03-20T00:14:40Z

content/docs/hooks-intro.md

 permalink: docs/hooks-intro.html
 next: hooks-overview.html
 ---

-*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
+*Hook* 是 React 16.8中的增加的新特性。它使你在类之外使用 state 和其他 React 特性。


Suggested change

*Hook* 是 React 16.8中的增加的新特性。它使你在类之外使用 state 和其他 React 特性。

*Hook* 是 React 16.8 中的增加的新特性。它可以让你不需要写类组件也能使用 state 和其他 React 特性。

意思尽量表达到位，尽量减少含混带过的情况。

zcfan · 2019-03-20T00:24:37Z

content/docs/hooks-intro.md

-* **Available now.** Hooks are now available with the release of v16.8.0.
+* **完全可选的。** 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
+* **100%向后兼容的。** Hook 不包含任何破坏性改动。
+* **现在可用的。** Hook 在 v16.8.0 中已实装。


实装这个词听起来挺陌生的，虽然能理解意思。也许翻译成大白话“Hook 在 v16.8.0 版本中已经完全可用”会更好一些？
此处译法已经表意明确，只是讨论下翻译风格，不做修改建议。

实装确实要思考下，要不改成

Suggested change

* **现在可用的。** Hook 在 v16.8.0 中已实装。

* **现在可用。** Hook 已发布于 v16.8.0。

Suggested change

* **现在可用的。** Hook 在 v16.8.0 中已实装。

* **现在可用的。** Hook 已发布于 v16.8.0。

嗯嗯，”现在可用的“没问题，跟前面的“完全可选的”“100%向后兼容的。”对仗。

zcfan · 2019-03-20T00:26:25Z

content/docs/hooks-intro.md


-**Hooks don't replace your knowledge of React concepts.** Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them.
+**Hook 不会影响你对 React 概念的理解。** 恰恰相反，Hook 提供更直接的API去使用你已知的React概念: props, state, context, refs 和生命周期。我们将稍后展示，Hook 也提供了一种更强大的方式来组合他们。


Suggested change

**Hook 不会影响你对 React 概念的理解。** 恰恰相反，Hook 提供更直接的API去使用你已知的React概念: props, state, context, refs 和生命周期。我们将稍后展示，Hook 也提供了一种更强大的方式来组合他们。

**Hook 不会影响你对 React 概念的理解。** 恰恰相反，Hook 提供更直接的API去使用你已知的React概念: props, state, context, refs 和生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。

通顺语句

zcfan · 2019-03-20T00:30:40Z

content/docs/hooks-intro.md


-Hooks solve a wide variety of seemingly unconnected problems in React that we've encountered over five years of writing and maintaining tens of thousands of components. Whether you're learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems.
+Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React，或每天使用，或者更愿尝试另一个和 React 有相似组件模型的框架，你也许对这些问题似曾相识。


Suggested change

Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React，或每天使用，或者更愿尝试另一个和 React 有相似组件模型的框架，你也许对这些问题似曾相识。

Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React，或每天使用，或者更愿尝试另一个和 React 有相似组件模型的框架，你都可能对这些问题似曾相识。

“无论……也许……” 听起来不是一组合适的连词，“无论……都……”会比较通顺。当然这段话有点太长了，间隔太远也会缓解些这种不适感，小问题

zcfan · 2019-03-20T00:36:07Z

content/docs/hooks-intro.md


-React doesn't offer a way to "attach" reusable behavior to a component (for example, connecting it to a store). If you've worked with React for a while, you may be familiar with patterns like [render props](/docs/render-props.html) and [higher-order components](/docs/higher-order-components.html) that try to solve this. But these patterns require you to restructure your components when you use them, which can be cumbersome and make code harder to follow. If you look at a typical React application in React DevTools, you will likely find a "wrapper hell" of components surrounded by layers of providers, consumers, higher-order components, render props, and other abstractions. While we could [filter them out in DevTools](https://github.com/facebook/react-devtools/pull/503), this points to a deeper underlying problem: React needs a better primitive for sharing stateful logic.
+React 没有提供给一个组件“附上”可复用的行为的途径（例如，把组件连接到 store）。如果你用过 React 一段时间，你也许会熟悉一些为了解决这个问题的而推出的模式，比如[render props](/docs/render-props.html)和[高阶组件](/docs/higher-order-components.html) 。但是这些模式需要你重新组织你的组件结构，这可能会很笨重，使你的代码难以理解。如果你在 React DevTools 中观察一个典型的 React 应用，你会发现一个由 providers, consumers, 高阶组件, render props 等其他抽象层组成的嵌套地狱。我们可以[在 DevTools 过滤掉它们](https://github.com/facebook/react-devtools/pull/503)，这指出了一个更深层次的问题：React 需要更好的原函数以复用包含状态的逻辑。


Suggested change

React 没有提供给一个组件“附上”可复用的行为的途径（例如，把组件连接到 store）。如果你用过 React 一段时间，你也许会熟悉一些为了解决这个问题的而推出的模式，比如[render props](/docs/render-props.html)和[高阶组件](/docs/higher-order-components.html) 。但是这些模式需要你重新组织你的组件结构，这可能会很笨重，使你的代码难以理解。如果你在 React DevTools 中观察一个典型的 React 应用，你会发现一个由 providers, consumers, 高阶组件, render props 等其他抽象层组成的嵌套地狱。我们可以[在 DevTools 过滤掉它们](https://github.com/facebook/react-devtools/pull/503)，这指出了一个更深层次的问题：React 需要更好的原函数以复用包含状态的逻辑。

React 没有提供给一个组件“附上”可复用的行为的途径（例如，把组件连接到 store）。如果你用过 React 一段时间，你也许会熟悉一些为了解决这个问题的而推出的模式，比如[render props](/docs/render-props.html)和[高阶组件](/docs/higher-order-components.html) 。但是这些模式需要你重新组织你的组件结构，这可能会很笨重，使你的代码难以理解。如果你在 React DevTools 中观察一个典型的 React 应用，你会发现一个由 providers, consumers, 高阶组件, render props 等其他抽象层组成的嵌套地狱。尽管我们可以[在 DevTools 过滤掉它们](https://github.com/facebook/react-devtools/pull/503)，但这指出了一个更深层次的问题：React 需要为复用包含状态的逻辑提供一个更好的原生途径。

While 没有翻译出来。
原函数听起来的感觉是个相当高阶的概念。我们还是试试用更接地气的方式表达 primitive 这个词吧

content/docs/hooks-intro.md

zcfan · 2019-03-20T01:34:01Z

content/docs/hooks-intro.md


-To solve these problems, **Hooks let you use more of React's features without classes.** Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don't require you to learn complex functional or reactive programming techniques.
+为了解决这些问题，**Hook 使你在类之外使用更多的 React 特性。**从概念上讲，React 组件一直更近似于函数。Hook 拥抱了函数，但是避免了牺牲 React 的实践精神。Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术。


Suggested change

为了解决这些问题，**Hook 使你在类之外使用更多的 React 特性。**从概念上讲，React 组件一直更近似于函数。Hook 拥抱了函数，但是避免了牺牲 React 的实践精神。Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术。

为了解决这些问题，**Hook 使你在类之外使用更多的 React 特性。**从概念上讲，React 组件一直更像是函数。Hook 拥抱了函数，却没牺牲 React 的务实精神。Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术。

zcfan · 2019-03-20T01:34:51Z

content/docs/hooks-intro.md

 >
->[Hooks at a Glance](/docs/hooks-overview.html) is a good place to start learning Hooks.
+>在[Hook 概述](/docs/hooks-overview.html)开始学习会是不错的开始。


Suggested change

>在[Hook 概述](/docs/hooks-overview.html)开始学习会是不错的开始。

>[Hook 概述](/docs/hooks-overview.html)是开始学习 Hook 的好起点。

zcfan · 2019-03-20T01:42:02Z

content/docs/hooks-intro.md


-We also understand that the bar for adding a new primitive to React is extremely high. For curious readers, we have prepared a [detailed RFC](https://github.com/reactjs/rfcs/pull/68) that dives into motivation with more details, and provides extra perspective on the specific design decisions and related prior art.
+我们也明白向 React 添加新原函数的标准非常高。我们为好奇的读者准备了[详细的征求意见文档](https://github.com/reactjs/rfcs/pull/68)，在文档中提供了更多细节，有关具体设计决策的额外视角以及现有的相关技术。


Suggested change

我们也明白向 React 添加新原函数的标准非常高。我们为好奇的读者准备了[详细的征求意见文档](https://github.com/reactjs/rfcs/pull/68)，在文档中提供了更多细节，有关具体设计决策的额外视角以及现有的相关技术。

我们也明白向 React 添加新的原生概念的门槛非常高。我们为好奇的读者准备了[详细的征求意见文档](https://github.com/reactjs/rfcs/pull/68)，在文档中用更多细节深入讨论了我们推进这件事的动机，也在具体设计决策和相关先进技术上提供了额外的视角。

prior art => 先进技术

zcfan · 2019-03-20T01:44:46Z

content/docs/hooks-intro.md


-We intend for Hooks to cover all existing use cases for classes, but **we will keep supporting class components for the foreseeable future.** At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes.
+我们准备让 Hook 覆盖所有为类准备的用例，但是**我们将继续为类组件提供支持。**在 Facebook，我们有成千上万的组件用类书写，我们完全没有重写它们的计划。相反，我们开始在新的代码中同时使用 Hook 和类。


Suggested change

我们准备让 Hook 覆盖所有为类准备的用例，但是**我们将继续为类组件提供支持。**在 Facebook，我们有成千上万的组件用类书写，我们完全没有重写它们的计划。相反，我们开始在新的代码中同时使用 Hook 和类。

我们准备让 Hook 覆盖所有类组件的使用场景，但是**我们将继续为类组件提供支持。**在 Facebook，我们有成千上万的组件用类书写，我们完全没有重写它们的计划。相反，我们开始在新的代码中同时使用 Hook 和类。

use cases 这里的意思可能更接近测试用例这个术语

我理解 use case 是一种使用场景或者说功能描述，取自 UML 用例图（use case diagram）的概念，所以原本译成用例没有问题，只是觉得从读者角度”使用场景“更加直白。测试用例一般会写 test case 。

QC-L · 2019-03-20T02:13:36Z

@lixiaoyang1992 大佬，抽空修改下

QC-L · 2019-03-22T09:56:10Z

content/docs/hooks-intro.md

@@ -25,86 +25,86 @@ function Example() {
 }
 ```

-This new function `useState` is the first "Hook" we'll learn about, but this example is just a teaser. Don't worry if it doesn't make sense yet!
+这个叫做 `useState` 的新函数是我们学习的第一个“Hook”，这个例子只是一个开场戏。如果你现在还一头雾水，不必担心。


Suggested change

这个叫做 `useState` 的新函数是我们学习的第一个“Hook”，这个例子只是一个开场戏。如果你现在还一头雾水，不必担心。

`useState` 是我们要学习的第一个 “Hook”，这个例子是简单演示。如果不理解也不用担心。

QC-L · 2019-03-22T09:57:48Z

content/docs/hooks-intro.md


-**You can start learning Hooks [on the next page](/docs/hooks-overview.html).** On this page, we'll continue by explaining why we're adding Hooks to React and how they can help you write great applications.
+**你可以在[下一章节](/docs/hooks-overview.html)开始学习 Hook。** 在这一章节，我们将继续解释我们为什么在 React 中加入 Hook，以及它将如何帮助你写出更好的应用。


Suggested change

**你可以在[下一章节](/docs/hooks-overview.html)开始学习 Hook。** 在这一章节，我们将继续解释我们为什么在 React 中加入 Hook，以及它将如何帮助你写出更好的应用。

**你将在[下一章节](/docs/hooks-overview.html)正式开始学习 Hook。** 这一章节，我们将会解释为什么会在 React 中加入 Hook，以及如何使用 Hook 写出更好的应用。

QC-L · 2019-03-22T10:02:14Z

content/docs/hooks-intro.md

 >
->React 16.8.0 is the first release to support Hooks. When upgrading, don't forget to update all packages, including React DOM. React Native will support Hooks in the next stable release.
+>React 16.8.0 是第一个支持 Hook 的版本。升级时请升级所有的 package，包括 React DOM。React Native 将在下一个稳定版本中支持 Hook。


Suggested change

>React 16.8.0 是第一个支持 Hook 的版本。升级时请升级所有的 package，包括 React DOM。React Native 将在下一个稳定版本中支持 Hook。

>React 16.8.0 是第一个支持 Hook 的版本。升级时，请注意更新所有的 package，包括 React DOM。React Native 将在下一个稳定版本中支持 Hook。

QC-L · 2019-03-22T10:03:04Z

content/docs/hooks-intro.md


-At React Conf 2018, Sophie Alpert and Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them. Watch the video here:
+在 React Conf 2018 上，Sophie Alpert 和 Dan Abramov 介绍了 Hook，紧接着 Ryan Florence 演示了如何使用它们重构一个应用。你可以在这里看到这个视频：


Suggested change

在 React Conf 2018 上，Sophie Alpert 和 Dan Abramov 介绍了 Hook，紧接着 Ryan Florence 演示了如何使用它们重构一个应用。你可以在这里看到这个视频：

在 React Conf 2018 上，Sophie Alpert 和 Dan Abramov 介绍了 Hook，紧接着 Ryan Florence 演示了如何使用 Hook 重构应用。你可以在这里看到这个视频：

QC-L · 2019-03-23T03:28:43Z

content/docs/hooks-intro.md


-**There are no plans to remove classes from React.** You can read more about the gradual adoption strategy for Hooks in the [bottom section](#gradual-adoption-strategy) of this page.
+**没有计划从 React 中移除类。** 你可以在本页[底部的章节](#gradual-adoption-strategy)读到更多关于 Hook 的渐进策略。


Suggested change

**没有计划从 React 中移除类。** 你可以在本页[底部的章节](#gradual-adoption-strategy)读到更多关于 Hook 的渐进策略。

**没有计划从 React 中移除 class。** 你可以在本页[底部的章节](#gradual-adoption-strategy)读到更多关于 Hook 的渐进策略。

QC-L · 2019-03-23T03:32:32Z

content/docs/hooks-intro.md


-**Hooks don't replace your knowledge of React concepts.** Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them.
+**Hook 不会影响你对 React 概念的理解。** 恰恰相反，Hook 提供更直接的API去使用你已知的React概念: props, state, context, refs 和生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。


Suggested change

**Hook 不会影响你对 React 概念的理解。** 恰恰相反，Hook 提供更直接的API去使用你已知的React概念: props, state, context, refs 和生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。

**Hook 不会影响你对 React 概念的理解。** 恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。

QC-L · 2019-03-23T03:35:53Z

content/docs/hooks-intro.md

 permalink: docs/hooks-intro.html
 next: hooks-overview.html
 ---

-*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
+*Hook* 是 React 16.8 中的增加的新特性。它可以让你不需要写类组件也能使用 state 和其他 React 特性。


Suggested change

*Hook* 是 React 16.8 中的增加的新特性。它可以让你不需要写类组件也能使用 state 和其他 React 特性。

*Hook* 是 React 16.8 中新增的特性。它可以让你在不编写 class 组件的情况下，也能使用 state 及其他 React 特性。

QC-L · 2019-03-23T03:36:05Z

content/docs/hooks-intro.md


 ```js{4,5}
 import React, { useState } from 'react';

 function Example() {
-  // Declare a new state variable, which we'll call "count"
+  // 声明一个新的叫做“count”的 state 变量


Suggested change

// 声明一个新的叫做“count”的 state 变量

// 声明一个新的叫做 “count” 的 state 变量

QC-L · 2019-03-23T03:42:20Z

content/docs/hooks-intro.md


-**If you just want to start learning Hooks, feel free to [jump directly to the next page!](/docs/hooks-overview.html)** You can also keep reading this page to learn more about why we're adding Hooks, and how we're going to start using them without rewriting our applications.
+**如果你只想开始学习 Hook，你可以[直接跳到下一页!](/docs/hooks-overview.html)** 你也可以继续阅读这一页来了解为什么我们要添加 Hook，以及我们将如何在不重写应用的情况下使用他们。


Suggested change

**如果你只想开始学习 Hook，你可以[直接跳到下一页!](/docs/hooks-overview.html)** 你也可以继续阅读这一页来了解为什么我们要添加 Hook，以及我们将如何在不重写应用的情况下使用他们。

**如果不想了解添加 Hook 的具体原因，可以直接[跳到下一章节开始学习 Hook！](/docs/hooks-overview.html)** 当然你也可以继续阅读这一章节来了解原因，并且可以学习到如何在不重写应用的情况下使用 Hook。

这句话没有直译，选择了意译

QC-L · 2019-03-25T02:30:51Z

content/docs/hooks-intro.md


-**Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.** There is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mindshift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative.
+**最重要的是，Hook 和现有代码可以同时工作，你可以逐渐的采用他们。**不用急着迁移到 Hook。我们建议避免任何“大规模重写”，尤其是对于现有的、复杂的类组件。需要做一些思维转变来“用 Hook 的方式思考”。按照我们的经验，最好先在新的不复杂的组件中尝试使用 Hook，并且确保团队中每一员的都能适应。在你尝试 Hook 之后，欢迎给我们任何好的或坏的[反馈](https://github.com/facebook/react/issues/new)。


Suggested change

**最重要的是，Hook 和现有代码可以同时工作，你可以逐渐的采用他们。**不用急着迁移到 Hook。我们建议避免任何“大规模重写”，尤其是对于现有的、复杂的类组件。需要做一些思维转变来“用 Hook 的方式思考”。按照我们的经验，最好先在新的不复杂的组件中尝试使用 Hook，并且确保团队中每一员的都能适应。在你尝试 Hook 之后，欢迎给我们任何好的或坏的[反馈](https://github.com/facebook/react/issues/new)。

**最重要的是，Hook 和现有代码可以同时工作，你可以渐进式地使用他们。** 不用急着迁移到 Hook。我们建议避免任何“大规模重写”，尤其是对于现有的、复杂的 class 组件。开始“用 Hook 的方式思考”前，需要做一些思维上的转变。按照我们的经验，最好先在新的不复杂的组件中尝试使用 Hook，并且确保团队中每一员的都能适应。在你尝试使用 Hook 后，欢迎给我们提供[反馈](https://github.com/facebook/react/issues/new)，无论好坏。

QC-L · 2019-03-25T02:31:59Z

content/docs/hooks-intro.md


-We intend for Hooks to cover all existing use cases for classes, but **we will keep supporting class components for the foreseeable future.** At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes.
+我们准备让 Hook 覆盖所有类组件的使用场景，但是**我们将继续为类组件提供支持。**在 Facebook，我们有成千上万的组件用类书写，我们完全没有重写它们的计划。相反，我们开始在新的代码中同时使用 Hook 和类。


Suggested change

我们准备让 Hook 覆盖所有类组件的使用场景，但是**我们将继续为类组件提供支持。**在 Facebook，我们有成千上万的组件用类书写，我们完全没有重写它们的计划。相反，我们开始在新的代码中同时使用 Hook 和类。

我们准备让 Hook 覆盖所有 class 组件的使用场景，但是**我们将继续为 class 组件提供支持。**在 Facebook，我们有成千上万的组件用 class 书写，我们完全没有重写它们的计划。相反，我们开始在新的代码中同时使用 Hook 和 class。

QC-L · 2019-03-25T02:32:10Z

content/docs/hooks-intro.md


-## Frequently Asked Questions {#frequently-asked-questions}
+## 常见问题 {#frequently-asked-questions}


Suggested change

## 常见问题 {#frequently-asked-questions}

## FAQ {#frequently-asked-questions}

QC-L · 2019-03-25T02:32:30Z

content/docs/hooks-intro.md


-We've prepared a [Hooks FAQ page](/docs/hooks-faq.html) that answers the most common questions about Hooks.
+我们准备了一个[Hook 常见问题](/docs/hooks-faq.html)来解答最常见的关于 Hook 的问题。


Suggested change

我们准备了一个[Hook 常见问题](/docs/hooks-faq.html)来解答最常见的关于 Hook 的问题。

我们准备了 [Hook FAQ](/docs/hooks-faq.html) 来解答最常见的关于 Hook 的问题。

QC-L · 2019-03-25T02:32:56Z

content/docs/hooks-intro.md


-By the end of this page, you should have a rough idea of what problems Hooks are solving, but many details are probably unclear. Don't worry! **Let's now go to [the next page](/docs/hooks-overview.html) where we start learning about Hooks by example.**
+在这一页的最后，你应该对 Hook 能解决什么问题有了粗略的理解，但可能还有许多细节不清楚。不要担心！**让我们去[下一页](/docs/hooks-overview.html)通过例子学习 Hook。**


Suggested change

在这一页的最后，你应该对 Hook 能解决什么问题有了粗略的理解，但可能还有许多细节不清楚。不要担心！**让我们去[下一页](/docs/hooks-overview.html)通过例子学习 Hook。**

在本章节的最后，你应该对 Hook 能解决什么问题有了粗略的理解，但可能还有许多细节不清楚。不要担心！**让我们去[下一章节](/docs/hooks-overview.html)通过例子学习 Hook。**

QC-L · 2019-03-25T02:33:50Z

@lixiaoyang1992 有些感觉不好的地方，做了些修改，可以讨论下~

lixiaoyang1992 · 2019-03-26T03:29:23Z

@QC-L 我认为有些地方为表严谨，保留一些翻译腔也可以。如果大量采用意译的话，可能会损失一些文档的原意

QC-L · 2019-03-26T05:43:20Z

可以适当的意译，要保证读着和我们的思维逻辑一样，但不能丢失原意。
不能让初学者读着怪怪的，你说是不？
@lixiaoyang1992 给你的邮箱发了群邀请，看下~

QC-L

LGTM

…#131)

lixiaoyang1992 mentioned this pull request Feb 24, 2019

OLD CLAIMS #4

Closed

lixiaoyang1992 force-pushed the cn branch from 11e833f to 617a714 Compare February 24, 2019 03:00

QC-L added the Pending Review 已翻译，待校对阶段 label Feb 24, 2019

penouc suggested changes Feb 25, 2019

View reviewed changes

penouc reviewed Feb 25, 2019

View reviewed changes

lixiaoyang1992 force-pushed the cn branch from 617a714 to e2e136a Compare February 27, 2019 06:01

ghycy15 reviewed Mar 16, 2019

View reviewed changes

content/docs/hooks-intro.md Outdated Show resolved Hide resolved

ycjcl868 reviewed Mar 16, 2019

View reviewed changes

content/docs/hooks-intro.md Outdated Show resolved Hide resolved

fonkie requested review from fonkie and removed request for fonkie March 16, 2019 13:35

QC-L requested changes Mar 18, 2019

View reviewed changes

content/docs/hooks-intro.md Show resolved Hide resolved

lixiaoyang1992 force-pushed the cn branch 5 times, most recently from 0b84cff to a38d49d Compare March 18, 2019 12:29

QC-L reviewed Mar 18, 2019

View reviewed changes

zcfan requested changes Mar 20, 2019

View reviewed changes

lixiaoyang1992 force-pushed the cn branch from a38d49d to bee74ce Compare March 20, 2019 03:21

QC-L added Pending Modify 已校对，待修改阶段 Pending Re-Review 已修改，待审校阶段 and removed Pending Review 已翻译，待校对阶段 labels Mar 20, 2019

QC-L removed the Pending Modify 已校对，待修改阶段 label Mar 20, 2019

lixiaoyang1992 force-pushed the cn branch from bee74ce to 49af4bf Compare March 20, 2019 12:12

QC-L reviewed Mar 22, 2019

View reviewed changes

lixiaoyang1992 force-pushed the cn branch from 3443335 to c6c28b4 Compare March 24, 2019 02:47

QC-L requested changes Mar 25, 2019

View reviewed changes

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

5226142

lixiaoyang1992 force-pushed the cn branch from c6c28b4 to 5226142 Compare March 26, 2019 03:44

QC-L approved these changes Mar 26, 2019

View reviewed changes

zcfan approved these changes Mar 26, 2019

View reviewed changes

yuqingc approved these changes Mar 26, 2019

View reviewed changes

QC-L merged commit 3b881d4 into reactjs:master Mar 26, 2019

OhIAmFine pushed a commit to OhIAmFine/zh-hans.reactjs.org that referenced this pull request May 6, 2019

docs(cn): translate content/docs/hooks-intro.md into Chinese (reactjs…

86995cd

…#131)


		At React Conf 2018, Sophie Alpert and Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them. Watch the video here:
		在React Conf 2018，Sophie Alpert和Dan Abramov介绍了Hooks, 接下来Ryan Florence演示了如何使用它们重构一个应用. 你可以在这里看到这个视频：

	Hook 是 React 16.8中的增加的新特性。它使你在类之外使用 state 和其他 React 特性。
	Hook 是 React 16.8 中的增加的新特性。它使你在类之外使用 state 和其他 React 特性。

	这个叫做 `useState`的新函数是我们学习的第一个“Hook”，这个例子只是一个开场戏。如果你现在还一头雾水，不必担心。
	这个叫做 `useState` 的新函数是我们学习的第一个“Hook”，这个例子只是一个开场戏。如果你现在还一头雾水，不必担心。


		At React Conf 2018, Sophie Alpert and Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them. Watch the video here:
		在 React Conf 2018上，Sophie Alpert 和 Dan Abramov 介绍了 Hook, 紧接着 Ryan Florence 演示了如何使用它们重构一个应用. 你可以在这里看到这个视频：

	在 React Conf 2018上，Sophie Alpert 和 Dan Abramov 介绍了 Hook, 紧接着 Ryan Florence 演示了如何使用它们重构一个应用. 你可以在这里看到这个视频：
	在 React Conf 2018 上，Sophie Alpert 和 Dan Abramov 介绍了 Hook，紧接着 Ryan Florence 演示了如何使用它们重构一个应用。你可以在这里看到这个视频：


		You can start learning Hooks [on the next page](/docs/hooks-overview.html). On this page, we'll continue by explaining why we're adding Hooks to React and how they can help you write great applications.
		你可以在[下一页](/docs/hooks-overview.html)开始学习 Hook。在这一页，我们将继续解释我们为什么在 React 中加入 Hook，以及它将如何帮助你写出更好的应用。

	你可以在[下一页](/docs/hooks-overview.html)开始学习 Hook。在这一页，我们将继续解释我们为什么在 React 中加入 Hook，以及它将如何帮助你写出更好的应用。
	你可以在[下一章节](/docs/hooks-overview.html)开始学习 Hook。在此章节，我们将继续解释我们为什么在 React 中加入 Hook，以及它将如何帮助你写出更好的应用。

	Hook 是 React 16.8中的增加的新特性。它使你在类之外使用 state 和其他 React 特性。
	Hook 是 React 16.8 中的增加的新特性。它可以让你不需要写类组件也能使用 state 和其他 React 特性。

	* 现在可用的。 Hook 在 v16.8.0 中已实装。
	* 现在可用。 Hook 已发布于 v16.8.0。

	* 现在可用的。 Hook 在 v16.8.0 中已实装。
	* 现在可用的。 Hook 已发布于 v16.8.0。


		Hooks don't replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them.
		Hook 不会影响你对 React 概念的理解。恰恰相反，Hook 提供更直接的API去使用你已知的React概念: props, state, context, refs 和生命周期。我们将稍后展示，Hook 也提供了一种更强大的方式来组合他们。


		Hooks solve a wide variety of seemingly unconnected problems in React that we've encountered over five years of writing and maintaining tens of thousands of components. Whether you're learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems.
		Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React，或每天使用，或者更愿尝试另一个和 React 有相似组件模型的框架，你也许对这些问题似曾相识。


		React doesn't offer a way to "attach" reusable behavior to a component (for example, connecting it to a store). If you've worked with React for a while, you may be familiar with patterns like [render props](/docs/render-props.html) and [higher-order components](/docs/higher-order-components.html) that try to solve this. But these patterns require you to restructure your components when you use them, which can be cumbersome and make code harder to follow. If you look at a typical React application in React DevTools, you will likely find a "wrapper hell" of components surrounded by layers of providers, consumers, higher-order components, render props, and other abstractions. While we could [filter them out in DevTools](https://github.com/facebook/react-devtools/pull/503), this points to a deeper underlying problem: React needs a better primitive for sharing stateful logic.
		React 没有提供给一个组件“附上”可复用的行为的途径（例如，把组件连接到 store）。如果你用过 React 一段时间，你也许会熟悉一些为了解决这个问题的而推出的模式，比如[render props](/docs/render-props.html)和[高阶组件](/docs/higher-order-components.html) 。但是这些模式需要你重新组织你的组件结构，这可能会很笨重，使你的代码难以理解。如果你在 React DevTools 中观察一个典型的 React 应用，你会发现一个由 providers, consumers, 高阶组件, render props 等其他抽象层组成的嵌套地狱。我们可以[在 DevTools 过滤掉它们](https://github.com/facebook/react-devtools/pull/503)，这指出了一个更深层次的问题：React 需要更好的原函数以复用包含状态的逻辑。


		To solve these problems, Hooks let you use more of React's features without classes. Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don't require you to learn complex functional or reactive programming techniques.
		为了解决这些问题，Hook 使你在类之外使用更多的 React 特性。从概念上讲，React 组件一直更近似于函数。Hook 拥抱了函数，但是避免了牺牲 React 的实践精神。Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术。

	>在[Hook 概述](/docs/hooks-overview.html)开始学习会是不错的开始。
	>[Hook 概述](/docs/hooks-overview.html)是开始学习 Hook 的好起点。


		We also understand that the bar for adding a new primitive to React is extremely high. For curious readers, we have prepared a [detailed RFC](https://github.com/reactjs/rfcs/pull/68) that dives into motivation with more details, and provides extra perspective on the specific design decisions and related prior art.
		我们也明白向 React 添加新原函数的标准非常高。我们为好奇的读者准备了[详细的征求意见文档](https://github.com/reactjs/rfcs/pull/68)，在文档中提供了更多细节，有关具体设计决策的额外视角以及现有的相关技术。

	我们也明白向 React 添加新原函数的标准非常高。我们为好奇的读者准备了[详细的征求意见文档](https://github.com/reactjs/rfcs/pull/68)，在文档中提供了更多细节，有关具体设计决策的额外视角以及现有的相关技术。
	我们也明白向 React 添加新的原生概念的门槛非常高。我们为好奇的读者准备了[详细的征求意见文档](https://github.com/reactjs/rfcs/pull/68)，在文档中用更多细节深入讨论了我们推进这件事的动机，也在具体设计决策和相关先进技术上提供了额外的视角。


		We intend for Hooks to cover all existing use cases for classes, but we will keep supporting class components for the foreseeable future. At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes.
		我们准备让 Hook 覆盖所有为类准备的用例，但是我们将继续为类组件提供支持。在 Facebook，我们有成千上万的组件用类书写，我们完全没有重写它们的计划。相反，我们开始在新的代码中同时使用 Hook 和类。

	我们准备让 Hook 覆盖所有为类准备的用例，但是我们将继续为类组件提供支持。在 Facebook，我们有成千上万的组件用类书写，我们完全没有重写它们的计划。相反，我们开始在新的代码中同时使用 Hook 和类。
	我们准备让 Hook 覆盖所有类组件的使用场景，但是我们将继续为类组件提供支持。在 Facebook，我们有成千上万的组件用类书写，我们完全没有重写它们的计划。相反，我们开始在新的代码中同时使用 Hook 和类。

	这个叫做 `useState` 的新函数是我们学习的第一个“Hook”，这个例子只是一个开场戏。如果你现在还一头雾水，不必担心。
	`useState` 是我们要学习的第一个 “Hook”，这个例子是简单演示。如果不理解也不用担心。

docs(cn): translate content/docs/hooks-intro.md into Chinese #131

docs(cn): translate content/docs/hooks-intro.md into Chinese #131

Conversation

lixiaoyang1992 commented Feb 23, 2019

netlify bot commented Feb 23, 2019 • edited Loading

netlify bot commented Feb 23, 2019 • edited Loading

penouc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ycjcl868 commented Mar 16, 2019

yuqingc commented Mar 17, 2019 • edited by QC-L Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

QC-L Mar 18, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zcfan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

QC-L commented Mar 20, 2019

QC-L Mar 22, 2019 • edited Loading

Choose a reason for hiding this comment

QC-L Mar 22, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

QC-L commented Mar 25, 2019

lixiaoyang1992 commented Mar 26, 2019 • edited Loading

QC-L commented Mar 26, 2019 • edited Loading

QC-L left a comment

Choose a reason for hiding this comment

netlify bot commented Feb 23, 2019 •

edited

Loading

netlify bot commented Feb 23, 2019 •

edited

Loading

yuqingc commented Mar 17, 2019 •

edited by QC-L

Loading

QC-L Mar 18, 2019 •

edited

Loading

QC-L Mar 22, 2019 •

edited

Loading

QC-L Mar 22, 2019 •

edited

Loading

lixiaoyang1992 commented Mar 26, 2019 •

edited

Loading

QC-L commented Mar 26, 2019 •

edited

Loading

	你可以在[下一章节](/docs/hooks-overview.html)开始学习 Hook。在这一章节，我们将继续解释我们为什么在 React 中加入 Hook，以及它将如何帮助你写出更好的应用。
	你将在[下一章节](/docs/hooks-overview.html)正式开始学习 Hook。这一章节，我们将会解释为什么会在 React 中加入 Hook，以及如何使用 Hook 写出更好的应用。

	>React 16.8.0 是第一个支持 Hook 的版本。升级时请升级所有的 package，包括 React DOM。React Native 将在下一个稳定版本中支持 Hook。
	>React 16.8.0 是第一个支持 Hook 的版本。升级时，请注意更新所有的 package，包括 React DOM。React Native 将在下一个稳定版本中支持 Hook。


		There are no plans to remove classes from React. You can read more about the gradual adoption strategy for Hooks in the [bottom section](#gradual-adoption-strategy) of this page.
		没有计划从 React 中移除类。你可以在本页[底部的章节](#gradual-adoption-strategy)读到更多关于 Hook 的渐进策略。

	没有计划从 React 中移除类。你可以在本页[底部的章节](#gradual-adoption-strategy)读到更多关于 Hook 的渐进策略。
	没有计划从 React 中移除 class。你可以在本页[底部的章节](#gradual-adoption-strategy)读到更多关于 Hook 的渐进策略。

	Hook 不会影响你对 React 概念的理解。恰恰相反，Hook 提供更直接的API去使用你已知的React概念: props, state, context, refs 和生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。
	Hook 不会影响你对 React 概念的理解。恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。

	Hook 是 React 16.8 中的增加的新特性。它可以让你不需要写类组件也能使用 state 和其他 React 特性。
	Hook 是 React 16.8 中新增的特性。它可以让你在不编写 class 组件的情况下，也能使用 state 及其他 React 特性。

	// 声明一个新的叫做“count”的 state 变量
	// 声明一个新的叫做 “count” 的 state 变量


		If you just want to start learning Hooks, feel free to [jump directly to the next page!](/docs/hooks-overview.html) You can also keep reading this page to learn more about why we're adding Hooks, and how we're going to start using them without rewriting our applications.
		如果你只想开始学习 Hook，你可以[直接跳到下一页!](/docs/hooks-overview.html) 你也可以继续阅读这一页来了解为什么我们要添加 Hook，以及我们将如何在不重写应用的情况下使用他们。

	如果你只想开始学习 Hook，你可以[直接跳到下一页!](/docs/hooks-overview.html) 你也可以继续阅读这一页来了解为什么我们要添加 Hook，以及我们将如何在不重写应用的情况下使用他们。
	如果不想了解添加 Hook 的具体原因，可以直接[跳到下一章节开始学习 Hook！](/docs/hooks-overview.html) 当然你也可以继续阅读这一章节来了解原因，并且可以学习到如何在不重写应用的情况下使用 Hook。


		Crucially, Hooks work side-by-side with existing code so you can adopt them gradually. There is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mindshift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative.
		最重要的是，Hook 和现有代码可以同时工作，你可以逐渐的采用他们。不用急着迁移到 Hook。我们建议避免任何“大规模重写”，尤其是对于现有的、复杂的类组件。需要做一些思维转变来“用 Hook 的方式思考”。按照我们的经验，最好先在新的不复杂的组件中尝试使用 Hook，并且确保团队中每一员的都能适应。在你尝试 Hook 之后，欢迎给我们任何好的或坏的[反馈](https://github.com/facebook/react/issues/new)。