(译)React hooks：它不是一种魔法，只是一个数组——使用图表揭秘提案规则-白红宇

解密 React Hooks 的工作原理

作为一名 React 开发者，我深知 Hooks API 的复杂性。为了帮助那些刚开始学习这个新 API 的开发者更好地理解它，我决定从底层机制出发，揭示 Hooks 的工作原理。

Hooks 的核心规则

在使用 React Hooks 的过程中，有两个关键规则需要遵守：

不要在循环、条件语句或嵌套函数中调用 Hooks

所有 Hooks 必须在同一个 React 组件中调用

虽然第二条规则的合理性比较直观，但第一条规则可能会让人困惑。为什么在循环或条件语句中调用 Hooks 会带来问题呢？

Hooks 的状态管理基于数组

为了更好地理解 Hooks 的工作方式，我们可以通过一个简单的例子来模拟其内部逻辑。假设我们有一个 useState Hook，它用于管理组件的状态。

首先，创建两个空数组，一个用于存储状态，另一个用于存储 setters 函数。然后，维护一个指针来跟踪当前正在处理的状态。

useState 的实现示例

以下是一个简化的 useState 助手函数的示例代码：

```javascriptlet state = [];let setters = [];let firstRun = true;let cursor = 0;

function createSetter(cursor) {return function setterWithCursor(newVal) {state[cursor] = newVal;};}

export function useState(initVal) {if (firstRun) {state.push(initVal);setters.push(createSetter(cursor));firstRun = false;}const setter = setters[cursor];const value = state[cursor];cursor++;return [value, setter];}

这个代码只是一个模拟，实际 React 的实现方式可能有所不同。此外，这只是一个提案，未来可能会发生变化。
  理解 Hooks 的工作流程
  让我们通过一个实际的组件来理解 Hooks 的工作流程。假设我们有一个组件：
  ```javascriptfunction RenderFunctionComponent() {    const [firstName, setFirstName] = useState("Rudi");    const [lastName, setLastName] = useState("Yardley");    return (            );}

在这个组件中，我们使用了两个 useState Hook。每次调用 useState 时，React会返回一个状态值和一个 setter 函数。通过这个 setter 函数，我们可以更新对应的状态。

为什么顺序很重要

在 React 组件的渲染过程中，Hooks 的顺序至关重要。如果我们在某些条件下调用 Hooks，或者在循环中使用 Hooks，可能会导致数据不一致的问题。例如：

```javascriptlet firstRender = true;function RenderFunctionComponent() { let initName; if (firstRender) { [initName] = useState("Rudi"); firstRender = false; } const [firstName, setFirstName] = useState(initName); const [lastName, setLastName] = useState("Yardley"); return (

);}```

在这个例子中，我们在条件语句中调用了 useState 函数。这样做会导致首次渲染和后续渲染之间的数据不一致，进而引发问题。

总结

通过上述分析，我们可以看出，Hooks 的核心原理是基于数组管理状态。每次渲染时，React 会维护一个指针，确保我们能够正确地读取和更新状态。然而，必须严格遵守 React 的规则，避免在不适当的位置调用 Hooks，否则可能会导致逻辑错误。

记住，Hooks 的设计目的是让我们更容易地管理组件的状态和副作用。理解其工作原理，可以帮助我们更高效地使用这些工具，提升开发效率。

如果你对 useEffect 这类其他 Hooks 感兴趣，建议继续深入研究它们，并将它们与 React 的生命周期方法进行对比。