🤯 你还在用 useState 做“超级按钮”？那你可能只学了 Hooks 的皮毛。本篇文章将带你 深度解析 React 中 Hooks 的核心机制与使用场景，不仅能让你写出结构清晰、逻辑分明的函数组件，还能写出「像 Vue 那样优雅」的代码。

🪄 什么是 Hooks？

React Hooks 是 React 16.8 引入的新特性，它让函数组件也能拥有类组件的状态管理与生命周期能力。简单来说：

👉「用更少的代码，实现更多的组件逻辑复用」

而不是像以前那样写 class extends React.Component。

⚙️ 为什么 Hooks 值得深入学习？

• ✅ 更清晰的状态逻辑组织（可组合）
• ✅ 没有 this 的困扰
• ✅ 更适合 TS 推导与重用
• ✅ 和 Vue3 的组合式 API 异曲同工，适合 Vue 老手迁移

🧩 常用 Hooks 一览表（入门必备）

🎯 一、useState：数据驱动视图的起点

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

与 Vue 的 ref 类似，useState 是最基本的响应式 API：

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

🔍 小贴士：

• 不能直接修改：不能写 count++
• 多个 state 独立分开，不像 Vue 是一个大对象

🌀 二、useEffect：生命周期掌控者

模拟 mounted

useEffect(() => {
  console.log("组件已挂载");
}, []);

模拟 watch

useEffect(() => {
  console.log("count 变了", count);
}, [count]);

模拟 unmounted

useEffect(() => {
  const timer = setInterval(() => console.log("tick"), 1000);
  return () => clearInterval(timer); // 组件销毁时执行
}, []);

🧠 三、useMemo & useCallback：计算与缓存

useMemo：计算属性，只有依赖变了才重新计算

const double = useMemo(() => count * 2, [count]);

useCallback：缓存函数引用，防止子组件不必要的渲染

const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

⚠️ 如果你传一个函数给子组件，那一定要考虑 useCallback！

🔍 四、useRef：访问 DOM & 保存跨 render 的变量

1. 访问 DOM 元素

const inputRef = useRef();
<input ref={inputRef} />

2. 保存可变变量（不会引发渲染）

const count = useRef(0);
count.current++; // 不会引发组件重新渲染

🌍 五、useContext：组件跨层通信，避免“层层 props 传递”

const ThemeContext = createContext('light');

// 父组件
<ThemeContext.Provider value="dark">
  <Child />
</ThemeContext.Provider>

// 子组件
const theme = useContext(ThemeContext);

🔁 六、自定义 Hook：逻辑复用神器

你是否在多个组件中写了重复的“监听滚动”逻辑？抽出去！

function useScroll() {
  const [y, setY] = useState(0);
  useEffect(() => {
    const onScroll = () => setY(window.scrollY);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return y;
}

// 使用
const scrollY = useScroll();

🧪 七、实战：倒计时组件

function useCountdown(seconds) {
  const [timeLeft, setTimeLeft] = useState(seconds);
  useEffect(() => {
    if (timeLeft <= 0) return;
    const timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1000);
    return () => clearTimeout(timer);
  }, [timeLeft]);
  return timeLeft;
}

function Countdown() {
  const timeLeft = useCountdown(10);
  return <h1>{timeLeft} 秒</h1>;
}

🔚 写在最后：Hooks 就是组合式 Vue！

如果你已经精通 Vue 的组合式 API，那么可以把 React 的 Hooks 理解为：

🎁 Bonus：推荐 Hook 类库

• 🧬 react-use：超多实用 Hooks
• 🧠 Zustand：轻量级状态管理，完全基于 Hooks
• 🪝 ahooks（by 阿里）：类 Vue 的组合式 Hook 工具集

📌 总结

React Hooks 是函数组件的灵魂，它不只是 useState，更是一套完整的 逻辑组合和管理体系。掌握 Hooks，让你的 React 项目：

• 更简洁
• 更高复用性
• 更可控

如果这篇文章帮到了你，记得点赞 + 收藏 ✨
下一篇我会讲讲：“React 中如何优雅地管理全局状态”，感兴趣记得关注！