javascript - 当使用'this'时如何从componentWillReceiveProps适当地迁移到getDerivedStateFromProps

我正在尝试迁移我的应用程序以使用React v16.3。* API，并且很难摆脱componentWillReceiveProps。我有依赖于它的组件，并在其中调用组件的其他功能。

因为getDerivedStateFromProps是静态的，所以我再也不能轻易做到这一点，并且需要适当的帮助。特别是在这种情况下，我有一个超时功能，每当收到新道具时，它就会重置。当前如下：

componentWillReceiveProps (nextProps) {
  clearTimeout(this.timeout)
  this.timeout = setTimeout(() => {
    this.dismiss(null, nextProps)
  }, nextProps.timer)
}

如您所见，一旦对this.timeout进行了更改，我将无法再访问this.dismiss和getDerivedStateFromProps。我该如何处理？有没有办法将其更改为getDerivedStateFromProps静态函数，或者我必须采用完全不同的方式进行此操作？

最佳答案

正如@Kyle提到的那样，这不属于getDerivedStateFromProps，但是为什么您可以在componentDidUpdate中安全地执行此操作可能并不立即显而易见。

可以这样做的原因是，您只需要清除和设置计时器，直到React更新了DOM并完成执行后，它才受影响。因此，如果在渲染前componentWillReceiveProps或更新后componentDidUpdate中执行此操作，则没有区别：

componentDidUpdate()
  clearTimeout(this.timeout)
  this.timeout = setTimeout(() => {
    this.dismiss(null, this.props)
  }, this.props.timer)
}

React博客中有一些example migrations可能会有所帮助。