反应：在动画期间调用 Render()。发生什么了？

Question

我想知道 React 如何处理在组件动画期间调用的 Render。在下面的例子中，一个组件被重新渲染

假设在组件动画期间组件的状态发生了变化，因此组件被重新渲染。React 会取代物理 DOM 还是会识别组件处于动画中？这是我认为会发生的事情

第 1 步：组件挂载 组件首次挂载到物理 DOM。组件的动画持续 60 秒。该组件有一个更改状态计时器，它将在 30 秒内关闭。同时，react 会在挂载时保存虚拟 DOM。

第二步：触发状态变化，组件重新渲染 30秒后，父级发生状态变化，组件重新渲染。此时组件处于动画中期，并使用 react-transition-group，将“className-active”css 类应用于子项。React 现在将比较当前的虚拟 DOM 和旧的虚拟 DOM。虚拟 DOM 是不同的，因为孩子现在应用了活动类（而不是“输入”类）。结果，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定义时的 prop）

因为 的内部状态CSSTransition是相同的，所以它的 render 方法在组件状态更改之前和之后渲染相同的 css 类。

查看您的示例，它在没有闪烁的情况下工作https://codesandbox.io/s/hopeful-shaw-c9ldr

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

最后，如果你传递一个不同的key值，CSSTransition它会重置动画，因为 React 会认为它是一个新组件，因此会卸载前一个组件并安装一个新组件，并具有新的内部状态。

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