如何在无控制台报错的情况下检测React Hook是否可调用？

架构老林

2026-7-21

如何无警告检测React Hook是否可调用

直接在非允许上下文（比如useEffect内部）调用Hook，哪怕用try/catch也会触发React的Hook规则警告——因为这个警告来自React的运行时校验和ESLint规则，不属于可捕获的JS错误。要实现无警告的检测，有两个可行方案：

方案1：检查React内部调度器状态（非官方但实用）

React内部通过调度器跟踪当前是否处于允许调用Hook的上下文（函数组件/自定义Hook顶层）。你可以通过内部API判断：

import React from 'react';

function canCallHook() {
  const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;
  // 合法上下文里，调度器会包含完整的Hook方法
  return !!dispatcher && typeof dispatcher.useState === 'function';
}

这个方法不会触发任何警告，因为它只是读取内部状态，没有实际调用Hook。虽然是内部API，但在React 16+的各个版本中都稳定可用，适合特殊场景下使用。

方案2：用自定义Hook标记合法上下文

如果不想依赖内部API，可通过自定义Hook在合法上下文里标记状态：

import { useState, useRef } from 'react';

function useHookAvailable() {
  const isAvailable = useRef(false);
  // 在自定义Hook顶层调用无副作用的Hook，确认当前环境合法
  useState();
  isAvailable.current = true;
  return isAvailable.current;
}

在组件或自定义Hook的顶层调用useHookAvailable()，就能得到是否可以安全调用其他Hook的状态。这个方案完全符合Hook规则，无任何警告，但只能在合法Hook上下文中使用。