React Transition Group 源码浅析

1. 前言

之前做日历组件的时候,移动端需要实现一个从底部弹出的一个弹层组件，涉及到React动画的相关知识。

当时了解到 react-transition-group的相关用法，但是不确定在实现2C组件的时候，引入外部组件是否恰当，毕竟原则上来说，最希望的是2C组件能足够轻量级，无其它无效代码。

在时间紧急情况下，当时使用回调的形式实现: 即当 componentDidMount时，给对应的DOM添加向上弹出动画class。在 visible 属性为false时，添加向下收缩动画的class, 等动画执行完通过回调告诉别的组件做别的操作。

也能实现动画的功能，但是总觉得这样的组件不够通用，于是在空闲之余查看了 React-Transition-Group组件的Transition部分源码, 特有此文，以做记录。

2. 流程图

画流程图工具: Graphviz (dot) language support for Visual Studio Code

react-transition-group

// 此时再次点击，使得in变为false，步骤简化版 
用户点击 in = false 开始 
=> getDerivedStateFromProps(不做处理)
=> render: 依旧渲染 entered 样式
=> didUpdate(), prevProps(in为true)不等于this.props(in为false)
=> status 等于 entered, 故 nextStatus 为 exiting,执行 this.updateStatus(false,exiting)
=> 执行 this.performExit
=> this.props.onExit
=> this.safeSetState({status: exiting})
=> getDerivedStateFromProps: nextIn为false, 不执行任何操作
=> render: 渲染 exiting 的样式
=> didUpdate: prevProps 等于 this.props
=> this.updateStatus(false, null)
=> 执行this.safeSetState({status: exiting})回调: this.props.onExiting
=> this.onTransitionEnd(node, timeouts.exit, callback): 在 timeout时间之后执行callback回调,即执行 this.safeSetState({status: exited})
=> this.safeSetState({ status: exited }): 触发 getDerivedStateFromProps, nextIn为false, 不执行任何操作
=> render: 渲染 exited 样式
=> didUpdate: prevProps 等于 this.props
=> this.updateStatus(false, null)
=> 执行this.safeSetState({ status: exited })回调: this.props.onExited(node)

3. 总结

经过阅读，即该组件首先根据参数，确定初始的status，比如如果props.unmountOnExit为true,那么初始status为UNMOUNTED,则初始的时候不进行渲染。

之后，当接受到的in 属性发生变化的时候，如果属性值为true，则会执行performEnter,在 performEnter 中, 先setState({status:'entering'),之后过了timeout时间，执行setState({status:'entered'). 此外还会在适当的时机执行this.props.onEnter及this.props.onEntering等回调函数。

也就是, 如果接受到对应的属性，那么在不会一次性的setState到entered或者exited。而是在这中间穿插entering或者exiting的状态，将切换的状态传递给子组件去做动画。