017. React 初始化 Hook 与 ESLint 规则

学习目标

这一节回到前端项目，补充组件初始化时常用的 Hook 封装。

学完后，你应该能理解：

• 为什么项目会封装 useMount；
• useBeforeMount 想解决什么问题；
• React 里为什么常用 useEffect 做初始化；
• 为什么初始化查询通常只希望执行一次；
• ESLint 对 Hook 依赖的提示是什么意思；
• 什么时候要按规则补依赖，什么时候要明确表达“只执行一次”。

组件挂载时做初始化

很多页面打开时都要先做一次初始化。

常见动作包括：

• 查询列表数据；
• 读取详情；
• 拉取字典；
• 初始化表单；
• 加载当前用户信息；
• 请求页面配置。

在 React 里，这类动作通常会写在 useEffect 里。

例如：

useEffect(() => {
  queryData();
}, []);

空数组表示只在组件挂载后执行一次。

为什么封装 useMount

项目会封装类似 useMount 的工具函数，把“组件挂载后执行一次”这个模式固定下来。

这样写业务页面时，不需要每次都手动写完整的 useEffect。

可以理解成：

useMount(() => {
  queryData();
});

它的目标不是发明新语法，而是减少重复代码，让初始化动作更清晰。

如果你写过 Vue，可以把它类比成 onMounted。React 本身没有完全同名的 API，所以项目里自己封装一个更顺手的写法。

useBeforeMount 的意义

项目还会准备 useBeforeMount。

这个名字更接近 Vue 的生命周期表达，方便把“挂载前”和“挂载后”的初始化概念分开。

React 函数组件没有和 Vue 完全一一对应的生命周期。这里更重要的是理解项目封装的意图：

• 哪些逻辑要在首次渲染前准备；
• 哪些逻辑要在挂载后请求；
• 哪些逻辑不应该每次重新渲染都执行。

不要只背 Hook 名字，要看它在项目里的实际实现。

初始化查询只执行一次

页面初次进入时，通常只希望查询一次。

如果依赖项写错，可能出现：

• 每次渲染都重新请求；
• 查询函数变化导致重复请求；
• 状态更新触发循环；
• 页面刚打开就请求多次。

所以课程里强调：如果目标是组件挂载时查一次，依赖数组就要表达这个意图。

ESLint 的 Hook 依赖提示

React 的 ESLint 规则会检查 useEffect 依赖。

当你在 useEffect 里使用了外部变量或函数，它可能提示你把这些变量加入依赖数组。

这个提示的目的，是避免闭包里读到旧值。

但有些初始化逻辑确实只想执行一次。如果把函数加入依赖数组，反而可能不符合业务意图。

这时要理解规则，而不是机械点击自动修复。

处理规则和业务意图的冲突

面对 Hook 依赖提示时，可以按这个顺序判断：

1. 这个 effect 是否真的依赖某个变化值；
2. 如果值变化，是否应该重新执行；
3. 如果不应该重新执行，是否可以把逻辑抽成稳定函数；
4. 是否需要用项目封装的 useMount 表达“只执行一次”；
5. 是否需要局部禁用某条 ESLint 规则。

重点是让代码意图清楚。

如果页面初始化只需要执行一次，就不要为了消除黄色提示，把它改成会反复执行的逻辑。

临时变量和 ESLint 提示

开发过程中会经常先声明变量，再逐步补代码。

例如先写：

const page = 1;

但暂时还没用到它。

ESLint 可能提示未使用变量。课程里会根据开发体验调整部分规则，避免写代码过程中被大量临时提示干扰。

不过这不代表可以长期保留无用变量。最终提交前，仍然要让代码保持干净。

这一节的重点

这节并不是要记住某个 Hook 的固定写法，而是建立 React 初始化逻辑的判断方式。

你需要分清：

• 初始化动作什么时候执行；
• 是否只执行一次；
• 依赖变化是否应该重新触发；
• ESLint 提示是在保护你，还是和当前意图冲突；
• 项目封装如何让业务代码更清晰。

后面做通用表格、查询表单和页面初始化时，这些 Hook 会频繁用到。