React Hooks 使用详解

小小前端_我自坚强2025-10-10 13:59

引言

React Hooks 是 React 16.8 版本引入的重要特性，它彻底改变了函数组件的开发方式，使得函数组件可以拥有状态（state）和生命周期等原本只有类组件才具备的能力。本文将深入探讨 React Hooks 的各个方面，从基础概念到高级用法，帮助你全面掌握这一现代 React 开发的核心技术。

1. React Hooks 基础概念

1.1 什么是 Hooks

Hooks 是 React 提供的一组函数，让你可以在函数组件中"钩入"React 的状态和生命周期等特性。它们以 use 开头命名，例如 useState、useEffect 等。

1.2 为什么需要 Hooks

在 Hooks 出现之前，React 有两种创建组件的方式：

  • 函数组件：简单但功能有限，无法使用状态和生命周期
  • 类组件：功能完整但代码冗长，学习成本高，难以复用逻辑

Hooks 的出现解决了以下问题：

  • 在不编写 class 的情况下使用 state 和其他 React 特性
  • 更容易复用组件状态逻辑
  • 简化复杂组件的理解和测试
  • 避免类组件中 this 指向的问题

2. 基础 Hooks

2.1 useState

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

jsx 复制代码 
import React, { useState } from 'react';

function Counter() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState 的使用要点：

  1. 数组解构 ：useState 返回一个数组，第一个元素是当前状态值，第二个元素是更新状态的函数
  2. 初始值 ：useState 的参数是状态的初始值
  3. 状态更新：调用更新函数会触发组件重新渲染
  4. 函数式更新：当新状态依赖于前一个状态时，可以传入函数：
jsx 复制代码 
function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    // 函数式更新，确保基于最新状态计算
    setCount(prevCount => prevCount + 1);
  };

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

2.2 useEffect

useEffect 用于处理副作用，如数据获取、订阅或手动修改 DOM。

jsx 复制代码 
import React, { useState, useEffect } from 'react';

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

  // 相当于 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    // 更新文档标题
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect 的清理机制：

jsx 复制代码 
function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    // 订阅好友状态
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

    // 清理函数，在组件卸载时执行
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

useEffect 的依赖数组：

jsx 复制代码 
// 1. 没有依赖数组 - 每次渲染后都执行
useEffect(() => {
  console.log('每次渲染后都执行');
});

// 2. 空依赖数组 - 只在挂载时执行一次
useEffect(() => {
  console.log('只在挂载时执行');
}, []);

// 3. 有依赖项 - 依赖项变化时执行
useEffect(() => {
  console.log('count 变化时执行');
}, [count]);

2.3 useContext

useContext 用于订阅 React context 的变更。

jsx 复制代码 
import React, { useContext } from 'react';

// 创建 Context
const ThemeContext = React.createContext('light');

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

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  // 使用 useContext 获取 context 值
  const theme = useContext(ThemeContext);
  
  return (
    <button style={{ background: theme === 'dark' ? 'black' : 'white' }}>
      I am styled by theme context!
    </button>
  );
}

3. 高级 Hooks

3.1 useReducer

useReducer 是 useState 的替代方案，适用于复杂的状态逻辑。

jsx 复制代码 
import React, { useReducer } from 'react';

// 定义 reducer 函数
function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: action.payload };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'reset', payload: 0 })}>
        Reset
      </button>
    </>
  );
}

3.2 useCallback

useCallback 用于优化性能，返回一个 memoized 回调函数。

jsx 复制代码 
import React, { useState, useCallback } from 'react';

function Parent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  // 使用 useCallback 缓存函数，避免子组件不必要的重新渲染
  const handleIncrement = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  const handleNameChange = useCallback((e) => {
    setName(e.target.value);
  }, []);

  return (
    <div>
      <Child onIncrement={handleIncrement} />
      <input value={name} onChange={handleNameChange} />
    </div>
  );
}

const Child = React.memo(({ onIncrement }) => {
  console.log('Child rendered');
  return <button onClick={onIncrement}>Increment</button>;
});

3.3 useMemo

useMemo 用于优化性能，返回一个 memoized 值。

jsx 复制代码 
import React, { useState, useMemo } from 'react';

