React 中的 Hooks 到底藏了多少魔法？别只会用 useState 了！-CSDN博客

本文链接：https://blog.csdn.net/2401_86373285/article/details/147979596

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

什么是 Hooks？

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

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

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

为什么 Hooks 值得深入学习？

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

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

Hook	作用	类比 Vue
useState	状态管理	ref / reactive
useEffect	副作用处理	onMounted / watch
useMemo	计算属性	computed
useCallback	缓存函数	无（性能优化）
useContext	跨层通信	provide / inject
useRef	DOM / 可变数据引用	ref（DOM）
自定义 Hook	封装复用逻辑	组合式函数

一、`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>;
}