Render:在动画期间调用Render()。会发生什么？

Question

我想知道React如何处理组件动画期间调用的呈现。在下面的示例中，组件将被重新命名。

假设在组件的动画过程中对组件进行了状态更改，因此组件将被重新呈现。会替换物理DOM，还是会识别组件在动画中？以下是我认为会发生的事情

步骤1:组件安装组件首次挂载到物理DOM。组件的动画持续60秒。该组件有一个更改状态计时器，将在30秒内启动。同时，react在安装时保存虚拟DOM。

步骤2:触发状态更改，30秒后组件重新呈现，其父组件将发生状态更改，组件将被重新呈现。此时，组件处于中间动画中，并且使用react transition group，将"className-active“css类应用于子组件。React现在将比较当前的虚拟DOM和旧的虚拟DOM。虚拟王国是不同的，因为子程序现在有了应用于它的活动类(与"enter“类相反)。因此，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秒后更新，还是会反应识别它在动画中？虚拟DOM如何保存以前的状态？

Answer 1

在这种情况下，CSSTransition将保持内部状态，以了解动画的哪个阶段。

React不重置CSSTransition实例的状态，因为它知道它引用相同的元素(React依赖于树上组件的类型和位置来决定它是否是相同的元素，或者在定义时依赖于key支柱)

由于CSSTransition的内部状态相同，所以它的render方法在组件的状态更改之前和之后呈现相同的css类。

看到你的例子，它没有闪烁https://codesandbox.io/s/hopeful-shaw-c9ldr工作。

CSSTransition可能会更改状态，以响应您传递给它的任何道具的更改(在本例中甚至不会发生)，但这取决于CSSTransition实现。

最后，如果您将一个不同的key传递给CSSTransition，它将重置动画，因为React会认为它是一个新组件，因此将卸载前一个组件并挂载一个新的组件，并带有一个新的内部状态。

请参见此处重放动画的示例：https://codesandbox.io/s/jolly-maxwell-2ihkf

Answer 2

React不关心动画。它所关心的是确保根据vDOM中的变化更新DOM。

当您手动从DOM中间动画中删除元素时，动画就会停止.React将执行完全相同的操作，即对树的任何更改(不包括不改变树结构的道具更改)将在下一个呈现周期立即卸载和重新装入涉及的元素。

在您的例子中，由于树没有改变，它不会删除任何元素。render()将被调用，react将比较vDOM的旧版本和新版本，如果有任何更改，只会修改道具。但是，使用状态更改的手动重命名器不会以任何方式影响vDOM

有关更多信息，请参阅和解文档。