Question

我想在React组件中重复调用一个函数，从安装时开始，直到卸载，并使其与webpack HMR一起工作（热重新加载）。

最简单的方法是按照ReactJS文档中的建议在componentDidMount中设置一个间隔：[1]：https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

componentDidMount () {
  const number = Math.floor(Math.random() * 1000) + 1
  setInterval(() => console.log('Component ' + number.toString()), 5000)
}

我已搜索但无法找到解决方案来清除webpack HMR为更新的组件调用componentDidMount之前的间隔。这意味着每次模块热重新加载时我们都有一个新的间隔。

注意：在Webpack重新绑定之前不会调用componentWillUnmount

更新：当正确设置HMR时，重新绑定应拨打componentWillUnmount

使用webpack HMR实现重复延迟函数调用的最佳方法是什么？

Answer 1

抱歉，我刚刚发现问题来自我的webpack HMR实现，该实现没有明确卸载热路由。

如果您遇到同样的问题，可能需要检查此提交，请查看src / main.js diff文件： https://github.com/davezuko/react-redux-starter-kit/commit/a602625b20ade172c829b583882ae44c150e738c

React组件中的setInterval和热重载（Webpack）

1 个答案: