HOOK 为何要按顺序写？你的代码需要它。

2024-02-06 07:26:36

在 React 中，Hook 是内置的函数，允许开发者在函数组件中使用状态、副作用和其他特性。自推出以来，Hook 已成为前端开发人员的新宠，它们帮助开发者编写更简洁、更易于维护的代码。

然而，在使用 Hook 时，开发者可能会注意到一个独特的规则：Hook 必须按顺序编写。这意味着您不能在其他 Hook 之后使用 Hook。这个规则乍一看可能有些限制，但背后的原因非常重要。

为什么要按顺序编写 Hook？

最主要的原因是，React 使用 Hook 来管理组件的状态。当一个组件被渲染时，React 会按照 Hook 被定义的顺序依次执行它们。这样做可以确保组件的状态始终处于正确的位置。

例如，考虑以下代码：

import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default MyComponent;

在这个组件中，我们使用了 useState Hook 来管理组件的状态（即 count）和 useEffect Hook 来在每次 count 发生变化时更新文档标题。

现在，如果我们将这两个 Hook 的顺序颠倒，如下所示：

import React, { useState, useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    document.title = `Count: ${count}`;
  });

  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default MyComponent;