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
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
的状态,将切换的状态传递给子组件去做动画。
Last updated