javascript - shouldComponentUpdate 中的变异状态 react 16.6.3

Question

自从 React 弃用了他们的许多 Lifecycle Methods我发现，当我想增加 component 的本地状态时使用 redux 和 connect 我正在使用 componentDidUpdate。问题是只有 prevProps, prevState 被传递给这个函数。

那意味着我在 shouldComponentUpdate lifeCycle` 中只有 nextProps, nextState。

对我来说，做如下事情本身就是错误的:

  shouldComponentUpdate(nextProps) {
    const { status_status } = nextProps;
    if(status_status === "error") {
      this.props.dispatch(resetStatus());
    }
    return true;
  }

这肯定是一个antiPattern，我不应该这样做。

如何在不使用 shouldComponentUpdate 的情况下获取 nextProps

Answer 1

我遇到了类似的情况，我发现 getDerivedStateFromProps 在这种情况下有用且适合。

static getDerivedStateFromProps(props, state) {
  // now, you may dispatch checking the condition
  // BTW, you will dispatch just using props
  // props.dispatch()
  // this.props.dispatch() // invalid
}

我从 docs 知道这张便条:

If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.

但我只是分享我的经验，只有在 getDerivedStateFromProps 工作的情况下。

但是，我也建议您先使用 componentDidUpdate Hook 。如果一切都对你有利，那就坚持下去。或者，如果您还面临使用 componentDidUpdate 并且使用 getDerivedStateFromProps 感觉不错，那么您可以发表您的意见和想法作为答案。