标题：把“状态”玩出花来——React Hooks 从入门到放飞

（友情提示：本文自带超长代码，建议备好咖啡和辣条，边看边撸，边撸边骂，边骂边懂。）

一、先别急着“Hook”，咱们聊聊那些年没有它的日子
如果你写过 2018 年之前的 React，一定体会过被 Class 组件支配的恐惧：

• this 指东指西，一会儿指向 window，一会儿指向 undefined， Debug 时恨不得给编辑器装个风水罗盘；
• 生命周期函数像过年串门的亲戚，componentDidMount、componentDidUpdate、componentWillUnmount 排着队来，逻辑却被拆得七零八落；
• 高阶组件（HOC）和 Render Props 层层嵌套，代码缩进越来越靠右，屏幕不够宽的同学只能横屏写代码，脖子先得了颈椎病。

于是，React 团队一拍大腿：「能不能让函数组件也能有状态？」——Hooks 就这样被“钓”了出来。

二、useState：状态界的“小霸王”
先上最开胃的小菜。函数组件想拥有状态？一句话：

// ① 最简计数器——看得懂算我输
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);   // 数组解构，左边是状态，右边是 Setter
  return (
    <div>
      <h2>当前计数：{count}</h2>
      {/* ② 直接传新值 */}
      <button onClick={() => setCount(count + 1)}>+1（普通版）</button>
      {/* ③ 函数式更新，适合“依赖旧状态”场景 */}
      <button onClick={() => setCount(c => c + 1)}>+1（函数版）</button>
      {/* ④ 批量合并：React 18 自动批处理，同一事件内多次 set 只会重渲染一次 */}
      <button
        onClick={() => {
          setCount(c => c + 1);
          setCount(c => c + 1);
          setCount(c => c + 1);
        }}
      >
        连加三次（只会渲染一次哦）
      </button>
    </div>
  );
}

上面四个按钮，分别演示了“基本用法”“函数式更新”“React 18 批量合并”。别小看这 30 行代码，面试时能把这仨区别说清楚，就已经领先 80% 候选人。

三、useEffect：生命周期“一锅炖”
Class 时代，挂载、更新、卸载要分别写到三个生命周期里；Hooks 时代，一个 useEffect 全包圆：

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

function FriendStatus({ friendId }) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    // ① 声明订阅函数
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    // ② 发起订阅
    ChatAPI.subscribe(friendId, handleStatusChange);

    // ③ 返回“清理函数”——等价于 componentWillUnmount
    return () => {
      ChatAPI.unsubscribe(friendId, handleStatusChange);
    };
  }, [friendId]); // ④ 依赖数组：friendId 变化才重新执行

  return <p>{isOnline ? '在线' : '离线'}</p>;
}

注意依赖数组这个“小妖精”：

• 不写 → 每次渲染都跑；
• 空数组 [] → 只跑第一次；
• 写具体依赖 → 依赖变才跑。

90% 的“无限循环” bug 都是依赖数组惹的祸，剩下 10% 是因为把对象直接塞进去，引用地址一变，Effect 疯狂重跑。

四、useLayoutEffect：同步版“大兄弟”
useEffect 是异步的，React 先画屏，再跑副作用；useLayoutEffect 是同步的，先跑副作用，再画屏。
适用场景：需要测量 DOM 然后立刻同步改动，避免用户看到“闪一下”。

import React, { useState, useLayoutEffect, useRef } from 'react';

function Tooltip() {
  const ref = useRef();
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    // ① 测量 DOM 高度
    const { height } = ref.current.getBoundingClientRect();
    // ② 立刻设置，避免用户看到错位
    setTooltipHeight(height);
  }, []);

  return (
    <div ref={ref} style={{ position: 'absolute', top: -tooltipHeight }}>
      我刚好出现在上方，不会遮挡内容
    </div>
  );
}

温馨提示：99% 场景 useEffect 就够，别没事把 useLayoutEffect 当“性能银弹”，它会阻塞浏览器绘制，用多了页面卡成 PPT。

