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

Question

我正在尝试将我的应用程序迁移到 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 静态函数，或者我是否必须以完全不同的方式处理此问题？

Answer 1

正如@Kyle 所提到的，这不属于 getDerivedStateFromProps，但为什么您可以在 componentDidUpdate.

中安全地执行此操作可能不是很明显

之所以可以，是因为您只是在清除和设置计时器，在 React 更新 DOM 并完成执行之前，这不会影响任何事情。因此，如果您在预渲染 componentWillReceiveProps 或 post-更新 componentDidUpdate:

中执行此操作没有区别

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

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

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

How to appropriately migrate from componentWillReceiveProps to getDerivedStateFromProps when 'this' is being used

javascript

static

reactjs

react-lifecycle