React Hooks：useState 与 useEffect 实战

在 React 开发中，Hooks 是管理状态和副作用的强大工具。useState 用于声明组件状态，useEffect 用于处理副作用（如数据获取、订阅或 DOM 操作）。下面我将逐步解释如何实战应用它们，结合代码示例和最佳实践，确保内容清晰可靠。

1. useState 实战

useState 允许你在函数组件中添加状态变量。它返回一个数组：当前状态值和一个更新状态的函数。

• 基本用法：声明一个状态变量，并在组件中更新它。
• 示例：实现一个简单计数器组件。

import React, { useState } from 'react';

function Counter() {
  // 声明状态变量 count，初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
}

• 解释：
  • const [count, setCount] = useState(0);：初始化状态 count 为 0，setCount 用于更新值。
  • 点击按钮时，调用 setCount 修改状态，触发组件重新渲染。
• 实战技巧：
  • 状态更新是异步的；多次更新应使用函数式更新，例如 setCount(prevCount => prevCount + 1)。
  • 状态变量可以是任意类型（数字、字符串、对象或数组）。

2. useEffect 实战

useEffect 用于执行副作用操作，在组件渲染后运行。它接受一个函数和一个依赖数组。

• 基本用法：处理数据获取、事件订阅或清理资源。
• 示例：在组件挂载时获取 API 数据，并在卸载时清理。

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟 API 调用
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('获取数据失败:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // 清理函数：取消订阅或资源释放
    return () => {
      console.log('组件卸载，清理操作');
    };
  }, []); // 空依赖数组表示仅在组件挂载时运行一次

  if (loading) return <p>加载中...</p>;
  return <div>{data ? <p>数据: {JSON.stringify(data)}</p> : <p>无数据</p>}</div>;
}

• 解释：
  • useEffect 的第一个参数是副作用函数，第二个参数是依赖数组。
  • 依赖数组为空 [] 时，effect 仅在组件挂载和卸载时运行。
  • 返回的清理函数在组件卸载时执行，用于避免内存泄漏。
• 实战技巧：
  • 依赖数组控制 effect 的执行时机。例如，[userId] 表示当 userId 变化时重新运行。
  • 避免无限循环：确保依赖项正确，不要遗漏状态或 props。

3. 结合 useState 和 useEffect 实战

在实际项目中，两者常结合使用。例如，构建一个实时更新的用户列表。

• 示例：订阅外部事件并更新状态。

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

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 模拟 WebSocket 订阅
    const socket = new WebSocket('wss://api.example.com/users');
    socket.onmessage = (event) => {
      const newUser = JSON.parse(event.data);
      setUsers(prevUsers => [...prevUsers, newUser]); // 使用函数式更新
    };

    // 清理函数：关闭 WebSocket
    return () => {
      socket.close();
    };
  }, []); // 依赖为空，仅在挂载时订阅

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

• 解释：
  • useState 管理用户列表状态。
  • useEffect 处理 WebSocket 订阅：组件挂载时建立连接，卸载时关闭。
  • 使用函数式更新 setUsers(prevUsers => [...prevUsers, newUser]) 确保状态正确合并。
• 常见问题解决：
  • 状态更新延迟：依赖数组优化，避免不必要的 effect 执行。
  • 内存泄漏：总是提供清理函数。

4. 最佳实践总结

• useState：
  • 初始化状态时，使用默认值（如 useState(0)）。
  • 复杂状态用对象或数组，但避免深层嵌套。
• useEffect：
  • 将副作用逻辑封装在 effect 内，保持组件纯净。
  • 依赖数组必须包含所有外部变量（props 或状态），否则可能导致陈旧闭包。
• 性能优化：
  • 使用 React.memo 避免不必要的重新渲染。
  • 在 effect 中，异步操作添加取消机制（如 AbortController）。

通过实战，useState 和 useEffect 能高效管理组件逻辑，提升代码可维护性。多练习小项目（如计时器或数据仪表盘）来巩固技能！