五、useRef：不止“装数字”，还能“装任何”
很多人以为 useRef 只能拿来做“计数器秒变实例变量”，其实它能装任何可变盒子：

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

function Timer() {
  const countRef = useRef(0);      // ① 可变的“盒子”
  const idRef = useRef();          // ② 存定时器 ID

  useEffect(() => {
    idRef.current = setInterval(() => {
      countRef.current += 1;
      console.log('当前计数：', countRef.current);
    }, 1000);
    return () => clearInterval(idRef.current);
  }, []);

  return <button onClick={() => alert(`总计跑了 ${countRef.current} 秒`)}>报时</button>;
}

关键点：ref.current 改动不会触发重渲染，所以它特别适合“存定时器 ID”“存上一轮状态”“存 DOM 节点”这些“偷偷干活”的场景。

六、useMemo & useCallback：性能“双胞胎”，别乱点鸳鸯谱
这俩哥们长得不一样，但目标一致：缓存，避免重复计算 / 重复创建函数。

import React, { useState, useMemo, useCallback } from 'react';

function ExpensiveList({ list }) {
  // ① 昂贵计算：只有 list 变才重新 filter & sort
  const sortedList = useMemo(() => {
    return list
      .filter(item => item.active)
      .sort((a, b) => a.score - b.score);
  }, [list]);

  // ② 函数缓存：父组件重渲染时，不会新建句柄，子组件可浅比较优化
  const handleRemove = useCallback(id => {
    console.log('删除：', id);
  }, []);

  return (
    <ul>
      {sortedList.map(item => (
        <Row key={item.id} data={item} onRemove={handleRemove} />
      ))}
    </ul>
  );
}

误区警示：

• “小组件”别急着上 useMemo/useCallback，缓存本身也有开销；
• 依赖数组一定写全，漏写就是旧闭包，bug 藏得比前任还深。

七、useReducer：当状态逻辑“长成蜘蛛网”
useState 写多了，setXxx 满屏飞，业务一复杂就崩盘。useReducer 把“状态”和“动作”拆开，像 Redux 一样写：

import React, { useReducer } from 'react';

// ① 初始化状态
const initialState = { count: 0, step: 1 };

// ② 纯函数 reducer
function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step };
    case 'decrement':
      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload };
    default:
      throw new Error('Unknown action type');
  }
}

function CounterWithReducer() {
  const [state, dispatch] = useReducer(counterReducer, initialState);

  return (
    <div>
      <h2>当前：{state.count}  步长：{state.step}</h2>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <input
        type="number"
        value={state.step}
        onChange={e => dispatch({ type: 'setStep', payload: Number(e.target.value) })}
      />
    </div>
  );
}

看到 dispatch 有没有一种“Redux 附体”的爽感？组件内部逻辑太重，就用 useReducer 大刀阔斧地拆，比 useState 的“函数式更新”可读性高到不知哪里去了。

八、自定义 Hook：把逻辑“打包外卖”，哪里需要哪里搬
官方规定：函数名以 “use” 开头，内部可以调用其他 Hook，就是自定义 Hook。

// ① 封装“监听窗口尺寸”
import { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });

  useEffect(() => {
    const handler = () =>
      setSize({ width: window.innerWidth, height: window.innerHeight });
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  return size;
}

// ② 任意组件直接“吃外卖”
function Banner() {
  const { width } = useWindowSize();
  return <div>当前窗口宽度：{width}</div>;
}

自定义 Hook 本质上是“逻辑 + 状态”的复用，不写 JSX，不写 UI，只关心数据。写得好，项目里到处都能 import { useXXX } from '@/hooks'，比复制粘贴香多了。

九、useContext：跨组件“传八卦”，但别传成“谣言”
Props Drilling 层层传递想死？Context 来救命。

import React, { createContext, useContext, useState } from 'react';

// ① 创建 Context
const ThemeContext = createContext();

// ② 顶层 Provider
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// ③ 叶子组件消费
function Toolbar() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      style={{
        background: theme === 'light' ? '#fff' : '#222',
        color: theme === 'light' ? '#222' : '#fff',
      }}
    >
      切换主题
    </button>
  );
}

