React 中 Hook 的使用规则入门指南React 中 Hook 的使用规则入门指南 React Hook 是 Re

React 中 Hook 的使用规则入门指南

React Hook 是 React 16.8 引入的一项重要特性，它让函数组件也能拥有状态、生命周期等能力。但为了保证 Hook 能够正常工作，React 官方为 Hook 的使用制定了必须遵守的规则。

一、什么是 Hook？

在 React 中，Hook 是一种“钩子”，可以“钩住”函数组件的状态、生命周期等功能。最常用的 Hook 是 useState 和 useEffect，它们分别用于管理状态和处理副作用。

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

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

  useEffect(() => {
    document.title = `点击了 ${count} 次`;
  }, [count]);

  return (
    <div>
      <p>你点击了 {count} 次按钮</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

二、Hook 的两条核心规则

React 官方为 Hook 的使用制定了两条非常重要的规则，你必须遵守它们，否则代码可能出错。

✅ 规则一：只在最顶层调用 Hook

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

错误示例：

if (name) {
  const [age, setAge] = useState(0); // ❌ 错误：不能在 if 语句中使用 Hook
}

正确示例：

const [age, setAge] = useState(0); // ✅ 正确：在顶层使用 Hook

为什么？ React 是通过 Hook 调用的顺序来识别它们的。如果 Hook 被包裹在条件或循环中，React 就无法正确跟踪它们的状态。

✅ 规则二：只在 React 函数组件或自定义 Hook 中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook。

错误示例：

function doSomething() {
  useEffect(() => {}); // ❌ 错误：不能在普通函数中使用 Hook
}

正确示例：

function MyComponent() {
  useEffect(() => {}); // ✅ 正确：在组件中使用 Hook
  return <div>Hello</div>;
}

或者：

function useCustomHook() {
  useEffect(() => {}); // ✅ 正确：在自定义 Hook 中使用 Hook
}

为什么？ Hook 依赖于 React 的上下文环境，只有在 React 组件或自定义 Hook 中，React 才能正确地管理它们的状态和生命周期。

三、使用 Hook 的最佳实践

1. 命名自定义 Hook

自定义 Hook 应该以 use 开头，比如 useInput、useFetch，这样 React 才能识别它是一个 Hook。

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const handleChange = (e) => setValue(e.target.value);
  return { value, onChange: handleChange };
}

2. 不要破坏 Hook 的顺序

Hook 的调用顺序必须保持一致，不能根据条件跳过某些 Hook。

错误示例：

if (condition) {
  useEffect(() => {}); // ❌ 错误：可能跳过 Hook
}

正确示例：

useEffect(() => {
  if (condition) {
    // 在 Hook 内部判断逻辑 ✅
  }
}, [condition]);

四、常见 Hook 简介

1.`useState`：管理状态

const [state, setState] = useState(initialState);

用于在函数组件中保存状态。

2. `useEffect`：处理副作用

useEffect(() => {
  // 副作用逻辑，如数据获取、订阅、DOM 操作
}, [依赖项]);

用于模拟生命周期方法。

3. `useContext`：访问上下文

const value = useContext(MyContext);

用于访问 React 的上下文（Context）。

4. `useRef`：访问 DOM 或保存变量

const inputRef = useRef(null);

用于保存不会触发重新渲染的数据。

五、总结

React 的 Hook 让函数组件变得更加强大，但它们的使用是有规则的。作为新手，你需要记住以下几点：

✅ 只在最顶层调用 Hook
✅ 只在 React 组件或自定义 Hook 中使用 Hook
✅ 自定义 Hook 名字必须以 use 开头
✅ 不要根据条件跳过 Hook 的调用

React 中 Hook 的使用规则入门指南