当你刚入门 React，写了一堆 class 组件，还在 constructor 里 this.state = {...}，还在各种生命周期方法之间来回切换，突然发现身边的小伙伴都在说：

“Hooks 太香了！再也不写 Class 了！”

这时候你可能一脸懵：Hooks 到底是啥？为啥大家都在用？

今天这篇文章，就带你一口气看懂 React Hooks。

什么是 Hooks？

Hooks 是 React 16.8 引入的新特性，让你在 函数组件 中使用 state 和生命周期功能。

一句话：Hooks = React 给函数组件开的小灶。

它的好处：

不用写 class，函数式更轻量；
逻辑更清晰，代码更简洁；
复用状态逻辑更优雅。

常用 Hooks 全家桶

useState —— 给函数组件加上“记忆”

jsx

import { useState } from "react";

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

  return (
    <div>
      <p>点击次数: {count}</p>
      <button onClick={() => setCount(count + 1)}>点我</button>
    </div>
  );
}

理解方式：useState = “拿一个盒子存数据”，盒子里东西变了，界面就会更新。

useEffect —— 副作用管理大师

“副作用”指的是除了渲染之外的操作，比如：请求数据、操作 DOM、监听事件等。

jsx

import { useState, useEffect } from "react";

function User() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/api/user/1")
      .then(res => res.json())
      .then(data => setUser(data));
  }, []); // [] 表示只在首次渲染时运行

  return <div>{user ? user.name : "加载中..."}</div>;
}

⚠️ 小技巧：

不写依赖数组 [] → 每次渲染都会执行
写 [] → 只执行一次（挂载时）
写 [变量] → 当变量变化时才执行

useContext —— 跨层级传值神器

避免“props 一层层传递”的尴尬。

jsx

const ThemeContext = React.createContext("light");

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

function Toolbar() {
  const theme = React.useContext(ThemeContext);
  return <p>当前主题: {theme}</p>;
}

useRef —— 获取 DOM 或保存一个不会变的值

jsx

function InputFocus() {
  const inputRef = React.useRef(null);

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>聚焦</button>
    </div>
  );
}

除了 DOM，useRef 还常用来存储不会触发刷新但需要记住的值。

useMemo —— 缓存计算结果

防止每次渲染都做重复计算。

jsx

function Expensive({ num }) {
  const result = React.useMemo(() => {
    console.log("计算中...");
    return num * 2;
  }, [num]);

  return <p>{result}</p>;
}

useCallback —— 缓存函数

配合子组件避免不必要的重复渲染。

jsx

const Child = React.memo(({ onClick }) => {
  console.log("子组件渲染");
  return <button onClick={onClick}>点我</button>;
});

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

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

  return (
    <>
      <p>{count}</p>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

自定义 Hook —— 逻辑复用神器

当你发现多个组件里有相同的逻辑，可以抽出来写成 自定义 Hook。

jsx

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return width;
}

function MyComponent() {
  const width = useWindowWidth();
  return <p>窗口宽度: {width}px</p>;
}

Hooks 的使用规则

React 官方给了两条铁律：

只在函数最外层调用 Hooks，不要放在循环、条件语句里。
只在函数组件或自定义 Hook 中调用 Hooks。

👉 为什么？因为 React 要保证调用顺序一致，否则会“晕”。

总结

Hooks 的核心目标就是：让函数组件更强大，更好写。

useState 管状态
useEffect 管副作用
useContext 管跨层传值
useRef 管 DOM 和持久值
useMemo / useCallback 管性能优化
自定义 Hook 管逻辑复用

掌握这些，你就能告别 class 组件，写出又简洁又优雅的 React 应用。

React 进阶：Hooks 全解

评论区 0