// ④ 根组件包一下 Provider
function App() {
  return (
    <ThemeProvider>
      <Toolbar />
    </ThemeProvider>
  );
}

Context 好用，但别滥用：

• 频繁变化的状态（如每秒更新的计时器）放进 Context 会导致大面积重渲染；
• 解决方案：拆成多个粒度更小的 Context，或者配合 useMemo/useCallback 做“稳定引用”。

十、useImperativeHandle + forwardRef：父组件“遥控”子组件
React 推崇“数据驱动”，但总有时候父组件就想“粗鲁”地调子组件方法，比如“聚焦输入框”。

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  // ① 暴露给父组件的“手柄”
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    scrollIntoView: () => {
      inputRef.current.scrollIntoView();
    },
  }));

  return <input ref={inputRef} placeholder="我可以被父组件遥控" />;
});

function Parent() {
  const fancyRef = useRef();

  return (
    <div>
      <FancyInput ref={fancyRef} />
      <button onClick={() => fancyRef.current.focus()}>聚焦</button>
      <button onClick={() => fancyRef.current.scrollIntoView()}>滚到可视区</button>
    </div>
  );
}

注意：useImperativeHandle 与 forwardRef 是“连体婴”，缺一个都跑不了。

十一、useDebugValue：为自定义 Hook 写“签名”，调试更友好
React DevTools 默认只显示 Hook 状态，如果自定义 Hook 返回复杂对象，调试时一脸懵逼。useDebugValue 可以在 DevTools 里显示自定义标签：

function useFriendStatus(friendId) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handler(status) { setIsOnline(status.isOnline); }
    ChatAPI.subscribe(friendId, handler);
    return () => ChatAPI.unsubscribe(friendId, handler);
  }, [friendId]);

  // ① 在 DevTools 看到 “FriendStatus: online” 而不是 “{}”
  useDebugValue(isOnline ? 'online' : 'offline');

  return isOnline;
}

十二、实战：一个“可编辑表格”把 Hooks 串成串
光讲概念不过瘾，来份硬菜——带校验、带撤销、带乐观更新的表格，全程 Hooks：

import React, {
  useState, useEffect, useRef, useCallback, useMemo, useReducer
} from 'react';

// ① 初始数据
const initialRows = [
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 20 },
];

// ② 表格行 reducer
function rowReducer(state, action) {
  switch (action.type) {
    case 'field_change':
      return state.map(r =>
        r.id === action.id ? { ...r, [action.field]: action.value } : r
      );
    case 'add_row':
      return [...state, { id: Date.now(), name: '', age: '' }];
    case 'delete_row':
      return state.filter(r => r.id !== action.id);
    case 'reset':
      return initialRows;
    default:
      return state;
  }
}

function EditableTable() {
  const [rows, dispatch] = useReducer(rowReducer, initialRows);
  const [errors, setErrors] = useState({});
  const prevRowsRef = useRef();

  // ③ 校验逻辑：age 必须是数字
  useEffect(() => {
    const newErrors = {};
    rows.forEach(r => {
      if (isNaN(Number(r.age))) newErrors[r.id] = '年龄必须是数字';
    });
    setErrors(newErrors);
  }, [rows]);

  // ④ 撤销功能：深拷贝存一份旧数据
  const handleUndo = () => {
    if (prevRowsRef.current) {
      dispatch({ type: 'reset' });
      setErrors({});
    }
  };

  useEffect(() => {
    prevRowsRef.current = JSON.parse(JSON.stringify(rows));
  }, [rows]);

  // ⑤ 乐观更新：模拟保存到后端
  const handleSave = useCallback(async () => {
    if (Object.keys(errors).length) return alert('请修正错误');
    await fetch('/api/save', { method: 'POST', body: JSON.stringify(rows) });
    alert('保存成功（假装网络 OK）');
  }, [rows, errors]);

  // ⑥ 行渲染用 useMemo 缓存，避免无关重渲染
  const rowList = useMemo(() => {
    return rows.map(row => (
      <tr key={row.id}>
        <td>
          <input
            value={row.name}
            onChange={e =>
              dispatch({ type: 'field_change', id: row.id, field: 'name', value: e.target.value })
            }
          />
        </td>
        <td>
          <input
            value={row.age}
            onChange={e =>
              dispatch({ type: 'field_change', id: row.id, field: 'age', value: e.target.value })
            }
          />
          {errors[row.id] && <span style={{ color: 'red' }}>{errors[row.id]}</span>}
        </td>
        <td>
          <button onClick={() => dispatch({ type: 'delete_row', id: row.id })}>删除</button>
        </td>
      </tr>
    ));
  }, [rows, errors]);

  return (
    <div>
      <button onClick={() => dispatch({ type: 'add_row' })}>新增行</button>
      <button onClick={handleUndo}>撤销</button>
      <button onClick={handleSave}>保存</button>
      <table border="1" cellPadding={6}>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>{rowList}</tbody>
      </table>
    </div>
  );
}

