ReactJS如何避免开发环境代码被编译到生产构建中？

针对你遇到的问题，既不想违反React Hook规则，又要彻底让开发环境的逻辑不进入生产构建，同时避免代码重复，这里提供几个可行的实践方案：

方案一：拆分生产/开发组件+公共基础逻辑 #

把公共的Context核心逻辑抽离到基础组件，再分别编写生产和开发版本的外层组件，通过环境变量条件导入。

步骤1：抽离公共基础组件 #

// BaseContextProvider.js
import { createContext, useState, useMemo } from 'react';

export const FormContext = createContext();

// 所有环境都需要的核心逻辑放在这里
export function BaseContextProvider({ children }) {
  const [width, setWidth] = useState(0);
  const [formData, setFormData] = useState({});

  const contextValue = useMemo(() => ({
    width,
    setWidth,
    formData,
    setFormData
  }), [width, formData]);

  return (
    <FormContext.Provider value={contextValue}>
      {children}
    </FormContext.Provider>
  );
}

步骤2：编写开发版本组件 #

// ContextProvider.dev.js
import { useEffect, useContext } from 'react';
import { BaseContextProvider, FormContext } from './BaseContextProvider';

export default function ContextProvider({ width, children }) {
  const { setWidth } = useContext(FormContext);

  // 开发环境专属的width同步逻辑
  useEffect(() => {
    setWidth(parseInt(width));
  }, [width, setWidth]);

  // 开发环境的模拟API请求逻辑
  useEffect(() => {
    fetch('/mock-api/form-data')
      .then(res => res.json())
      .then(data => {
        // 更新表单数据
        useContext(FormContext).setFormData(data);
      });
  }, []);

  return <BaseContextProvider children={children} />;
}

步骤3：编写生产版本组件 #

// ContextProvider.prod.js
import { BaseContextProvider } from './BaseContextProvider';

export default function ContextProvider({ children }) {
  // 生产环境无需处理width和模拟API，直接复用基础组件
  return <BaseContextProvider children={children} />;
}

步骤4：条件导入主组件 #

// ContextProvider.js
let ContextProvider;
if (process.env.NODE_ENV === 'development') {
  ContextProvider = require('./ContextProvider.dev').default;
} else {
  ContextProvider = require('./ContextProvider.prod').default;
}

export default ContextProvider;
export { FormContext } from './BaseContextProvider';

这种方式的优势：

• 生产构建中完全不会包含开发环境的useEffect和相关逻辑，打包工具会自动剔除未引用的dev文件
• 公共逻辑集中在基础组件，避免代码重复
• 严格遵守React Hook规则，不会触发lint或运行时错误

方案二：空Hook占位+环境别名替换 #

如果不想拆分组件，可以把开发逻辑封装成自定义Hook，为生产环境提供一个空实现，通过打包工具的别名功能自动替换。

步骤1：编写两个版本的Hook #

// useDevSetup.dev.js
import { useEffect, useContext } from 'react';
import { FormContext } from './BaseContextProvider';

export default function useDevSetup(props) {
  const { setWidth } = useContext(FormContext);
  
  useEffect(() => {
    setWidth(parseInt(props.width));
  }, [props.width, setWidth]);

  // 其他开发环境逻辑
  useEffect(() => {
    // 模拟API请求
  }, []);
}

// useDevSetup.prod.js
// 生产环境空实现，什么都不做
export default function useDevSetup() {}

步骤2：配置打包工具别名 #

以Webpack为例，在配置文件中添加别名规则：

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      './useDevSetup$': process.env.NODE_ENV === 'development' 
        ? './useDevSetup.dev.js' 
        : './useDevSetup.prod.js'
    }
  }
};

步骤3：在ContextProvider中调用Hook #

// ContextProvider.js
import { BaseContextProvider } from './BaseContextProvider';
import useDevSetup from './useDevSetup';

export default function ContextProvider(props) {
  // 直接调用Hook，生产环境会调用空实现
  useDevSetup(props);

  return <BaseContextProvider children={props.children} />;
}

这种方式更简洁，但需要依赖打包工具的别名配置，适合不想拆分组件的场景。

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