React 中 Hooks 的使用规则是什么？

推荐答案

在 React 中使用 Hooks 时，必须遵循以下规则：

1. 只在最顶层使用 Hooks：不要在循环、条件或嵌套函数中调用 Hooks。确保 Hooks 在每次渲染时都以相同的顺序被调用。
2. 只在 React 函数组件或自定义 Hooks 中调用 Hooks：不要在普通的 JavaScript 函数中调用 Hooks。

本题详细解读

1. 只在最顶层使用 Hooks

React 依赖于 Hooks 的调用顺序来正确地管理状态和副作用。如果在循环、条件或嵌套函数中调用 Hooks，可能会导致 Hooks 的调用顺序不一致，从而引发难以调试的问题。

错误示例：

if (condition) {
  useEffect(() => {
    // 副作用逻辑
  });
}

正确示例：

useEffect(() => {
  if (condition) {
    // 副作用逻辑
  }
});

2. 只在 React 函数组件或自定义 Hooks 中调用 Hooks

Hooks 是 React 特有的功能，只能在 React 函数组件或自定义 Hooks 中使用。在普通的 JavaScript 函数中调用 Hooks 会导致错误。

错误示例：

function regularFunction() {
  const [state, setState] = useState(0); // 错误：不能在普通函数中使用 Hooks
}

正确示例：

function MyComponent() {
  const [state, setState] = useState(0); // 正确：在 React 函数组件中使用 Hooks
  return <div>{state}</div>;
}

自定义 Hooks

自定义 Hooks 是一种将组件逻辑提取到可重用函数中的方式。自定义 Hooks 也必须遵循 Hooks 的使用规则。

示例：

function useCustomHook() {
  const [state, setState] = useState(0);
  useEffect(() => {
    // 副作用逻辑
  }, [state]);
  return state;
}

通过遵循这些规则，可以确保 Hooks 在 React 应用中正常工作，并避免潜在的错误。