React生产模式下组件函数名判断失效，除压缩外还有其他原因吗？

你碰到的这个问题太典型了——开发环境一切正常，一到生产环境就掉链子，核心原因确实是生产打包时的代码压缩工具改写了组件的函数名。

为什么会这样？ #

在开发模式下，React项目的打包工具（比如Webpack + Terser）不会压缩函数/类的名称，所以component.name能准确返回Component_1；但生产环境为了尽可能减小包体积，压缩工具会把所有非必要的标识符（包括组件的类名、函数名）替换成极短的字符（比如t、a这类单字符）。这时候你再用component.name === 'Component_1'做判断，自然就不成立了。

为什么第二种写法能正常工作？ #

第二种代码里直接用component === Component_1做对比，这是基于对象引用的全等判断——不管组件的名字被改成什么样，组件本身的内存引用地址是不会变的，所以哪怕生产环境压缩了代码，这个对比依然能准确命中。

有没有其他可能的原因？ #

虽然最常见的是代码压缩，但也可以快速排查下这两个小问题：

• 确认传入的props.component确实是你期望的Component_1组件，而不是它的实例（比如不小心传了<Component_1 />而不是Component_1）
• 检查有没有其他工具（比如代码混淆插件）意外修改了组件的属性

最佳实践推荐 #

1. 优先用组件引用做对比：就像你第二种写法那样，直接对比组件对象本身，这是最稳妥、性能也最好的方式
2. 如果需要标识组件，手动添加自定义属性：如果场景不允许直接对比引用，可以给组件添加一个不会被压缩的标识，比如：

   // 在Component_1的文件中
   import React from 'react';
   class Component_1 extends React.Component {
     static displayName = 'Component_1'; // 类组件这么加
     // ...
   }
   // 函数组件的话
   const Component_1 = () => <div>...</div>;
   Component_1.displayName = 'Component_1';
   

   然后在父组件里判断component.displayName === 'Component_1'。不过要注意，有些压缩工具可能会处理displayName，需要在打包配置里保留它（比如Terser配置中设置keep_classnames: true），但这会略微增加包体积，所以还是优先推荐第一种方案。

附上你提供的代码示例：

生产模式下存在bug的代码：

import React from 'react';
export default class ParentComponent extends React.Component {
  render() {
    const component = this.props.component;
    return (
      {component.name === 'Component_1' ? Component_1 : Component_2}
    );
  }
}

生产模式下无bug的代码：

import React from 'react';
import Component_1 from 'components/component1';
export default class ParentComponent extends React.Component {
  render() {
    const component = this.props.component;
    return (
      {component === Component_1 ? Component_1 : Component_2}
    );
  }
}

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