React Hooks 实战：useState 与 useEffect 使用规范

一、useState 使用规范：不可变性与快照更新机制

在 React 函数组件内部，状态并不是一个随时保持同步可变的全局变量，而是每次渲染（Render）时所拍下的“数据快照”。当组件执行时，它获取到的是当前渲染周期中的 state 常量。理解这一本质，是掌握以下三条核心规范的基础。

1. 依赖先前状态时，必须使用函数式更新

当状态变更依赖于前一个状态的值时，直接传递新值往往会导致逻辑缺陷。例如在异步回调、定时器或高频点击事件中，组件闭包内捕获的 count 变量依然是旧快照。若直接执行 setCount(count + 1)，无论触发多少次，其入参在当前快照中都是相同数值。

规范做法：采用更新器函数（Updater Function）形式，由 React 内部调度时将当前最新状态传入回调：

// 错误范式：闭包读取固定快照，连续调用发生状态丢失
const handleIncrementBuggy = () => {
  setCount(count + 1);
  setCount(count + 1); // 依然基于旧 count，最终只增 1
};

// 规范范式：传入纯函数，保证队列串行求值
const handleIncrementCorrect = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1); // 最终准确增加 2
};

2. 复合对象与数组必须生成全新引用副本

React 判断组件是否需要重新渲染，采用的是浅层引用比较（Object.is）。如果直接修改对象内部属性或直接对数组调用 push、splice 等变异方法，对象在内存中的引用地址保持不变，React 会判定状态未发生更替，进而跳过视图更新。

// 错误做法：原地修改（In-place mutation）
const handleUpdateUser = () => {
  user.name = "Alex"; // 内存引用未变
  setUser(user);      // 导致组件无法重新渲染
};

// 规范做法：浅拷贝生成新对象
const handleUpdateUserCorrect = () => {
  setUser(prev => ({
    ...prev,
    name: "Alex"
  }));
};

// 数组增加项规范做法
const handleAddItem = (newItem) => {
  setList(prevList => [...prevList, newItem]);
};

3. 高开销初始化计算使用惰性初始状态（Lazy Initial State）

若初始状态需要通过复杂计算或读取 localStorage 获得，直接在 useState 中调用该计算表达式会导致每次组件重新渲染时都重复运行该耗时逻辑，即使其返回值仅在初次挂载时被采纳。

// 避免：每次渲染都会执行 JSON.parse 与 storage 读取
const [filters, setFilters] = useState(
  JSON.parse(window.localStorage.getItem("app_filters") || "{}")
);

// 规范：传入初始化函数，仅在挂载时运行一次
const [filters, setFilters] = useState(() => {
  try {
    const saved = window.localStorage.getItem("app_filters");
    return saved ? JSON.parse(saved) : {};
  } catch {
    return {};
  }
});

二、useEffect 使用规范：将副作用视为状态同步

很多从类组件过渡而来的开发者容易将 useEffect 简单等同于 componentDidMount、componentDidUpdate 和 componentWillUnmount 的集合体。这种心智模型是导致 Effect 逻辑臃肿与时序 Bug 的主要根源。useEffect 的真正使命是：使组件与外部系统（DOM 节点、网络请求、定时器、第三方通信库）保持数据状态的同步。

1. 依赖项数组必须“如实声明”全部响应式值

在 useEffect 回调函数内部访问到的所有属于组件作用域的响应式变量（包括 props、state 以及由此衍生的计算函数与变量），都必须完整列入依赖项数组中。严禁为了抑制 ESLint 报出的 react-hooks/exhaustive-deps 警告而手动删除依赖或加入 eslint-disable。

2. 建立对称的资源清理函数（Cleanup）

凡是在 Effect 中启动了具有持续生命期的外部资源（例如事件监听器、定时器、WebSocket 连接或未决的 HTTP 请求），必须在 Effect 回调中返回一个清理函数。React 会在组件卸载时，以及在每次依赖变更重新运行下一次 Effect 之前，执行上一次的清理函数。

import { useState, useEffect } from "react";

