Question

我有一个组件每4秒更换一次图像，如下所示：

state = {
  images: this.props.items,
  imageIndex: 0,
}
componentDidMount() {
  this.interval = setInterval(() => this.changeImage(), 4000)
}
changeImage = () => {
  const { imageIndex, images } = this.state
  if (imageIndex === images.length - 1) {
    this.setState({ imageIndex: 0 })
  } else {
    this.setState({ imageIndex: imageIndex + 1 })
  }
}
render() {
  const { images, imageIndex } = this.state
  return <img src={images[imageIndex]} />
}

该组件用于页面上的6个点。

问题是几分钟后，风扇继续运转，电脑变热了。我不知道这是由于CPU使用量增加还是内存泄漏造成的。

setInterval是否有替代方法（以预定义的间隔执行重复任务），同时使用较少的计算机资源？

Answer 1

为此目的使用setInterval没有任何内在错误。但是你应该确保在卸载组件时清除间隔！为此目的，有一个名为clearInterval的函数。这很可能是您性能问题的根源。

所以我建议这样的事情：

componentWillUnmount() {
  clearInterval(this.interval);
}

Answer 2

尝试setTimeout：

function myFn() {
  setTimeout(myFn, 4000);
}
myFn();

替代使用较少资源的setInterval

2 个答案: