React is one of the fastest-growing development tools in the world today. Since 2013, it has given developers a powerful Javascript library to design user interfaces. Though based on Javascript, React has it own particular syntax and conventions that must be learned outside the “vanilla”.

React是当今世界上增长最快的开发工具之一。 自2013年以来，它为开发人员提供了功能强大的Javascript库来设计用户界面。 尽管基于Javascript，React具有自己的特殊语法和约定，必须在“香草”之外学习。

Anybody who has any experience working with React can tell you that state is a powerful, albeit, sometimes frustrating tool. As React continues to evolve, different approaches on how to handle state have emerged. One of the more recent additions to this “state mutation” is the React hook.

任何具有使用React经验的人都可以告诉您状态是一个强大的，尽管有时令人沮丧的工具。 随着React的不断发展，出现了关于如何处理状态的不同方法。 此“状态突变”的最新添加内容之一是React钩子。

类组件 (Class Components)

The Class Component is where state usually lives…

类组件是状态通常存在的地方……

With the introduction of React hooks, state can be declared and used in functional components. State seems to be working perfectly fine in class so why would we want to change a good thing?

随着React钩子的引入，状态可以在功能组件中声明和使用。 国家似乎在课堂上工作得很好，那为什么我们要改变一件好事呢？

在其他地方使用状态的好处 (Benefits of Using State Elsewhere)

Class components are awesome but using them to handle state can be cumbersome. For one, it can be difficult to follow a class component’s code. With state being initialized and passed down from parent to children, state effects the actual component hierarchy. It can get incredibly frustrating being limited by this. As someone new to React, class components can be a large hurdle. Learning when and how to use them evidently still causes arguments with experienced React developers to this day. React’s developers over at Facebook recognized the common problems popping up with class components and came up with the HOOK.

类组件很棒，但是使用它们来处理状态可能很麻烦。 首先，可能很难遵循类组件的代码。 在状态被初始化并从父级传递到子级的情况下，状态会影响实际的组件层次结构。 受此限制会令人难以置信。 作为React的新手，类组件可能是一个很大的障碍。 到目前为止，学习何时以及如何使用它们显然仍然引起经验丰富的React开发人员的争论。 React在Facebook上的开发人员认识到类组件弹出的常见问题，并提出了HOOK。

React钩 (React Hooks)

React Hooks remove a lot of the pitfalls involved with using class components.

React Hooks消除了使用类组件所涉及的许多陷阱。

1. They allow us to use state without changing the component hierarchy. This can mean more freedom to structure your app and share state between components easily.它们使我们能够使用状态而无需更改组件层次结构。 这意味着可以有更大的自由来构建应用程序并在组件之间轻松共享状态。
2. Hooks allow code to be written in a more familiar way. For JS developers, the move to React can be fraught with new syntax and convention. Being able to handle state in a functional component is simply more familiar than learning the class component.挂钩允许以更熟悉的方式编写代码。 对于JS开发人员而言，向React的迁移可能会充满新的语法和约定。 能够处理功能组件中的状态比学习类组件更加熟悉。
3. They make state reusable anywhere in your code. Having components rely on each other for state mutation can cause the DOM tree to become a huge mess.它们使状态可以在代码中的任何地方重用。 使组件彼此依赖以进行状态突变会导致DOM树变得一团糟。

基本挂钩用法 (Basic Hook Usage)

A hook is a function that lets you “hook into” React features. This is a powerful tool for a React developer. How many times have you realized after writing a functional component that you needed to convert it to a class component to handle some type of state? Instead of rewriting the component, now we can use hooks.

挂钩是一项功能，可让您“挂钩” React功能。 对于React开发人员来说，这是一个强大的工具。 编写功能组件后，您需要多少次将其转换为用于处理某种状态的类组件的认识？ 现在我们可以使用钩子来代替重写组件。

useState is the way functional components declare and reuse state. It operates the same way this.state does in a class component. By declaring them here we can preserve the state variable!

useState是功能组件声明和重用状态的方式。 它的运行方式与此this.state在类组件中相同。 通过在此处声明它们，我们可以保留状态变量！

(Make sure to import React, { useState } from ‘react’ at the top of your file!)

(确保从文件顶部的'react'导入React，{useState}！)

Here a count variable is being set (count) followed by a function to update it (setCount). This operates like a class component declaration of this.state.count and this.setState. The initial state of count (0) is an argument of useState.

在这里，要设置一个计数变量(计数)，然后是一个用于对其进行更新的函数(setCount)。 这类似于this.state.count和this.setState的类组件声明。 计数(0)的初始状态是useState的参数。

As you can see, [count, setCount] are declared in square brackets. This is array destructuring.

如您所见，[count，setCount]在方括号中声明。 这是阵列的破坏。

“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.” https://reactjs.org/docs/hooks-state.html

“当我们使用useState声明状态变量时，它返回一对-一个包含两个项目的数组。 第一项是当前值，第二项是让我们对其进行更新的函数。” https://reactjs.org/docs/hooks-state.html

When we invoke the function setCount now

当我们现在调用函数setCount时

Look how clean that is! setCount is called and the variable count can be incremented by 3 on every button click!

看那有多干净！ 调用setCount，每单击一次按钮，变量计数就可以增加3！

Using Hooks to Fetch

使用挂钩获取

If you are familiar with class components you have probably used them to fetch data. Its a logical place to do so since class components hold state and have access to the componentDidMount() function (a perfect place to fetch). Can we use hooks to accomplish the same thing?

如果您熟悉类组件，则可能已使用它们来获取数据。 这样做是合乎逻辑的，因为类组件保持状态并可以访问componentDidMount()函数(一个理想的获取位置)。 我们可以使用钩子来完成同一件事吗？

Absolutely!

绝对！

Above, we have imported the useState from React and setup a basic fetch. Above the fetch function we have set the state hook. useState() is declaring an initial state of an empty object (just like you would with state ={} constructor). The first item in the destructured array is declaring a variable responseObject. The second is declaring a function called setResponseObj. The fetch gets our data, converts the response to JSON, and then sets the response as the argument of the setResponseObject() function. This function then takes the initial state value of responseObj( which is {}) and sets it to the response (fetched data). Now responseObject can be called in the return and we can access any data values. The code is clean, clear and easy to follow.

上面，我们从React导入了useState并设置了一个基本的获取。 在获取功能上方，我们设置了状态挂钩。 useState()声明一个空对象的初始状态(就像使用state = {}构造函数一样)。 解构数组中的第一项是声明变量responseObject。 第二个是声明一个名为setResponseObj的函数。 提取获取我们的数据，将响应转换为JSON，然后将响应设置为setResponseObject()函数的参数。 然后，此函数获取responseObj({})的初始状态值并将其设置为响应(获取的数据)。 现在可以在返回中调用responseObject，我们可以访问任何数据值。 该代码干净，清晰并且易于遵循。

Playin'Hooky (Playin’ Hooky)

React developers have been changing the way state is handled in our apps. These changes come from an understanding of the limitations and problems faced when state only being handled in one type of component. While class component aren’t likely to be phased out entirely from React, there is a definite shift toward the use of functional components as a way to keep state clear, clean, and reusable.

React开发人员一直在改变我们应用程序中处理状态的方式。 这些更改来自对仅在一种类型的组件中处理状态时所面临的局限性和问题的理解。 尽管不太可能完全从React中淘汰类组件，但确实有一定的向使用功能性组件的转变，以使状态保持清晰，干净和可重用。