React Transition Group中TransitionGroup组件的作用与必要性咨询

官方文档说明翻译 #

<TransitionGroup> 组件用于管理列表中的一系列过渡组件（例如 <CSSTransition>）。和过渡组件的定位一致，<TransitionGroup> 是一个状态机，用于全程管控组件的挂载与卸载流程。
以下方的TodoList示例为例，当列表内的条目被新增或删除时，<TransitionGroup> 会自动切换对应条目的in属性值。

<TransitionGroup> 具体作用 #

• 自动为子级 <Transition>/<CSSTransition> 组件注入in属性：列表新增元素时自动将子组件的in设为true，触发进入动画；列表删除元素时先将in设为false触发离开动画，等待动画执行完毕后再真正从DOM中卸载该组件。
• 基于子元素的key属性追踪列表的增删操作，无需开发者手动维护每个子过渡组件的in状态。
• 支持自定义渲染的容器标签，默认渲染<div>，可通过component属性指定为<ul>等任意标签，不会破坏原有DOM结构语义。

为什么 <TransitionGroup> 是必要的 #

它解决了React原生渲染逻辑下的核心痛点：默认情况下React只要检测到元素从渲染列表中移除，就会立刻将其从DOM树卸载，不会预留时间执行离开动画。<TransitionGroup> 会在删除列表项时暂存组件实例，等离开动画执行完成后再触发真实卸载，这一能力是普通HTML标签无法实现的。
同时它大幅简化了列表场景下的动画状态管理逻辑，不用手动给每个列表项绑定动画状态、监听动画结束事件、控制卸载时机，避免了大量冗余的状态代码。

替换为普通<ul>后功能看似正常的原因 #

你观察到的正常仅为增删待办的业务逻辑功能正常，动画能力已经完全失效：

• 普通<ul>不会为子级<CSSTransition>注入in属性，也不会监听动画结束事件，删除列表项时React会直接卸载DOM，不会触发任何离开动画，如果你没有特意添加动画样式，很容易感知不到这部分差异。
• 新增列表项时也不会自动触发进入动画，<CSSTransition> 没有收到in状态的变更通知，只会应用最终的静态样式，不会有过渡效果。

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