如何在TypeScript中检查React严格模式是否已启用？

方法一：利用严格模式的组件双挂载特性（推荐，无内部API依赖） #

开发环境下，React严格模式会触发组件两次挂载以检测副作用，我们可以基于这个特性实现判断逻辑：

import { useEffect, useState } from 'react';

export function useIsStrictMode(): boolean {
  const [mountCount, setMountCount] = useState(0);

  useEffect(() => {
    setMountCount(prev => prev + 1);
  }, []);

  // 仅开发环境下严格模式会触发两次挂载，生产环境不会重复执行
  return mountCount >= 2 && process.env.NODE_ENV === 'development';
}

使用方式：

function MyComponent() {
  const isStrict = useIsStrictMode();
  console.log('是否处于严格模式：', isStrict);
  // 业务逻辑代码
}

方法二：访问React内部标识（仅开发调试用，有版本兼容风险） #

如果需要非Hook的同步判断方式，可以读取React的内部未公开API（注意：这是React内部实现，官方可能随时修改，禁止在生产代码中依赖）：

import React from 'react';

export function isStrictModeEnabled(): boolean {
  if (process.env.NODE_ENV !== 'development') return false;
  
  // 类型断言绕过TS检查
  const internals = (React as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
  return !!(internals?.ReactCurrentDispatcher?.current?.isStrictMode);
}

JS方案转TS失效的常见原因 #

之前的JavaScript方案转TypeScript后报错，通常是两个问题：

• 访问内部API时未添加as any类型断言，触发TS类型检查报错
• process.env.NODE_ENV无类型提示，可在tsconfig.json中添加"types": ["node"]解决

内容的提问来源于stack exchange，提问作者Jeff W