React Transition Group 实践unmountOnExit 属性：转场过渡完成后，是否卸载组件。为 t

使用 React 实际开发中

一些常规功能

文件上传、下载、表单、表格等

页面简单平铺

体验有点差

整点过渡吧

react 示例中使用了 react-transition-group

看了下

开发文档基本齐全

基本满足需求

实际使用中还是碰到了一些问题

理论与实际有些差别

所以，将使用中碰到的问题及示例演示记录下来，便于查阅

约定

初始化：组件首次渲染
渲染：组件再次渲染
卸载：组件不缓存、直接移除
RTG：React Transition Group 缩写

RTG 使用场景及组成

RTG 原理是基于 CSS transition 属性的补间动画（开始、结束两个状态）

通常用于初始化（进场）渲染、组件添加、删除、转场（比如单页路由切换）

但多状态过渡，位移 - 停止 - 位移 - 改变透明度 - 旋转等 RTG 就无法满足了

于正常的开发已经够用了

毕竟正常开发来说

复杂的功能没太多

RTG 提供 Transition、CSSTransition、SwitchTransition、TransitionGroup 四种 React 组件

其中 Transition 是基础父类组件

其他基于此的扩展组件

比如支持 css class 控制过渡的 CSSTransition 组件

比如支持列表过渡的 TransitionGroup 组件

Transition 组件

用于单个子元素

过渡状态映射为如下 state 标记

initial entering entered exiting exited

组合拼接这些 state 为 style 或 class 实现过渡

官方文档中 initial 状态未提到

这是组件初始化过渡标记

示例传送门

CSSTransition 组件

用于单个子元素

通过 Css class 控制组件过渡

对应 classNames 属性

另新增了 appear 属性

控制组件初始化状态过渡

示例传送门

SwitchTransition 组件

用于单个子元素

参考了 vue 过渡模式

对应 mode 属性，默认值为 out-in

子组件不能直接使用 React 元素

需要通过 Transition 或 CSSTransition 包装一层

它只是一个承载容器，真正干活的还是 Transition 或 CSSTransition 与 TransitionGroup 类似

示例传送门

TransitionGroup 组件

上面过渡组件都用于单个子元素

此组件，如其名，用于多个子元素

一个承载容器，子元素通过 Transition 或 CSSTransition 包装实现过渡

注意对于 ul > li 特定结构中 li 使用 TransitionGroup 组件时

需将 component 属性设置为 null，默认值为 div

否则报 html 结构错误

如果在组件渲染过程中对组件进行差异化处理

使用 childFactory 属性

示例传送门

注意几点

in 属性：组件开关，控制组件的显示、隐藏，包括过渡，必需
unmountOnExit 属性：转场过渡完成后，是否卸载组件。为 true 相当于设置组件 display: none
appear 属性：组件启用初始化过渡，值为 true 时需要保证 in 为 true
timeout 属性：过渡中状态过渡到结束状态所需时间，即 entering 到 entered 或 exiting 到 exited 切换所需时间。不同状态延迟时间可单独配置，比如：
```
<Transition>
   timeout={{
     appear: 500,
     enter: 300,
     exit: 500,
   }}
 </Transition>
```

React.StrictMode 模式下报错

React 开启 React.StrictMode 模式后

控制台 Warning: findDOMNode is deprecated in StrictMode ...

有提示，但不影响代码正常执行

且在开发环境中提示，生产环境正常

官方 Issues 给出了解决方案

但影响还是很大的

比如在 RTG 组件中以 on* 开头回调监听函数及 addEndListener 函数第一个参数 node 直接被干掉了

于是在回调中也就无法使用了

感谢

本文首发于公众号「cnjs」，欢迎关注。

网站「README」保持同步