React 中的 Hooks 是什么？

---

React Hooks 开辟了一种构建函数组件的全新方法，使我们能够包含以前仅适用于类组件的功能，例如状态逻辑。

React 主要利用其内置的 Hooks，useState 和 useEffect Hooks 来实现这一点。这些 Hooks j

在本文中，我们将介绍 Hooks 是什么以及如何使用它们来创建 React 应用程序。我们还将了解它们如何简化日常开发工作流程。

关于 React Hooks 的一切

正如 React 团队所说：

• “React Hooks 是 React.js 的一项新功能，它使我们能够在不编写类的情况下使用状态和其他 React 功能。”

它们通过消除对类组件和渲染方法的需求，并允许我们使用函数作为 Hooks，从而简化了我们使用 React.js 的方式。

它们于 2018 年底随 React 16.7 版本发布，并于 2019 年 3 月发布的 16.8 版本中正式发布。

React Hooks 作为类系统的替代方案。它是一种替代 React 组件模型的方法，允许我们避免不必要的抽象，并提供一种处理状态逻辑的替代方法，而无需继承或高阶组件 (HOC)。

它们消除了过去唯一选择是构建类的要求，并使开发人员能够访问状态和其他 React 功能。

但是，以下是一些每个开发人员都必须牢记的 Hooks 通用规则：

• Hooks 应该用在代码的最顶层作用域，绝不能用在循环、条件或嵌套函数中。

• Hooks 只能由 React 函数组件使用。

• 不要使用普通的 JavaScript 方法来调用 Hook。

注意 - 这些规则也适用于自定义 Hooks。

React 内置 Hooks

React 具有内置的 Hooks，即 useEffect 和 useState，允许开发人员使用代码片段来处理事件或数据更新。

但是，您还可以通过创建自定义 Hooks 来在组件之间重用有状态行为。让我们首先更详细地了解一下这些内置 Hooks。

• useState Hook

  useState Hook 用于在组件内存储状态。

  useState Hook 允许您在组件内部存储和访问状态，而无需使用 this.state 或 this.setState()。状态对象可以通过 props 从父组件传递到子组件，或者可以使用 useState Hook 直接在子组件上设置。

• useEffect Hook

  对于像从 API 获取数据或将其本地存储之类的副作用，我们使用 useEffect Hook。

  它使函数组件能够执行副作用，从而实现与 React 类中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 相同的功能，但仅使用单个 API。

什么是“自定义 Hooks”？

当我们想要在多个组件中实现 useState 和 useEffect Hooks 的派生功能时，使用自定义 Hooks 是一个有效的选择。

我们可以使用自定义 React Hooks 以高效且可扩展的方式轻松地在多个组件之间重用有状态行为。此外，自定义 Hooks 会产生清晰且组织良好的代码库，从而减少 React 项目中的复杂性和重复。

只要符合 React Hooks 标准，您就可以自由地开发任何您想要处理各种逻辑场景的自定义 Hook。

React Hooks 的优势

在 React 中，Hooks 解决了一系列问题，这些问题乍一看似乎与我们在五年内创建和维护数万个组件过程中遇到的问题无关。

无论您是在学习 React 还是使用具有类似组件架构的其他框架，您都可能熟悉其中一些问题。

我们将在这里看到 Hooks 的引入克服了哪些困难。

易于理解的复杂组件

过去，开发人员必须维护一开始很简单但最终变成了难以管理的状态逻辑混乱的部分。结果，出现错误和不一致的情况变得司空见惯。Hooks 允许您根据其组成部分之间的关系将单个组件划分为单独的函数，而不是要求基于生命周期方法进行拆分。

无需类即可降低复杂性（使用函数！）

由于类的存在，学习 React 可能非常困难。道具、状态和向下数据流是人们可以很好地掌握的概念，但在类中仍然难以理解。即使在经验丰富的 React 开发人员中，关于函数组件和类组件之间区别的争论也很常见。

相反，Hooks 允许您使用函数并使用更多 React 功能，而无需理解复杂的函数式或反应式编程技术。

易于重用有状态逻辑

您可以使用 Hooks 从组件中移除有状态逻辑，以便可以单独对其进行测试并再次使用。您可以使用 Hooks 重用有状态逻辑，而无需更改组件结构，这在以前即使是高阶组件和渲染道具也难以做到。

在众多组件之间或与社区共享 Hooks 现在变得非常简单。

底线

React 通过可以与所有组件共享的功能来扩展组件模型的方式。

简而言之，Hooks 极大地增强了我们开发灵活的 React 应用程序的能力，减少了对基于类的组件的需求。React 还提供了一些额外的 Hooks，您可以使用它们来增强这些 Hooks 的功能，并自行创建更出色的 Hooks。