javascript - 在页面刷新上调用的是哪个生命周期方法？

Question

我有包含componentA的页面，并且在componentDidMount循环方法上，我正在更新触发一些动画的状态。但是，如果刷新页面，则动画不会播放。请让我知道如何解决此问题。下面是我的组件代码。

import React from 'react';
import { findDOMNode } from 'react-dom';
import Nav from "../nav/nav-component";
class Mylist extends React.Component{
  constructor(props) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
    this.state = { animationClass: '' , transform : 12  };
  }
  componentDidMount() {
      window.addEventListener('scroll', this.handleScroll);
      this.setState({animationClass:'animate'});
  };
  componentDidUpdate() {
      //this.setState({animationClass:''});
  };

  componentWillUnmount() {
      window.removeEventListener('scroll', this.handleScroll);
      this.setState({animationClass:''});
  };
  handleScroll(event){
    const scrollTop = event.srcElement.body.scrollTop,
          ele = findDOMNode(this.refs.toggle), // how to get dom element in react
          childElements = ele.children,
          componentTopPos = ele.getBoundingClientRect();
    //itemTranslate = Math.min(0, scrollTop/3 - 60);

    console.log("scrollTop",scrollTop);
    console.log(childElements);
    console.log("componentTopPos",componentTopPos);

     console.log(this);
    this.setState({
      transform: "dsfdf"
    });
  }
  render(){
    return ( 
      <div className={'header '+this.state.animationClass}>
      <Nav />
      </div> 
    );
  }
}
export default Mylist;

Answer 1

请记住，componentDidMount仅被调用一次。多少次刷新页面都没有关系。该方法将不会再次调用。我认为播放动画的更好方法是在本地状态下设置一个标志，例如“playAnimation:true”，在播放动画后将状态设置为false。刷新后，您的状态将再次变为真实，动画将再次播放。希望我能帮上忙。