React 中 Hooks 的基本规则：如何正确使用 Hooks

React 中的 Hook 规则

React hooks 是一个强大的功能，允许您在功能组件中使用状态和其他 React 功能。但是，为了确保钩子正常且一致地工作，在使用它们时必须遵循一些特定规则。这些规则帮助 React 以优化且可预测的方式管理钩子的状态、效果和其他功能。

Hook 规则 是：

1. 仅调用顶层的钩子：
   • 不要在循环、条件或嵌套函数内调用钩子。应始终在 React 组件或自定义钩子的顶层调用钩子。
   • 这确保了每次渲染时都以相同的顺序调用钩子，这对于 React 的状态管理和渲染逻辑至关重要。

坏例子：

   if (someCondition) {
     useState(0);  // Bad: Hook inside condition
   }

好例子：

   const [count, setCount] = useState(0); // Always called at the top level

1. 仅从 React 函数调用钩子：
   • 从功能组件或自定义钩子调用钩子。不要从常规 JavaScript 函数、类组件或 React 函数组件生态系统之外调用它们。
   • 钩子设计为仅与功能组件或自定义钩子一起使用，不适用于常规函数或类方法。

坏例子：

   function regularFunction() {
     useState(0);  // Bad: Hook used outside a React component
   }

好例子：

   const MyComponent = () => {
     const [count, setCount] = useState(0); // Good: Inside a functional component
   };

1. 使用自定义钩子的 use 前缀：
   • 自定义钩子必须从 use 开始，以遵循 React 的约定并将其与常规函数区分开来。
   • 这有助于提高可读性和一致性，当 React 看到带有 use 前缀的函数时，它可以在内部检查是否违反规则。

坏例子：

   function fetchData() {  // Bad: Not prefixed with "use"
     // Custom hook logic
   }

好例子：

   function useFetchData() {  // Good: Prefixed with "use"
     // Custom hook logic
   }

---

为什么这些规则很重要？

• Hook 调用顺序：Hook 依赖于它们被调用的顺序。 React 在内部跟踪哪个钩子对应于哪个状态或效果，因此如果您有条件地或在循环内调用钩子，它们的顺序可能会在渲染之间改变。这会导致意外的行为和错误。通过在顶层调用钩子，React 始终可以以一致的方式跟踪它们。

• 跨渲染的一致性：React 依赖于每次组件重新渲染时以相同顺序调用的钩子。如果在不同的渲染期间以不同的顺序调用钩子，React 将不知道如何正确应用状态和效果。

• 避免 Hook 调用不匹配：在非 React 函数或条件块中调用 hook 会导致不匹配和错误，因为 React 不知道哪个状态对应于哪个 hook。

---

如何有效遵守规则

1. 将所有钩子放在组件的顶层：这包括 useState、useEffect、useCallback、useMemo 和其他 React 钩子。切勿将它们放置在循环、条件或嵌套函数中。

示例：

   if (someCondition) {
     useState(0);  // Bad: Hook inside condition
   }

1. 为可重用逻辑创建自定义钩子：如果您发现在多个组件中重用相同的逻辑，则可以创建自定义钩子。自定义钩子名称始终以 use 开头，以确保一致性并避免与常规函数混淆。

示例：

   const [count, setCount] = useState(0); // Always called at the top level

1. 在每次渲染时以相同的顺序使用钩子：即使您在循环或条件内使用钩子，也要确保在每次渲染期间以相同的顺序调用钩子。

坏例子：

   function regularFunction() {
     useState(0);  // Bad: Hook used outside a React component
   }

好例子：

   const MyComponent = () => {
     const [count, setCount] = useState(0); // Good: Inside a functional component
   };

1. 遵循自定义钩子的规则：自定义钩子非常适合跨组件共享可重用逻辑。始终在它们前面加上 use 前缀，并确保它们遵循与 React 内置钩子相同的规则。

示例：

   function fetchData() {  // Bad: Not prefixed with "use"
     // Custom hook logic
   }

---

要避免的常见错误

• 有条件地调用钩子：您可能会想在条件或循环内调用钩子，但这违反了钩子必须始终以相同顺序调用的规则。相反，请考虑重组代码以始终以相同的顺序调用挂钩。

• 在 React 组件外部使用钩子或自定义钩子：React 钩子只能在功能组件或自定义钩子内部使用。在类组件或常规函数中使用钩子会导致错误。

---

结论

Hooks 规则 是允许 React 维护一致且可预测的状态管理系统的基本原则。通过遵守这些规则，React 可以确保您的组件正常工作、正确管理状态以及按预期执行副作用。永远记住：

• 在组件的顶层调用钩子。
• 仅从 React 函数或自定义钩子调用钩子。
• 始终以 use 开头自定义钩子名称。

遵循这些指南可确保您的 React 应用程序高性能且无错误。

---

以上是React 中 Hooks 的基本规则：如何正确使用 Hooks的详细内容。更多信息请关注PHP中文网其他相关文章！