如何使用动画每次重新渲染React组件

Question

嗨，我有一个单页应用程序，

当我们加载页面时，我正在创建一些动画。如果用户在同一页面上并重新加载该组件，则不会发生动画。我相信，由于DOM不会在没有状态或道具的情况下进行更新，因此我认为动画不会再发生。

对于重新加载，请考虑该组件来自后端。

我被允许使用状态。

我只是在这里摆弄代码。请考虑每次该组件都来自后端。

我在componentDidUpdate内部尝试了this.forceupdate-没用

然后我像下面这样用Date.now（）在父div中添加状态

 constructor(props)
{
   constructor(props)
    this.state={
    time:Date.now()
    }
  }


<div data-value={this.state.time}>

不起作用。

我创建了小提琴进行测试。我的组件就像小提琴一样。我想在每次页面加载时进行动画处理（如果上面的部分难以理解，请考虑单击相同的URL并在每次单击时使用动画加载此组件）

https://jsfiddle.net/nye3jcz8/

Answer 1

这在某种程度上是一种hack解决方案，从性能的角度来看并不一定很棒，但是您可以为组件分配随机的key属性。从本质上讲，这将导致React每次将其视为新组件，并在应设置动画的位置安装新的副本组件。

您的动画正在播放，这就是为什么没有任何与状态相关的原因。状态更改时，组件将更新而不是重新安装。上面的修复程序旨在强制卸载/重新安装。

也就是说，您可能应该编写一个函数，该函数允许您随意触发此动画，而不是通过生命周期操纵异常来触发。您可以通过添加删除或应用CSS类的行为来做到这一点，这将使您达到预期的效果，并且从可预测性的角度来看可能会更好。

Answer 2

要重新渲染组件，最好的方法是使用key道具。每当key道具更改时，该组件就会卸载并重新安装。我看到这就是您想要的。

我用您的代码创建了一个小示例。 检查一下：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({ count: this.state.count + 1 });
    }, 1000);
  }

  render() {
    return (
      <div key={this.state.count}>
        <div className="drawLine">I am drawing the at top</div>
      </div>
    );
  }
}

您可以根据自己的应用程序以自己的方式进行操作。