简介
让我们来看一下如何在函数组件中使用状态和生命周期方法。
Hooks 是 React 16.8.0 版本中引入的一个全新且独特的概念。许多 React 核心开发人员已将 Hooks 描述为 React 发展历程中最具变革性和根本性的更新之一。事实上，Hooks 在 2018 年的 React Conf 上首次公布时就引起了广泛关注——甚至早于其在 React 16.7 的 alpha 版本中的正式发布。此后，其他一些框架也纷纷效仿，推出了各自的 Hooks 实现。但究竟什么是 Hooks？
什么是 Hooks？
**Hooks** 使得我们可以在 **函数式组件** 中使用过去仅限于类组件的功能机制。例如，`setState` 或生命周期方法如 `componentDidMount()` 和 `componentDidUpdate()`，这些原本专属于类组件的特性，现在都可以通过 **Hooks** 在函数式组件中使用。简单来说，**Hooks** 只是一些遵循特定规范的特殊函数。其中一项规范就是：一个 **Hook** 的名称必须以 `use` 开头。
React 提供了多个内置的 Hooks，开箱即用，例如 useState、useEffect 和 useContext。同时，React 也支持创建 自定义 Hooks，允许我们在其中封装可复用的逻辑。为了遵循上述命名约定，自定义 Hook 的名称也必须以 use 开头，除此之外，只要符合 JavaScript 函数命名规则，我们可以自由命名。像 useAccountInfo 或 useDocumentInfo 这样的名称就是很好的例子。
Hooks 使我们能够以更清晰的方式复用组件逻辑。在 Hooks 出现之前，许多组件常常包含实现方式几乎相同的 componentDidMount() 或 componentDidUpdate() 方法，唯一的区别可能只是在 componentDidUpdate() 中检查不同的参数是否发生了变化。例如，判断通过 props 传递的用户 ID 是否变更，从而触发新的 API 请求。
因此，Hooks 的出现正是为了解决这类问题——让复杂逻辑的共享变得更加容易，无需编写大量重复代码。如果你已经熟悉类组件及其工作机制，那么 Hooks 可能会迫使你彻底重新思考组件之间应该如何交互。无论是开发流程还是组件本身的组织方式都发生了改变。过去依赖复杂的类结构、属性、继承以及共享的 this 上下文，如今被 Hooks 所替代，取而代之的是相对简单且清晰的函数形式。
类组件还有使用的必要吗？
现在我们需要回答一个问题：类组件是否还值得继续使用？
自从 React Hooks 发布以来，这个问题反复被提及。React 团队曾明确建议开发者不要急于将现有基于类的组件重写为使用 Hooks 的 函数式组件。类组件仍将是 React 的一部分。
然而，社区并未完全采纳这一建议。许多开发者在 React 16.7.0-alpha（首个包含 Hooks 的版本）发布后，便开始全面重构整个应用，并在 Twitter 上分享他们对 Hooks 带来的开发简洁性以及摆脱类组件所带来的额外开销的兴奋之情。
当然，只要 React 仍然支持，你就可以继续使用类组件，目前也没有计划将其移除。但一旦你习惯了使用 React Hooks 来编写组件，再回头去使用类组件，可能会觉得繁琐且难以适应——因为 Hooks 所带来的简洁性和更高的代码可读性实在难以舍弃。
类组件与 Hooks 的对比
为了展示使用 Hooks 如何显著简化组件定义，React 核心团队成员 Sunil Pai 创建了一个示例，将一个类组件与使用 Hooks 的 函数式组件 进行对比。两个示例中相同逻辑部分使用相同颜色标注，而类组件中不再需要的逻辑则被遮盖处理。如下图所示，使用 Hooks 的版本信息更加集中、简洁，不像类组件那样分散：