我的技术博客

React Hooks 完全指南

作者: Nexus Trinity... 次浏览
💻技术
React前端开发JavaScript

深入理解 React Hooks 的原理和最佳实践

React Hooks 完全指南

React Hooks 改变了我们编写 React 组件的方式，让函数组件也能使用状态和生命周期特性。

useState - 状态管理

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

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

useEffect - 副作用处理

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

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // 依赖数组

  if (!user) return <div>Loading...</div>;

  return <div>{user.name}</div>;
}

useCallback - 函数记忆化

避免不必要的函数重新创建：

import { useCallback, useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = useCallback((text) => {
    setTodos(prev => [...prev, { id: Date.now(), text }]);
  }, []); // 空依赖数组，函数永远不会改变

  return <TodoForm onSubmit={addTodo} />;
}

useMemo - 值记忆化

缓存计算结果，优化性能：

import { useMemo } from 'react';

function ExpensiveComponent({ items }) {
  const total = useMemo(() => {
    console.log('Calculating total...');
    return items.reduce((sum, item) => sum + item.price, 0);
  }, [items]); // 只有 items 改变时才重新计算

  return <div>Total: ${total}</div>;
}

useRef - 引用持久化

保存可变值或 DOM 引用：

import { useRef, useEffect } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // 组件挂载后自动聚焦
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}

自定义 Hooks

创建可复用的逻辑：

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// 使用
function App() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle Theme: {theme}
    </button>
  );
}

Hooks 规则

使用 Hooks 时必须遵守两条规则：

  1. 只在顶层调用 Hooks：不要在循环、条件或嵌套函数中调用
  2. 只在 React 函数中调用 Hooks：函数组件或自定义 Hooks

最佳实践

  1. 合理使用依赖数组：确保列出所有依赖
  2. 避免过度优化：不要滥用 useMemo 和 useCallback
  3. 提取自定义 Hooks：复用逻辑时创建自定义 Hooks
  4. 保持 Hooks 简单：一个 Hook 应该只做一件事

总结

React Hooks 让函数组件变得更加强大和灵活：

  • useState 管理状态
  • useEffect 处理副作用
  • useCallback 和 useMemo 优化性能
  • useRef 持久化引用
  • 自定义 Hooks 复用逻辑

掌握这些 Hooks 能够帮助你写出更清晰、更易维护的 React 代码。

📚 相关文章推荐