React组件重渲染异常：分类切换时过渡动画失效问题求助

1. 组件key值复用导致实例未重建 #

React通过key判断组件是否为同一实例，如果切换分类时，相同项目（或不同项目但key重复）的key没有变化，React会复用现有组件DOM，不会触发挂载/卸载相关的过渡动画。

• 检查WorkList中渲染Work组件时的key值：是否使用了全局唯一的标识（比如项目id）而非索引index？如果不同分类下的项目复用了相同key，会导致组件实例被保留，动画不触发。

2. 过渡动画的触发逻辑依赖组件生命周期 #

如果你的过渡动画是基于组件挂载/卸载触发（比如React Transition Group的CSSTransition进入/退出动画），而切换分类时，当前分类下的项目是通过props更新而非卸载重建，动画不会触发：

• 查看Work组件的动画实现：是否仅在组件挂载时添加动画类名？如果是，当组件复用（props变化但未卸载）时，不会重新执行动画逻辑。
• 可以尝试在Work组件中监听分类变化（currentCat作为props传入），在分类切换时主动重置动画状态（比如移除再添加动画类名）。

3. useEffect依赖与动画重置逻辑不匹配 #

虽然你将currentCat加入了useEffect依赖，但如果useEffect内的逻辑没有正确触发动画重置：

• 检查Work或WorkList中的useEffect：是否在currentCat变化时，对每个项目的动画状态进行了重置？比如是否重新初始化了动画相关的状态变量，或者强制触发了DOM的重绘/回流。

4. 过滤后的项目列表存在复用实例 #

如果切换分类前后，部分项目同时存在于两个分类中，React会复用这些项目的组件实例，仅更新props而非重建，导致挂载动画不触发：

• 可以尝试在切换分类时，给WorkList添加一个基于currentCat的key，比如<WorkList key={currentCat} ... />，这样每次分类切换时，整个WorkList都会重新挂载，内部所有Work组件也会重建，触发动画。不过这是比较粗暴的方案，优先解决key值问题。

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