5、React Hooks：使用、局限与解决方案

React Hooks：使用、局限与解决方案

1. React Hooks 基础与局限

在 React 开发中，Hooks 是一项强大的特性，它允许我们在不编写 class 的情况下使用 state 以及其他 React 特性。不过，在使用 Hooks 时，我们需要遵循一些规则。

1.1 重新实现 useState 带来的启示

当我们重新实现 useState 函数时，借助全局状态和闭包，我们发现为了支持多个 Hooks，需要使用数组来跟踪它们。但这也带来了一个限制：在函数调用中，Hooks 的调用顺序必须保持一致，这使得条件式 Hooks 和循环中的 Hooks 无法实现。

1.2 真实 React Hooks 的特点

真实的 React Hooks 与我们简单的实现有所不同。它们不使用全局变量，而是将状态存储在 React 组件内部，并且内部处理 Hook 计数器，无需我们在函数组件中手动重置计数。此外，当状态改变时，真实的 Hooks 会自动触发组件的重新渲染。不过，Hooks 必须从 React 函数组件中调用，不能在 React 外部或 React 类组件内部调用。

1.3 使用 Hooks 的注意事项

使用 React Hooks 时，有以下一些限制需要注意：
- 不能在条件返回语句之后定义 Hooks。
- 不能在事件处理程序中定义 Hooks。
- 不能在 try/catch/finally 块内部定义 Hooks。
- 不能在传递给 useMemo