reactjs - 如何使用重构库中的 HoC 创建 React 的新静态函数 getDerivedStateFromProps 作为生命周期方法？

Question

最近有消息称 React 很快将弃用 componentWillReceiveProps，取而代之的是新的静态函数 getDerivedStateFromProps。 See more here

我目前正在将我的应用程序迁移到这个新的 API，但我遇到了 getDerivedStateFromProps 的问题，因为我正在为高阶组件使用重组库。我们通过库的生命周期对象使用 componentWillReceive Prop 。

所以在转向新的 API 之前，我有这个:

export function someHoC () {
  return compose(
    lifecycle({
      componentWillReceiveProps (nextProps) {
        const { fetch } = nextProps
          if (shouldFetch(this.props, nextProps)) {
             fetch()
          }
      }
    })
  )
}

现在已更改为以下内容:

export function someHoC () {
  return compose(
    lifecycle({
      getDerivedStateFromProps (nextProps) {
          const { fetch } = nextProps
          if (shouldFetch(this.props, nextProps)) {
             fetch()
          }
      }
    })
  )
}

但是，getDerivedStateFromProps 需要是静态的，所以我收到了关于它的警告并且不知道如何处理它。

warning.js?7f205b4:33 Warning: lifecycle(MyComponent): getDerivedStateFromProps() is defined as an instance method and will be ignored. Instead, declare it as a static method.

如何将它作为静态生命周期方法传递到我的组件中？

Answer 1

如果您想使用getDerivedStateFromProps，您需要将其声明为static method。 :

static getDerivedStateFromProps() {...}

显然，这使得 getDerivedStateFromProps 成为静态的，这意味着您不能像调用 componentWillReceiveProps 那样调用它。

如果静态方法对您不起作用，您可以将您的逻辑移动到 componentDidUpdate 中以消除警告。但是，如果您从此方法调用 setState()，这可能会导致额外的渲染。根据解析 fetch() 时发生的情况，这可能对您有用。

您还可以将 componentWillReceiveProps 替换为 UNSAFE_componentWillReceiveProps ( docs )，其工作方式相同。但是，由于即将推出的异步渲染功能，this could cause some issues .