本文共 7098 字，大约阅读时间需要 23 分钟。
react hooks
by Harsh Makadia
通过苛刻马卡迪亚
As the ReactJs library gets new updates, there are a lot of things being added and a few that are deprecated too. ReactJs is becoming more powerful day by day due to such updates. As a developer, you need to keep yourself up to date with new features coming out in every version.
随着ReactJs库获得新的更新，添加了很多东西，也有一些不推荐使用。 由于这种更新，ReactJs变得越来越强大。 作为开发人员，您需要随时了解每个版本中的新功能。
Well, React Hooks, a feature which is available in React v16.7.0-alpha, is something awesome you should know about.
好吧，React Hooks是React v16.7.0-alpha中可用的一项功能，您应该了解它。
Here is a teaser for React Hooks.
这是React Hooks的预告片。
In the above code, useState is the first Hook.
在上面的代码中， useState是第一个挂钩。
Now let’s jump into the problem that Reacts Hooks will be solving.
现在让我们跳入Reacts Hooks将要解决的问题。
After all, every new feature is introduced to solve a problem. Here is the list of things that the has to say about the problems that will be solved.
毕竟，引入了每个新功能来解决问题。 这是必须解决的问题列表。
Reusable behavior cannot be attached to the React component. A good example of it could be connecting to the store. If you’ve some experience in React, you may be knowing some of the patterns like and that can be handy while solving such problems. Using such patterns, components have to be restructured in order to use them making code harder to follow and maintain.
可重用行为不能附加到React组件。 一个很好的例子就是连接商店。 如果您对React有一定的经验，那么您可能会知道一些模式，例如和 ，这些模式在解决此类问题时会很方便。 使用这种模式，必须对组件进行重组，以便使用它们使代码难以遵循和维护。
With the introduction of Hooks, stateful logic can be extracted from the component. This allows it to be tested independently, and it can be reused.
通过引入Hooks，可以从组件中提取状态逻辑。 这使得它可以独立测试，并且可以重复使用。
With Hooks, you can reuse stateful logic without actually changing your component hierarchy.
使用Hooks，您可以重用状态逻辑，而无需实际更改组件层次结构。
There are times when a component grows from having a small state to an unmanageable state of stateful logic.
有时组件会从具有较小状态的状态逻辑变为无法管理的状态逻辑。
Each lifecycle method sometimes contains a mix of unrelated logic. For example, a component might perform some data fetching via API calls in componentDidMount and componentDidUpdate. However, the same componentDidMount method might also contain some of the unrelated logic.
每种生命周期方法有时都包含不相关的逻辑。 例如，一个组件可能通过componentDidMount和componentDidUpdate API调用执行某些数据获取。 但是，相同的componentDidMount方法也可能包含一些不相关的逻辑。
This logic sets up event listeners with cleanup performed in componentWillUnmount. Related code that changes together gets split.The unrelated code which is combined into a single method brings in bugs and inconsistencies.
此逻辑设置事件侦听器，并在componentWillUnmount执行清理。 一起变化的相关代码被拆分。不相关的代码被合并到一个方法中，从而导致错误和不一致。
We often come across a situation where we are not able to split a large component into smaller ones because of the stateful values. Also, it becomes difficult to test them.
我们经常会遇到由于有状态值而无法将大型组件拆分为较小组件的情况。 而且，测试它们变得困难。
To solve this problem, Hooks let you split one component into smaller functions based on what pieces are related. A good example of it could be setting up a subscription or fetching data, irrespective of code split based on the lifecycle method.
为了解决此问题， Hooks允许您根据相关的部分将一个组件拆分为较小的函数。 一个很好的例子就是建立订阅或获取数据 ，而与基于生命周期方法的代码拆分无关。
With Hooks, more of React’s features can be used without the need for classes.
使用Hooks，无需类即可使用React的更多功能。
Here is the code snippet we saw above:
这是我们在上面看到的代码片段：
The use of useState is the Hook that we are talking about.
useState的使用是我们正在谈论的Hook。
We call it inside a function component to add a local state to it. React will preserve this state between all the re-rendering happening. useState returns a pair which has the current state value and a function that lets you update the value.
我们在函数组件内部调用它以向其添加本地状态。 React将在所有重新渲染发生之间保留此状态。 useState返回一个具有当前状态值的对和一个用于更新该值的函数。
You can call this function from an event handler or from somewhere else. It’s similar to this.setState in a React class, but it doesn’t merge the old and new state altogether.
您可以从事件处理程序或其他地方调用此函数。 它与React类中的this.setState相似，但是它不会完全合并新旧状态。
There is only one argument to useState that is the initial state. In this example given above, the initial state is 0 because our counter starts from zero. Note that unlike this.state, the state here doesn’t have to necessarily be an object — however it can be an object if you want.
useState只有一个参数是初始状态。 在上面给出的示例中，初始状态为0因为我们的计数器从零开始。 请注意，与this.state不同，这里的状态不必一定是对象-但是，如果需要，它可以是对象。
The syntax gives different names to the state variables which we declared by calling useState. These names don't belong to part of the useState API. Instead, React assumes that if you call a lot many times, you are doing it in the same order during the time of every render.
语法为我们通过调用useState声明的状态变量赋予了不同的名称。 这些名称不属于useState API的一部分。 相反，React假定如果您多次调用，则在每次渲染期间您将以相同的顺序进行操作。
Note: Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside React classes — they let you use React without classes.
注意： 挂钩是使您可以“挂钩”功能组件中的React状态和生命周期功能的函数。 挂钩在React类中不起作用 -它们使您可以在没有类的情况下使用React。
Working with React you might have already worked on data fetching, subscriptions, or manually changing the DOM from React components. We call these operations as “side effects” (or “effects” in short).
使用React，您可能已经从事数据获取，订阅或从React组件手动更改DOM的工作。 我们将这些操作称为“副作用”(或简称为“效果”)。
The Effect Hook, useEffect, adds the ability to perform the side effects from a function component. It has the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.
效果挂钩useEffect增加了从功能组件执行副作用的功能。 它具有与React类中的componentDidMount ， componentDidUpdate和componentWillUnmount相同的目的，但统一为一个API。
For example, the below component sets the document title after React updates the DOM:
例如，以下组件在React更新DOM后设置文档标题：
When you make a call to useEffect, you’re telling React to run your “effect” function after flushing changes to the DOM. Effects are declared inside the component and thus have access to its props and state. By default, React runs the effects after every render that happens— including the first render.
调用useEffect ，是在告诉React在将更改刷新到DOM后运行“ effect”函数。 效果在组件内部声明，因此可以访问其道具和状态。 默认情况下，React在每次渲染后( 包括第一个渲染)运行效果。
Hooks are JavaScript functions, but they have two additional rules:
挂钩是JavaScript函数，但是它们有两个附加规则：
Only call Hooks at the top level. Don’t try to call Hooks inside loops, conditions, or nested functions.
仅在顶层调用Hooks。 不要试图在循环，条件或嵌套函数中调用Hook。
Only call Hooks from React function components. Don’t try to call Hooks from regular JavaScript functions.
仅从React函数组件调用Hooks。 不要尝试从常规JavaScript函数调用Hook。
Well, this is a quick glance into React Hooks. For more detailed description follow this link below:
好吧，这是对React Hooks的快速浏览。 有关更多详细说明，请点击下面的链接：
Happy Learning! ? ?
学习愉快！ ？ ？
翻译自:
react hooks
转载地址：http://adewd.baihongyu.com/