怎么使用ComponentWillUnmount删除React.js中的setInterval

本教程将介绍如何使用ComponentWillUnmount删除React.js中的setInterval的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

问题描述

我有两个间隔在主页中运行，当我移动到其他页面时，我收到内存泄漏错误，我知道我应该使用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
  }

推荐答案

基本上，您需要的是在componentWillUnmount中使用clearInterval函数。

为了使用它，您需要保存您的间隔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)
  }

好了关于怎么使用ComponentWillUnmount删除React.js中的setInterval的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。