ahooks首次渲染不执行问题解析

Question

在使用 ahooks 时，部分开发者反馈 `useRequest` 或 `useEffect` 相关 Hook 在组件首次渲染时未按预期执行请求或副作用。常见原因是依赖项数组配置不当或 `ready` 条件未满足，例如 `useRequest` 中设置了 `ready: false`，导致首次渲染被跳过。此外，异步函数注入时机错误或依赖引用变化不敏感也会引发该问题。如何正确配置触发条件和依赖项，成为确保首次渲染执行的关键。

Answer 1

深入解析 ahooks 中 useRequest 与 useEffect 首次渲染失效问题

1. 常见现象与问题定位

在使用 ahooks 的 useRequest 或 React 原生的 useEffect 时，部分开发者反馈组件首次渲染未触发预期请求或副作用。典型表现为：

• useEffect 的回调函数未在挂载时执行；
• useRequest 设置了 ready: false，导致自动请求被跳过；
• 依赖项为对象或函数，引用未变化，导致依赖比较失败；
• 异步服务函数（如 API 调用）在 Hook 注入时已被缓存，后续更新未生效。

2. 根本原因分析

从 React 渲染机制和 ahooks 内部实现角度出发，可归纳为以下四类核心问题：

问题类型	具体表现	影响范围
依赖项配置不当	useEffect 依赖数组遗漏变量或使用了非稳定引用	useEffect 不重新执行
ready 条件控制	useRequest 中 ready 设为 false，默认不触发	首次请求被阻断
函数注入时机错误	服务函数在父组件中动态生成但未 useMemo 包裹	useRequest 检测不到变化
引用敏感性缺失	传递的对象/函数每次渲染都新创建	依赖比较恒为“变化”或“不变”

3. 解决方案详解

针对上述问题，需结合 React 编程范式与 ahooks 特性进行精准配置：

3.1 正确配置 useRequest 的 ready 参数

当需要延迟请求时，ready 是一个布尔控制开关。若希望首次渲染即执行，应确保其初始值为 true，或通过状态控制动态激活：

const [ready, setReady] = useState(true);

const { data, loading } = useRequest(getUserInfo, {
  ready, // 控制是否立即执行
});
    

若业务逻辑要求条件加载（如表单提交后才查询），则合理设置 ready: false 并配合事件触发。

3.2 稳定化服务函数与依赖管理

避免因函数引用频繁变更导致 useRequest 无法正确感知依赖变化。推荐使用 useCallback 包裹异步服务函数：

const fetchUser = useCallback(async (id) => {
  return await getUserById(id);
}, [id]);

const { data } = useRequest(fetchUser, {
  defaultParams: [userId],
});
    

此方式确保函数引用稳定性，同时参数可通过 defaultParams 传入。

3.3 useEffect 的依赖项陷阱规避

常见错误写法：

useEffect(() => {
  fetchData();
}, [fetchData]); // 如果 fetchData 每次都重新创建，则会无限执行
    

正确做法是结合 useCallback 固化函数引用：

const fetchData = useCallback(async () => {
  const res = await api.get('/data');
  setData(res);
}, []);

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

4. 进阶实践：结合状态流与副作用调度

在复杂场景中，可引入状态机思想控制请求触发时机。例如，使用 useMemoizedFn 固化函数引用，并结合 useMount 显式调用：

const load = useRequest(fetchOrderList);

useMount(() => {
  load.run(); // 显式触发，绕过 ready 限制
});
    

或利用 refreshDeps 实现依赖驱动刷新：

const { data } = useRequest(fetchUserData, {
  refreshDeps: [userId], // 当 userId 变化时自动重新请求
});
    

5. 调试与可视化流程

通过以下 Mermaid 流程图展示 useRequest 的执行判断逻辑：

graph TD
    A[组件首次渲染] --> B{ready === true?}
    B -- 是 --> C[执行服务函数]
    B -- 否 --> D[跳过请求，等待手动 run]
    C --> E[更新 loading/data/error 状态]
    D --> F[监听 ready 变化或调用 run/runAsync]
    F --> G{ready 变为 true 或显式调用?}
    G -- 是 --> C
    G -- 否 --> H[保持待命状态]

6. 最佳实践清单

为确保首次渲染正确执行，建议遵循以下 checklist：

1. 检查 useRequest 是否设置了 ready: false；
2. 确认服务函数是否使用 useCallback 优化；
3. 验证依赖项是否包含所有外部变量；
4. 避免在依赖数组中放入非稳定引用的对象或函数；
5. 对于条件请求，优先使用 refreshDeps 而非手动控制 ready；
6. 必要时使用 useEffect + useMount 显式触发；
7. 利用 ahooks 提供的 useMemoizedFn 提升函数稳定性；
8. 在开发环境启用 React Strict Mode 检测重复渲染问题；
9. 结合浏览器 DevTools 监控网络请求与组件生命周期；
10. 编写单元测试验证 Hook 触发逻辑。