这份代码一口气把 useReducer、useState、useRef、useEffect、useCallback、useMemo 全招呼上，还顺手演示了“乐观更新”“校验”“撤销”三大常见业务。读懂它，你就拥有了“Hooks 全家桶”的入场券。

十三、踩坑锦集：那些年我们一起追过的“奇怪问题”

1. 闭包老值：

function Demo() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); // 永远是 0
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 依赖空数组，count 被闭包缓存
}

解决：要么把 count 加入依赖，要么用 setCount(c => c + 1) 函数式更新。

2. 无限循环：

const [filters, setFilters] = useState({});
useEffect(() => {
  fetchData(filters);
}, [filters]); // filters 是对象，每次渲染引用不同

解决：用深比较或把 filters 序列化成字符串依赖。

3. 死循环加 StrictMode：
   React 18 StrictMode 会故意“挂载→卸载→再挂载”一次，Effect 清理不干净就会导致定时器重复创建。
   解决：清理函数写全，别偷懒。

十四、性能锦囊：Hooks 也有“黄金右脚”

• 用 React.memo 包函数组件，配合 useCallback/useMemo 稳定引用；
• 列表项加 key，不要用数组下标；
• 大数据列表用虚拟滚动（react-window、react-virtualized）；
• 昂贵计算放 Web Worker，或者 useMemo 做“脏检查”；
• 生产环境记得开 React DevTools Profiler，先量化再优化，别“拍脑袋”。

十五、尾声：Hook 之后，再无“ lifecycle ”
从 Class 到 Hooks，React 把“生命周期”这个概念彻底拍平，变成了“数据→UI”的纯同步流程。函数组件 + Hooks 让代码像“写故事”一样线性流动，而不再是在各个生命周期里“跳房子”。

当然，Hooks 也不是银弹：规则限制、闭包陷阱、依赖数组心智负担……都需要时间去磨合。但当你习惯了“把逻辑拆成一个个小 Hook”，会发现代码复用率、可测试性、可读性都在蹭蹭上涨。

最后，送你一句“前端老炮儿”私藏格言：
“组件是骨架，Hook 是灵魂；骨架要轻，灵魂要野。”

祝你在未来的项目里，把状态玩出花，把副作用驯成狗，把自定义 Hook 写成诗。

（全文完，代码管饱，理论管够，去实践吧，少年！）

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

---

专栏系列（点击解锁）	学习路线(点击解锁）	知识定位
《微信小程序相关博客》	持续更新中~	结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》	持续更新中~	AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》	《前端基础入门三大核心之html相关博客》	前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
	《前端基础入门三大核心之JS相关博客》	前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
	《前端基础入门三大核心之CSS相关博客》	介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
	《canvas绘图相关博客》	Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》	持续更新中~	详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》	持续更新中~	Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》	持续更新中~	SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》	持续更新中~	算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》	持续更新中~	作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
	《信息化人员基础技能知识相关博客》	无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
	《信息化技能面试宝典相关博客》	涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》	持续更新中~	罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》	持续更新中~	基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》	持续更新中~	分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！