React Hooks 完全指南：从入门到精通

React Hooks 是 React 16.8 引入的新特性，它让我们可以在函数组件中使用状态和其他 React 特性。本文将带你深入了解 Hooks 的工作原理和最佳实践。

为什么需要 Hooks？

在 Hooks 出现之前，我们需要使用类组件来管理状态和生命周期。这带来了一些问题：

组件间逻辑复用困难
复杂组件难以理解
类组件的学习成本较高

Hooks 解决了这些问题，让我们可以：

在函数组件中使用状态
复用状态逻辑
将相关逻辑组织在一起

常用 Hooks 详解

useState

useState 是最基础的 Hook，用于在函数组件中添加状态。

import React, { useState } from "react";

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

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

useEffect

useEffect 用于处理副作用，相当于类组件中的生命周期方法。

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchUser() {
      setLoading(true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error("获取用户信息失败:", error);
      } finally {
        setLoading(false);
      }
    }

    fetchUser();
  }, [userId]); // 依赖数组

  if (loading) return <div>加载中...</div>;
  if (!user) return <div>用户不存在</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

useContext

useContext 用于消费 Context，避免 prop drilling。

import React, { useContext, createContext } from "react";

const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
    </ThemeContext.Provider>
  );
}

function Header() {
  const theme = useContext(ThemeContext);

  return (
    <header className={`header-${theme}`}>
      <h1>我的应用</h1>
    </header>
  );
}

自定义 Hooks

自定义 Hooks 是 React Hooks 最强大的特性之一，它让我们可以提取和复用组件逻辑。

// 自定义 Hook：useLocalStorage
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("读取 localStorage 失败:", error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error("写入 localStorage 失败:", error);
    }
  };

  return [storedValue, setValue];
}

// 使用自定义 Hook
function Settings() {
  const [theme, setTheme] = useLocalStorage("theme", "light");

  return (
    <div>
      <p>当前主题: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        切换主题
      </button>
    </div>
  );
}

Hooks 使用规则

使用 Hooks 时需要遵循两个重要规则：

只在最顶层调用 Hooks
- 不要在循环、条件或嵌套函数中调用 Hooks
只在 React 函数中调用 Hooks
- 在 React 函数组件中调用 Hooks
- 在自定义 Hooks 中调用其他 Hooks

// ❌ 错误：在条件语句中使用 Hook
function BadExample({ condition }) {
  if (condition) {
    const [count, setCount] = useState(0); // 违反规则
  }
  // ...
}

// ✅ 正确：在顶层使用 Hook
function GoodExample({ condition }) {
  const [count, setCount] = useState(0);

  if (condition) {
    // 在这里使用 count 和 setCount
  }
  // ...
}

性能优化

useMemo

useMemo 用于缓存计算结果，避免不必要的重复计算。

function ExpensiveComponent({ items, filter }) {
  const filteredItems = useMemo(() => {
    return items.filter((item) => item.category === filter);
  }, [items, filter]);

  return (
    <ul>
      {filteredItems.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

useCallback

useCallback 用于缓存函数，避免子组件不必要的重新渲染。

function TodoList({ todos, onToggle }) {
  const handleToggle = useCallback(
    (id) => {
      onToggle(id);
    },
    [onToggle]
  );

  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} onToggle={handleToggle} />
      ))}
    </ul>
  );
}

最佳实践

合理使用依赖数组
- 确保 useEffect 的依赖数组包含所有使用的变量
- 使用 ESLint 插件 eslint-plugin-react-hooks 来检查
避免过度优化
- 不要过早使用 useMemo 和 useCallback
- 先确保有性能问题再进行优化
自定义 Hooks 命名
- 自定义 Hooks 必须以 "use" 开头
- 使用描述性的名称
状态结构设计
- 相关的状态应该组合在一起
- 避免过深的嵌套结构

总结

React Hooks 为函数组件带来了强大的能力，让我们可以：

在函数组件中使用状态和副作用
更好地复用逻辑
编写更简洁、更易理解的代码

掌握 Hooks 是现代 React 开发的必备技能。通过合理使用 Hooks，我们可以构建更加优雅和高效的 React 应用。

希望这篇文章能帮助你更好地理解和使用 React Hooks！