function ExpensiveComponent() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState([]);

  // 使用 useMemo 缓存昂贵的计算结果
  const expensiveValue = useMemo(() => {
    console.log('执行昂贵的计算');
    return items.reduce((acc, item) => acc + item.value, 0);
  }, [items]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setItems([...items, { value: Math.random() }])}>
        Add Item
      </button>
    </div>
  );
}

3.4 useRef

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。

jsx 复制代码 
import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // 直接访问 DOM 节点
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

// 保存可变值的示例
function Timer() {
  const intervalRef = useRef(null);
  const [count, setCount] = useState(0);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

  const stopTimer = () => {
    clearInterval(intervalRef.current);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={stopTimer}>Stop Timer</button>
    </div>
  );
}

4. 自定义 Hooks

自定义 Hooks 是 React 中复用组件逻辑的常用方式。

4.1 创建自定义 Hook

jsx 复制代码 
import { useState, useEffect } from 'react';

// 自定义 Hook：获取当前窗口尺寸
function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

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

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

  return windowDimensions;
}

// 使用自定义 Hook
function ShowWindowDimensions() {
  const { width, height } = useWindowDimensions();

  return (
    <div>
      Window size: {width} x {height}
    </div>
  );
}

4.2 更复杂的自定义 Hook

jsx 复制代码 
import { useState, useEffect } from 'react';

// 自定义 Hook：数据获取
function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

// 使用自定义 Hook
function UserProfile({ userId }) {
  const { data: user, loading, error } = useApi(`/api/users/${userId}`);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return <div>No user found</div>;

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

5. Hooks 最佳实践

5.1 Hook 规则

  1. 只在最顶层调用 Hooks：不要在循环、条件或嵌套函数中调用 Hooks
  2. 只在 React 函数组件中调用 Hooks：不要在普通的 JavaScript 函数中调用 Hooks
jsx 复制代码 
// ✅ 正确：在顶层调用
function MyComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // ...
  }, []);

  // ...
}

// ❌ 错误：在条件语句中调用
function MyComponent({ condition }) {
  if (condition) {
    const [count, setCount] = useState(0); // 错误！
  }
  
  // ...
}

5.2 优化性能

jsx 复制代码 
import React, { useState, useCallback, useMemo } from 'react';

function OptimizedComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  // 使用 useCallback 缓存函数
  const handleIncrement = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  // 使用 useMemo 缓存计算结果
  const expensiveCalculation = useMemo(() => {
    // 模拟昂贵的计算
    let result = 0;
    for (let i = 0; i < count * 1000000; i++) {
      result += i;
    }
    return result;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Calculation: {expensiveCalculation}</p>
      <button onClick={handleIncrement}>Increment</button>
      <input 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        placeholder="Enter name"
      />
    </div>
  );
}

5.3 错误处理

jsx 复制代码 
import { useState, useEffect } from 'react';

function useAsyncData(fetchFunction) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true;

    const fetchData = async () => {
      try {
        setLoading(true);
        setError(null);
        const result = await fetchFunction();
        
        // 确保组件仍然挂载
        if (isMounted) {
          setData(result);
        }
      } catch (err) {
        if (isMounted) {
          setError(err);
        }
      } finally {
        if (isMounted) {
          setLoading(false);
        }
      }
    };

    fetchData();

    // 清理函数
    return () => {
      isMounted = false;
    };
  }, [fetchFunction]);

  return { data, loading, error };
}

6. 实际应用场景

6.1 表单处理

jsx 复制代码 
import React, { useState } from 'react';

function useForm(initialValues, onSubmit) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues(prev => ({
      ...prev,
      [name]: value
    }));
    
    // 清除对应字段的错误
    if (errors[name]) {
      setErrors(prev => ({
        ...prev,
        [name]: null
      }));
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里可以添加表单验证逻辑
    onSubmit(values);
  };

  return {
    values,
    errors,
    handleChange,
    handleSubmit
  };
}

