前言

React Hooks 是 React 16.8 引入的特性，它让我们可以在函数组件中使用状态和其他 React 特性。最近重新系统地学习了一遍，写下这篇笔记加深理解。

useState 的深入理解

基本用法

const [state, setState] = useState(initialValue);

看似简单，但有几个容易踩坑的地方：

1. 状态更新是异步的

// ❌ 错误：这样拿不到最新值
setCount(count + 1);
console.log(count); // 还是旧值！

// ✅ 正确：使用函数式更新
setCount(prev => prev + 1);

2. 对象状态的更新

// ❌ 错误：直接修改对象不会触发重渲染
user.name = '新名字';
setUser(user);

// ✅ 正确：创建新对象
setUser({ ...user, name: '新名字' });

useEffect 的使用场景

useEffect 可以看作是 componentDidMount、componentDidUpdate 和 componentWillUnmount 的结合体。

清理副作用

useEffect(() => {
  const timer = setInterval(() => {
    console.log('tick');
  }, 1000);

  // 清理函数
  return () => clearInterval(timer);
}, []);

依赖数组的注意事项

• 空数组 []：只在挂载时执行一次
• 有依赖：依赖变化时重新执行
• 不传依赖数组：每次渲染都执行（很少用）

总结

React Hooks 让代码更加简洁和可复用，但也需要理解其运行机制才能写出正确的代码。关键点：

1. 状态更新是异步的，用函数式更新获取最新值
2. 不要直接修改状态对象
3. 记得在 useEffect 中清理副作用
4. 正确设置依赖数组，避免死循环

继续加油学习！💪