Storybook切换组件时componentDidUpdate触发问题咨询

嘿，这个问题我在帮开发者排查Storybook相关问题时碰到过好几次，主要和Storybook的渲染机制、React的生命周期特性以及你的组件/配置逻辑有关，给你拆解几个最可能的原因：

1. Storybook的Args或全局配置的“残留”更新 #

当你在侧边栏切换stories时，Storybook并不会完全销毁整个渲染环境再重建——它会尽量复用现有的DOM容器和上下文。如果你的两个Radio组件共享了一些全局args，或者Storybook的全局装饰器（比如ThemeProvider、布局装饰器）在切换时会更新状态/属性，就会出现：

• 首先RadioButtonWithIcons完成componentDidMount（毕竟它是刚挂载的新组件）
• 紧接着Storybook完成全局配置的同步更新，导致组件的props或上下文发生变化，直接触发componentDidUpdate

举个实际例子：如果你的两个story都用了同一个args（比如defaultChecked: true），切换时Storybook内部的异步处理可能会让组件先完成挂载，之后才把正确的props同步上去，这就会触发一次更新。

2. React严格模式的“重复渲染”触发 #

Storybook在开发环境下默认是开启React严格模式的，这个模式的作用是帮你检测潜在的代码问题，会刻意重复调用某些生命周期和更新逻辑。
具体来说，严格模式下组件挂载后，可能会被强制触发一次额外的更新——这就会导致componentDidMount执行完，立刻就触发componentDidUpdate。你可以去.storybook/main.js里看看framework配置有没有strictMode: true，暂时关掉试试能不能复现这个问题，就能验证是不是这个原因。

3. 外部状态/上下文在切换后发生变化 #

如果你的Radio组件依赖了外部状态管理（比如Redux、Context API），而这些外部状态在切换stories时没有被重置，就会出现新组件挂载后，外部状态发生了更新（比如旧组件卸载时触发了状态变化），导致新组件接收到新的props或上下文，进而触发componentDidUpdate。
比如，假设你有个全局表单状态，RadioButton组件卸载时修改了这个状态，而RadioButtonWithIcons挂载后监听了这个状态，自然就会立刻触发更新。

4. 组件内部componentDidMount触发了状态更新 #

如果RadioButtonWithIcons的componentDidMount方法里调用了setState（比如从API拉取数据、计算某些动态状态），那componentDidMount执行完成后，React会立刻执行状态更新，肯定会触发componentDidUpdate。不过这种情况在初始渲染时也应该会触发componentDidUpdate，如果你说只有切换时才出现，这个可能性相对小，但也可以排查下。

快速排查技巧 #

你可以在componentDidUpdate里打印前后的props和state，精准定位变化来源：

componentDidUpdate(prevProps, prevState) {
  console.log('Props变化:', { 之前: prevProps, 当前: this.props });
  console.log('State变化:', { 之前: prevState, 当前: this.state });
}

看了日志你就能立刻知道是props、state还是上下文的变化导致的更新，然后针对性解决就行。

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