function ContactForm() {
  const { values, handleChange, handleSubmit } = useForm({
    name: '',
    email: '',
    message: ''
  }, (formData) => {
    console.log('提交表单:', formData);
    // 处理表单提交逻辑
  });

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={values.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Message:</label>
        <textarea
          name="message"
          value={values.message}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

6.2 数据获取和缓存

jsx 复制代码 
import { useState, useEffect } from 'react';

// 简单的数据缓存实现
const cache = new Map();

function useCachedData(key, fetcher) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 检查缓存
    if (cache.has(key)) {
      setData(cache.get(key));
      setLoading(false);
      return;
    }

    const fetchData = async () => {
      try {
        setLoading(true);
        const result = await fetcher();
        cache.set(key, result);
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [key, fetcher]);

  return { data, loading, error };
}

// 使用示例
function UserList() {
  const { data: users, loading, error } = useCachedData(
    'users',
    () => fetch('/api/users').then(res => res.json())
  );

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {users?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

6.3 动画和过渡效果

jsx 复制代码 
import { useState, useEffect, useRef } from 'react';

function useAnimation(initialValue, targetValue, duration = 300) {
  const [currentValue, setCurrentValue] = useState(initialValue);
  const startTimeRef = useRef(null);
  const animationRef = useRef(null);

  useEffect(() => {
    if (startTimeRef.current === null) {
      startTimeRef.current = performance.now();
    }

    const animate = (timestamp) => {
      if (!startTimeRef.current) startTimeRef.current = timestamp;
      
      const elapsed = timestamp - startTimeRef.current;
      const progress = Math.min(elapsed / duration, 1);
      
      // 简单的线性插值
      const newValue = initialValue + (targetValue - initialValue) * progress;
      setCurrentValue(newValue);

      if (progress < 1) {
        animationRef.current = requestAnimationFrame(animate);
      } else {
        startTimeRef.current = null;
      }
    };

    animationRef.current = requestAnimationFrame(animate);

    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
      }
    };
  }, [initialValue, targetValue, duration]);

  return currentValue;
}

function AnimatedCounter() {
  const [target, setTarget] = useState(0);
  const animatedValue = useAnimation(0, target, 1000);

  return (
    <div>
      <p>Animated Value: {Math.round(animatedValue)}</p>
      <button onClick={() => setTarget(target + 100)}>
        Increase Target
      </button>
    </div>
  );
}

7. 常见陷阱和解决方案

7.1 无限循环问题

jsx 复制代码 
// ❌ 错误：会导致无限循环
function BadComponent() {
  const [count, setCount] = useState(0);
  
  // 每次渲染都会创建新对象，导致 useEffect 无限执行
  const config = { theme: 'dark' };
  
  useEffect(() => {
    console.log('Effect executed');
    // 一些副作用操作
  }, [config]); // config 每次都是新对象
  
  return <div>{count}</div>;
}

// ✅ 正确：使用 useMemo 或提取到组件外
function GoodComponent() {
  const [count, setCount] = useState(0);
  
  // 使用 useMemo 缓存对象
  const config = useMemo(() => ({ theme: 'dark' }), []);
  
  useEffect(() => {
    console.log('Effect executed');
  }, [config]);
  
  return <div>{count}</div>;
}

7.2 闭包陷阱

jsx 复制代码 
// ❌ 错误：可能获取到过期的 state 值
function BadTimer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      // 这里的 count 可能是过期的值
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []); // 依赖数组为空，count 不会更新

  return <div>Count: {count}</div>;
}

// ✅ 正确：使用函数式更新
function GoodTimer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      // 使用函数式更新确保获取最新值
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>Count: {count}</div>;
}

7.3 条件渲染中的 Hook

jsx 复制代码 
// ❌ 错误：Hook 的调用顺序不一致
function BadComponent({ showDetails }) {
  const [count, setCount] = useState(0);
  
  if (showDetails) {
    // 条件下调用 Hook，可能导致顺序不一致
    const [details, setDetails] = useState(null);
    // ...
  }
  
  return <div>{count}</div>;
}

// ✅ 正确：始终调用所有 Hook
function GoodComponent({ showDetails }) {
  const [count, setCount] = useState(0);
  const [details, setDetails] = useState(null);
  
  useEffect(() => {
    if (showDetails) {
      // 在 effect 中处理条件逻辑
      fetchDetails().then(setDetails);
    }
  }, [showDetails]);
  
  return <div>{count}</div>;
}

