React+Redux疑难问题：仅生产环境压缩代码时组件渲染触发卸载

这问题我之前踩过一模一样的坑！大概率是UglifyJS的代码混淆破坏了React调和算法依赖的组件类型标识，哪怕你给数组组件加了key也没用——因为React首先会判断组件类型是否一致，类型变了的话，直接就会卸载旧组件、挂载新组件，key只是同类型组件数组里的复用标识。

以下是一步步排查和解决的思路：

1. 先验证是不是混淆的锅 #

临时修改Uglify配置，关闭代码混淆（mangle），重新构建生产包：

minimizer: [
  new UglifyJsPlugin({
    sourceMaps: true,
    uglifyOptions: {
      ecma: 8,
      mangle: false, // 临时关闭混淆
      compress: {
        dead_code: true,
        unused: true,
        inline: false,
        global_defs: {
          'process.env.NODE_ENV': 'production'
        }
      }
    }
  })
]

如果问题消失，那百分百是Uglify的混淆导致组件类型被React误判了。

2. 修正Uglify的混淆配置 #

你之前只加了keep_classnames，但这个选项只针对类组件的类名；如果你的SidebarSection/SidebarSubSection是函数组件，得同时开启keep_fnames来保留函数名。另外要确保这些配置放在mangle选项下，而不是compress里：

minimizer: [
  new UglifyJsPlugin({
    sourceMaps: true,
    uglifyOptions: {
      ecma: 8,
      compress: {
        dead_code: true,
        unused: true,
        inline: false,
        global_defs: {
          'process.env.NODE_ENV': 'production'
        }
      },
      mangle: {
        // 保留类组件的类名
        keep_classnames: true,
        // 保留函数组件的函数名
        keep_fnames: true,
        // 可选：如果某些特定组件还是被混淆，可以手动加入保留名单
        // reserved: ['SidebarSection', 'SidebarSubSection']
      }
    }
  })
]

为什么这能解决？ #

React调和时，会通过组件的构造函数（类组件）或函数引用（函数组件）的名称/标识来判断是否为同一类型组件。Uglify默认会把这些名字混淆成a/b这类单字母，导致React认为前后渲染的是完全不同的组件，直接触发卸载重挂载。

3. 排除其他可能的原因（概率较低，但可以排查） #

• 组件引用动态变化：如果你的SidebarSection/SidebarSubSection是定义在Sidebar组件内部的内联函数组件，每次父组件重渲染都会创建新的函数引用，哪怕有key，React也会认为是新组件。解决方法是把组件定义移到父组件外部，确保引用稳定。
• Redux状态更新导致组件树结构变化：检查Redux reducer更新后的状态，是否意外改变了SidebarSection/SidebarSubSection的数组结构（比如key值意外变化？不过你说已经设了唯一key）。

4. 验证修复效果 #

构建生产包后，用React DevTools（生产环境可以通过设置__REACT_DEVTOOLS_GLOBAL_HOOK__开启）查看组件的名称，确认SidebarSection/SidebarSubSection的名称没有被混淆；或者在组件的componentDidMount和componentWillUnmount里打日志，看是否还会触发不必要的卸载/挂载。

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