Question

我是React的新手，正在经历React的生命周期，但是我对componentWillReceiveProps的使用感到有些困惑。

在这种情况下，任何人都可以向我解释。

谢谢。

Answer 1

将道具传递到组件时调用此方法。可以用来从新接收到的道具更新组件的内部状态。

请参阅此链接以更好地理解。 https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/component_will_receive_props.html

但是，它已在React 16中弃用。

Answer 2

因此，每次组件接收到新的prop时都会调用componentWillReceiveProps，它用于更新组件的状态。

例如：

export default class ExampleComponent extends Component {
  constructor(props) {
    super(props);

    state = {
      stateExample: this.props,
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props !== nextProps) {
      this.setState(nextProps)
    }
  }
}

请注意，自从反应16开始，不推荐使用 componentWillReceiveProps 。您应该开始使用 getDerivedStateFromProps 。在上面的同一示例中，将是这样的：

static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.stateExample !== prevState.stateExample) {
    return { stateExample: nextProps.stateExample }
  } else return null;
}

Answer 3

从16.3.0开始，目前不推荐使用

componentWillReceiveProps。但是，在此版本之前，您将执行副作用以及根据组件接收到的道具更改来更新状态。您仍然可以将这种生命周期方法用于相同的目的，但是最好遵循最新的做法。

截至react docs：

使用这种生命周期方法通常会导致错误和不一致


如果您需要因道具更改而产生副作用（例如，数据获取或动画），请使用componentDidUpdate   生命周期。

如果仅当prop更改时才使用componentWillReceiveProps来重新计算某些数据，请改用备忘录助手。

如果您在prop更改时使用componentWillReceiveProps来“重置”某些状态，请考虑使组件完全受控或   完全由钥匙来控制。

从v16.3.0开始，建议在componentDidUpdate中执行副作用以响应道具/状态更改，并使用memoization/getDerivedStateFromProps根据道具更改设置状态。

有关更多信息，您必须参考react docs

Answer 4

如果需要在达到所需道具后重写组件，则可以使用它

阅读本文，可能会有帮助

Will componentWillRecieveProps run every time props are received

反应'componentWillReceiveProps'使用

4 个答案: