javascript - 如何在 React.js 中使用 componentWillUnmount 删除 setInterval

Question

当我移动到其他页面时，我有两个在主主页中运行的间隔出现内存泄漏错误，我知道我应该使用 componentWillUnmount 以便间隔停止在其他页面中运行，但我不知道如何实现这一点。有人可以帮忙吗？

 componentDidMount() {
    this.widthSlider();
    this.startAnimate();
    const wow = new WOW();
    wow.init();
  }
  startAnimate = () => {
    const arr = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine"
    ];
    let counter = 1;
    setInterval(() => {
      if (counter === 9) {
        counter = 0;
        this.setState(defaultState());
      } else {
        const state = this.state;
        state[
          `animateLeft${arr[counter]}`
        ] = `animated fadeInLeftBig delay-${arr[counter].toLowerCase()}`;
        state[
          `animateRight${arr[counter]}`
        ] = `animated fadeInRightBig delay-${arr[counter].toLowerCase()}`;
        this.setState(state);
      }
      counter++;
    }, 7000);
  };

  widthSlider = () => {
    setInterval(() => {
      const slide = this.state.width + 100;
      this.state.width === 800
        ? this.setState({
            width: 0
          })
        : this.setState({
            width: slide
          });
    }, 7000);
  };
  componentWillUnmount(){
    //clear Interval here
  }

标签： javascriptreactjscomponentssetintervalreact-component

Answer 1

基本上，您需要在componentWillUnmount.

为了使用它，您需要保存您的间隔 ID，它主要是在componentDidMount()或 中完成constructor()

 constructor() {
    super();
    // references to 
    this.sliderInterval = null;
    this.animateInterval = null;

 }

 componentDidMount() {

    this.widthSlider();
    this.startAnimate();
    const wow = new WOW();
    wow.init();
  }

  startAnimate = () => {
    const arr = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine"
    ];
    let counter = 1;
    //save the interval Id
    this.animateInterval = setInterval(() => {
      if (counter === 9) {
        counter = 0;
        this.setState(defaultState());
      } else {
        const state = this.state;
        state[
          `animateLeft${arr[counter]}`
        ] = `animated fadeInLeftBig delay-${arr[counter].toLowerCase()}`;
        state[
          `animateRight${arr[counter]}`
        ] = `animated fadeInRightBig delay-${arr[counter].toLowerCase()}`;
        this.setState(state);
      }
      counter++;
    }, 7000);
  };

  widthSlider = () => {
    //save the interval Id
    this.sliderInterval = setInterval(() => {
      const slide = this.state.width + 100;
      this.state.width === 800
        ? this.setState({
            width: 0
          })
        : this.setState({
            width: slide
          });
    }, 7000);
  };
  componentWillUnmount(){
      // clearing the intervals
      if(this.sliderInterval) clearInterval(this.sliderInterval)
      if(this.animateInterval) clearInterval(this.animateInterval)
  }