如何检测React组件是否运行在StrictMode严格模式下

目前React官方没有直接暴露React.isStrictModeOnForThisComponentRendering这类可直接读取的常量，但通过代码编写、React DevTools两种路径都可以实现准确判断，具体方案如下：

代码检测方案 #

所有代码检测方案仅在开发环境有效：生产环境下React会自动移除StrictMode的所有特殊运行逻辑，此时判断StrictMode状态没有实际意义。

• 通用兼容Hook（推荐临时排查/业务内使用）
  利用StrictMode开发环境下刻意双调用渲染阶段逻辑的特性实现，兼容React 17、18所有正式版本，没有使用内部API，稳定性有保障：

import { useState, useEffect, useRef } from 'react'

function useIsInStrictMode() {
  const [isStrictMode, setIsStrictMode] = useState(false)
  const renderCount = useRef(0)
  // 渲染阶段自增计数，StrictMode双调用下会连续触发两次
  renderCount.current += 1

  useEffect(() => {
    // 首次挂载完成后判断渲染次数，大于1即为StrictMode环境
    if (renderCount.current > 1) {
      setIsStrictMode(true)
    }
  }, [])

  return isStrictMode
}

使用时直接在目标组件内调用即可拿到布尔值，支持直接console打印：

function TestComponent() {
  const isStrict = useIsInStrictMode()
  console.log('当前组件是否在StrictMode下：', isStrict)
  return <div />
}

• 渲染阶段同步检测（仅适合临时排错）
  如果不想等组件挂载完成再拿结果，可以读取React的内部标记位实现同步判断，但该API属于React内部未公开接口，跨版本兼容性无保障，不建议在业务代码中长期使用：

import React from 'react'

function checkStrictModeSync() {
  const internals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
  const currentFiber = internals?.ReactCurrentOwner?.current
  if (!currentFiber) return false
  // StrictMode对应的位掩码
  const STRICT_MODE_BIT = 0b10
  return (currentFiber.mode & STRICT_MODE_BIT) !== 0
}

// 可直接在组件渲染阶段调用
function TestComponent() {
  console.log('渲染阶段同步检测StrictMode：', checkStrictModeSync())
  return <div />
}

React DevTools 检测方案 #

• 组件树层级定位
  打开React DevTools的组件树面板，所有<React.StrictMode>包裹边界会显示专属的带斜杠三角形内置组件图标，顺着目标组件的父级链向上查找，就能快速定位StrictMode在组件树中的具体开启位置。
• 组件详情面板查看
  1. 4.28及以上版本的React DevTools：点选目标组件后，右侧详情面板会直接展示Strict Mode: Enabled/Disabled的明确标注，不需要额外配置。
  2. 低版本DevTools：先在DevTools设置中开启「显示内部组件属性」选项，点选组件后在右侧fiber信息中找到mode字段，值包含StrictMode位标记即为处于严格模式环境。
• 辅助判断方法
  开启DevTools设置中的「组件渲染时高亮更新」选项，首次挂载阶段如果目标组件连续触发两次高亮闪烁，即可确认当前处于StrictMode开发环境。

提示：Next.js等框架默认在根组件开启全局StrictMode，排查时如果组件树顶层没有找到手动写的<React.StrictMode>包裹，可优先检查框架配置项。

内容的提问来源于stack exchange，提问作者Erdős-Bacon