function WindowResizeTracker() {
  const [windowWidth, setWindowWidth] = useState(() => window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    // 1. 建立外部连接
    window.addEventListener("resize", handleResize);

    // 2. 返回清理函数：卸载与下一次重新执行前均会调用
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []); // 空数组表明监听器生命期绑定组件挂载与卸载

  return <p>当前窗口宽度：{windowWidth}px</p>;
}

三、依赖治理与网络请求竞态防御

在数据拉取与动态查询场景下，useEffect 最容易遭遇由于异步时序不确定性带来的竞态条件（Race Condition）。即用户先后切换了标签 A 与标签 B，由于网络延迟差异，A 的响应后于 B 返回，导致界面最终错误地渲染了已被废弃的 A 数据。

1. 使用局部标志位防御竞态

通过在 Effect 回调内部维护一个局部的布尔变量 ignore，并在清理函数中将其置为 true，可以确保只有最新发起的请求结果才会被应用到状态中：

import { useState, useEffect } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    let ignore = false;
    setIsLoading(true);

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        // 若依赖已变更或组件已卸载，清理函数已将 ignore 设为 true
        if (!ignore) {
          setUser(data);
          setIsLoading(false);
        }
      })
      .catch(err => {
        if (!ignore) {
          setIsLoading(false);
        }
      });

    return () => {
      // 当 userId 切换时，立即将旧请求标记为作废
      ignore = true;
    };
  }, [userId]); // 诚实声明 userId 依赖

  if (isLoading) return <div>加载中...</div>;
  if (!user) return <div>暂无用户数据</div>;

  return <div>用户名称：{user.name}</div>;
}

2. 使用 AbortController 中断未决请求

除了标记忽略外，标准 Fetch API 提供了 AbortController，可以在组件卸载或参数重置时主动切断底层 TCP 连接，避免带宽浪费与内存无谓占用：

useEffect(() => {
  const controller = new AbortController();

  fetch(`/api/items?query=${query}`, { signal: controller.signal })
    .then(res => res.json())
    .then(data => setItems(data))
    .catch(err => {
      if (err.name !== "AbortError") {
        // 排除主动取消引发的异常，记录真实业务报错
        console.error("请求失败：", err);
      }
    });

  return () => {
    controller.abort(); // 触发原生网络中断
  };
}, [query]);

四、避坑指南：不可违背的工程原则

在日常开发与 Code Review 中，开发者应当严守以下规范防线，避免将代码引入难以调试的死循环或性能瓶颈：

• 不要把衍生状态存入 State：如果一个数值可以通过 props 或已有 state 经由纯计算直接推导出来（例如购物车总价、过滤后数组列表），应当在渲染函数中直接计算，而不要声明独立的 useState 并通过 useEffect 去同步更新它。多余的同步 Effect 会导致二次重渲染，并引入状态不一致的中间状态。
• 不要用 Effect 监听用户交互事件：如果某段逻辑本质上是因用户点击了“购买”按钮而触发的，应当直接把网络请求与提示逻辑写在 handleBuyClick 事件处理器中，而不是修改一个 isSubmitted 状态后让 Effect 捕获触发。
• 保持对象依赖引用稳定：不要在组件渲染体内每次都声明无记忆的字面量对象（如 options = { id, token }）并将其作为 Effect 的依赖，这会导致每次渲染产生的对象引用不同，使 Effect 毫无意义地高频重复运行。可将对象属性拆散为原始类型，或将其移入 Effect 体内。
• 严格遵守 Hooks 两大基本调用约束：只在最顶层调用 Hooks，严禁在条件语句（if）、循环语句（for）或嵌套函数中调用；只在 React 函数组件或自定义 Hook 中调用。

五、规范总结

掌握 useState 与 useEffect 的关键在于转变编程心智：从类组件中命令式的“何时触发什么事件”，转变为声明式的“当前状态下视图与外部环境应该呈现何种形态”。对于 useState，牢记不可变引用与函数式更新；对于 useEffect，牢记外部同步定位、诚实声明依赖与配对销毁清理。以规范为准绳，代码不仅能够彻底远离闭包陷阱与数据竞态，更能保持长久的清晰性与可维护性。