1

我想在 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 之前清除间隔的解决方案。这意味着每次模块热重新加载时我们都有一个新的时间间隔。

注意：componentWillUnmount在 Webpack 重新打包之前不调用

更新：componentWillUnmount正确设置 HMR时应调用重新捆绑

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

4

1 回答 1

0

抱歉，我刚刚发现问题出在我的 webpack HMR 实现上，它没有明确卸载热路由。

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

于 2016-07-22T10:02:21.893 回答