深入了解React钩子＃1：简介

注意：这是系列文章中的第一篇，我们将深入探讨React Hooks，并尝试了解它们的用法。

React Hooks是React 16.8中的新增功能。 它们使您无需编写类即可使用状态和其他React功能。 这是您编写React方法的根本转变。

挂钩没有任何重大变化，并且100％向后兼容。 如果您是新手，请学习此功能或经验丰富的专业人士，请尝试此操作！

但是什么是挂钩？

挂钩是让您“挂钩” React状态和生命周期的函数
功能组件的功能。 钩子在课堂上不起作用-
他们让您无需类即可使用React。 您绝对可以在单个树中将类和函数组件与Hooks混合使用。

在2018年React会议上，Sophie Alpert和Dan Abramov介绍了Hooks，您可以观看下面的视频介绍：

React核心团队建议在您编写的新组件中使用Hooks 。 从长远来看，他们希望Hooks成为人们编写React组件的主要方式。 因此，请在新项目的功能组件和现有项目的新组件中使用挂钩。

问题解决了

注意：钩子可以解决更多问题，但现在我们将集中讨论以下问题-

1. 功能组件可以使用类似于类的基于状态的组件
2. 我们可以避免在componentDidMount（）和componentDidUpdate（）中写几乎相同的东西
3. 通过编写更少，更简洁的代码来实现相同的功能

反应钩的规则

使用React Hooks时需要遵循两个规则：

1. 仅在顶层调用挂钩：不要在循环，条件或嵌套函数内部调用挂钩。 相反，请始终在您的React函数的顶层使用挂钩。 通过遵循此规则，可以确保每次渲染组件时都以相同的顺序调用Hook。 这就是让React在多个useState和useEffect调用之间正确保留Hook的状态的原因。
2. 仅从React函数调用挂钩：请勿从常规JavaScript函数调用挂钩。 相反，您可以从React Functions或Custom React Hooks中调用它们

有关规则的更多详细信息，请检查— https://reactjs.org/docs/hooks-rules.html#explanation

React核心团队为我们提供了一个皮棉规则，可以帮助我们正确使用钩子（强制执行上述规则）。 您也可以在ESLint配置中添加相同的内容。

通过执行npm install -D eslint-plugin-react-hooks添加ESLint规则，并将其添加到ESLint配置中：

{
  "rules" : {
    …,
    "react-hooks/rules-of-hooks" : "error"
  },
  "plugins" : [
    …,
    "react-hooks"
    ],
}

在接下来的故事中，我们将按顺序介绍以下挂钩：

• useState
• useEffect
• useContext
• useRef
• useReducer
• useMemo
• useCallback
• useLayoutEffect
• useImperativeHandle

From: https://hackernoon.com/react-hooks-63192d1d