React Hooks 完全指南

React Hooks 是 React 16.8 引入的新特性，它让你在不编写类组件的情况下使用 state 和其他 React 特性。

useState

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

import { useState } from 'react';

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

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

useEffect

useEffect 用于处理副作用，如数据获取、订阅、DOM 操作等。

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    async function fetchUser() {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      setUser(data);
    }
    fetchUser();
  }, [userId]); // 依赖数组

  return user ? <div>{user.name}</div> : <div>加载中...</div>;
}

useCallback 和 useMemo

这两个 Hook 用于性能优化：

• useCallback 缓存函数
• useMemo 缓存计算结果

import { useCallback, useMemo } from 'react';

function TodoList({ todos, filter }) {
  // 缓存过滤后的结果
  const filteredTodos = useMemo(() => {
    return todos.filter(todo => todo.completed === filter);
  }, [todos, filter]);

  // 缓存回调函数
  const handleToggle = useCallback((id) => {
    // ...
  }, []);

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

自定义 Hook

你可以将重复的逻辑提取到自定义 Hook 中：

function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

总结

React Hooks 让函数组件变得更加强大和灵活。掌握这些 Hook 是成为优秀 React 开发者的必经之路。