8. 测试 Hooks

8.1 使用 React Testing Library

jsx 复制代码 
import { render, screen, fireEvent } from '@testing-library/react';
import { useState, useEffect } from 'react';

// 测试组件
function TestComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  
  return (
    <div>
      <span>Count: {count}</span>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

// 测试用例
test('increments count when button is clicked', () => {
  render(<TestComponent />);
  
  expect(screen.getByText('Count: 0')).toBeInTheDocument();
  
  fireEvent.click(screen.getByText('Increment'));
  
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

8.2 测试自定义 Hook

jsx 复制代码 
import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

// 自定义 Hook
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset = () => setCount(initialValue);
  
  return { count, increment, decrement, reset };
}

// 测试自定义 Hook
test('should increment counter', () => {
  const { result } = renderHook(() => useCounter());
  
  expect(result.current.count).toBe(0);
  
  act(() => {
    result.current.increment();
  });
  
  expect(result.current.count).toBe(1);
});

test('should decrement counter', () => {
  const { result } = renderHook(() => useCounter(5));
  
  act(() => {
    result.current.decrement();
  });
  
  expect(result.current.count).toBe(4);
});

test('should reset counter', () => {
  const { result } = renderHook(() => useCounter(5));
  
  act(() => {
    result.current.increment();
    result.current.increment();
    result.current.reset();
  });
  
  expect(result.current.count).toBe(5);
});

9. 与其他状态管理方案的集成

9.1 与 Redux 集成

jsx 复制代码 
import { useSelector, useDispatch } from 'react-redux';

function TodoList() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();
  
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
          <button onClick={() => dispatch({ type: 'DELETE_TODO', id: todo.id })}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

9.2 与 Context 集成

jsx 复制代码 
import { createContext, useContext, useReducer } from 'react';

const AppContext = createContext();

function AppProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
}

function useApp() {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useApp must be used within AppProvider');
  }
  return context;
}

function Component() {
  const { state, dispatch } = useApp();
  // 使用 state 和 dispatch
}

10. 总结

React Hooks 彻底改变了 React 的开发方式，提供了更简洁、更灵活的状态和副作用管理方案。通过掌握基础 Hooks 和自定义 Hooks 的创建，我们可以构建更加可维护和可复用的组件。

关键要点回顾：

  1. 基础 Hooks ：useState、useEffect、useContext 是最常用的 Hooks
  2. 高级 Hooks ：useReducer、useCallback、useMemo、useRef 提供更多功能
  3. 自定义 Hooks：是复用逻辑的最佳方式
  4. 遵循规则：只在顶层调用 Hooks，只在 React 函数中调用 Hooks
  5. 性能优化 ：合理使用 useCallback 和 useMemo
  6. 避免陷阱：注意闭包、无限循环等问题

随着 React 生态的不断发展，Hooks 已经成为现代 React 开发的标准，掌握它们对于任何 React 开发者来说都是至关重要的技能。

相关推荐
java水泥工6 小时前
基于Echarts+HTML5可视化数据大屏展示-车辆综合管控平台
前端·echarts·html5·大屏模版
aklry6 小时前
elpis之学习总结
前端·vue.js
笔尖的记忆6 小时前
【前端架构和框架】react中Scheduler调度原理
前端·面试
_advance6 小时前
我是怎么把 JavaScript 的 this 和箭头函数彻底搞明白的——个人学习心得
前端
右子6 小时前
React 编程的优雅艺术：从设计到实现
前端·react.js·mobx
清灵xmf7 小时前
npm install --legacy-peer-deps：它到底做了什么，什么时候该用？
前端·npm·node.js
超级大只老咪7 小时前
字段行居中（HTML基础语法）
前端·css·html
IT_陈寒7 小时前
Python开发者必看！10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只8 小时前
npm install sqlite3时报错解决
前端·npm·node.js
热门推荐
01两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答02UV安装并设置国内源03GitHub 镜像站点04智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践0546个Nano-banana 精选提示词，持续更新中06GitLab 零基础入门指南：从安装到项目管理全流程07Linux下V2Ray安装配置指南08一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示09jdk21下载、安装（Windows、Linux、macOS）10Cursor Plan Mode：AI 终于知道先想后做了