![](/img/trans.png)
[英]In React.js, using componentWillUnmount to remove an event listener, how can I make sure the event listener gets removed?
[英]How to use componentWillUnmount to remove setInterval in React.js
当我移到其他页面时,我有两个运行在主页面上的时间间隔出现内存泄漏错误,并且我知道我应该使用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)
}
您可以使用setState
来保存从setInterval
返回的间隔ID,如下所示:
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;
let 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);
this.setState({ animateInterval: animateInterval});
};
widthSlider = () => {
let sliderInterval = setInterval(() => {
const slide = this.state.width + 100;
this.state.width === 800
? this.setState({
width: 0
})
: this.setState({
width: slide
});
}, 7000);
this.setState({ sliderInterval : sliderInterval });
};
componentWillUnmount(){
clearInterval(this.state.sliderInterval);
clearInterval(this.state.animateInterval);
}
您必须将间隔存储在一些变量中
例:
this.myinterval = setInterval(...) or this.setState({ myinterval : setInterval(...) })
在钩子“ componenWillMount”中清除它:
clearInterval(this.myinterval) or clearInterval(this.state.myinterval)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.