javascript - react : Calling Render() during animation. 会发生什么？

Question

我想知道 React 如何处理在组件动画期间调用的渲染。在下面的例子中，一个组件被重新渲染
假设在组件动画期间组件的状态发生了变化，因此组件被重新渲染。 react 会取代物理 DOM 还是会识别出组件处于动画中间？
这是我认为会发生的事情
第 1 步:组件安装
组件首次挂载到物理 DOM。组件的动画持续 60 秒。该组件有一个更改状态计时器，该计时器将在 30 秒内关闭。同时，react 在挂载时保存了虚拟 DOM。
第二步:触发状态改变，组件重新渲染
30 秒后，父组件会发生状态变化，组件将重新渲染。此时组件处于动画中间，并且使用 react-transition-group 将“className-active”css 类应用于子级。 React 现在会将当前的虚拟 DOM 与旧的虚拟 DOM 进行比较。虚拟 DOM 是不同的，因为 child 现在应用了事件类(而不是“进入”类)。结果，react 会将更新后的组件插入到物理 DOM 中(即使物理 DOM 不需要更新!)。因此，屏幕会闪烁...
这是描述上述场景的代码

import React from 'react'
import CSSTransition from 'react-transition-group'
                                                                                                                                                                                                                     ```
class ExampleComponent extends React.Component {
      constructor(props) {
           super(props);
           this.state = {reRender : false};
           setTimeout(() => {this.setState({reRender: true})}, 30000) 
           /* 30,000 ms is 30 seconds. 
              Set state will fire in 30 seconds, and the parent component will 
             rerender itself and the     
           */
     }
      render()  {
          return (
                <CSSTransition
            appear = {true}
            in = {true}
            classNames = 'test'
            timeout = {60000}>
                <span> test </span>
        </CSSTransition>
          )

      }

}

这是相关的css类

.test-appear, test-enter{
       opacity : 1;
}
.test-appear-active, .test-enter-active {
      opacity: 0; 
      transition: opacity; 
      transition-duration: 60000;
}
.test-appear-done, .test-enter-done {
      opacity: 0;    
}

有了这段代码，我想一步一步地了解在 react 生命周期和虚拟 DOM 中发生了什么。物理 DOM 会在 30 秒后更新还是会 react 识别它处于动画中间？虚拟 DOM 是如何保存之前的状态的？

Answer 1

在这种情况下CSSTransition保持内部状态以知道它处于动画的哪个阶段。
React 不会重置 CSSTransition 的状态实例，因为它知道它指的是同一个元素(React 依赖于组件的类型和树上的位置来决定它是否是同一个元素，或者在定义时依赖 key 属性)
因为CSSTransition的内部状态是一样的，它的 render 方法在组件的状态更改之前和之后呈现相同的 css 类。
查看您的示例，它没有闪烁https://codesandbox.io/s/hopeful-shaw-c9ldrCSSTransition可能会更改状态以响应您传递给它的任何 Prop 的变化(在这种情况下甚至不会发生)，但这取决于 CSSTransition执行。
最后，如果你通过了不同的key至CSSTransition它会重置动画，因为 React 会认为它是一个新组件，因此会卸载前一个组件并安装一个具有新内部状态的新组件。
请参阅此处重置动画的示例:
https://codesandbox.io/s/jolly-maxwell-2ihkf