cas d'utilisation de componentDidUpdate vs componentWillReceiveProps dans react

Question

C'est ainsi que nous utilisons componentWillReceiveProps

componentWillReceiveProps(nextProps) {
  if(nextProps.myProp !== this.props.myProps) {
    // nextProps.myProp has a different value than our current prop
  }
}

C'est très similaire à componentDidUpdate

componentDidUpdate(prevProps) {
  if(prevProps.myProps !== this.props.myProp) {
    // this.props.myProp has a different value
    // ...
  }
}

Je peux voir quelques différences, comme si je fais setState dans componentDidUpdate, le rendu se déclenchera deux fois, et l'argument pour componentWillReceiveProps est nextProps, alors que l'argument pour componentDidUpdate est prevProp, mais sérieusement je ne sais pas quand les utiliser. J'utilise souvent componentDidUpdate mais avec prevState, par exemple pour changer l'état d'une liste déroulante et appeler l'API.

eg.

componentDidUpdate(prevProps, prevState) {
      if(prevState.seleted !== this.state.seleted) {
        this.setState({ selected: something}, ()=> callAPI())
      }
    }

Answer 1

La principale différence entre les deux est la suivante :

• Quand ils sont appelés dans le cycle de vie d'un composant
• Comment il met à jour le composant state

Quand sont-ils appelés ?

Comme les noms le suggèrent - et comme vous le savez probablement puisque vous avez mentionné "si je fais setState dans componentDidUpdate, le rendu se déclenchera deux fois" -, l'utilisation de la fonction de rendu n'est pas la même. componentDidUpdate s'appelle après le composant se met à jour (réception de nouveaux accessoires ou d'un nouvel état). C'est pourquoi les paramètres de cette fonction sont prevProps y prevState .

Donc si tu voulais faire quelque chose antes de le composant a reçu de nouveaux props, vous utiliseriez componentWillReceiveProps et si tu voulais faire quelque chose après s'il a reçu de nouveaux accessoires ou un nouvel état, vous utiliseriez componentDidUpdate .

Comment mettent-ils à jour state ?

La principale différence ici est :

• componentWillReceiveProps mettra à jour l'état de manière synchrone
• componentDidUpdate mettra à jour l'état de manière asynchrone .

Cela peut être important car il y a quelques problèmes qui peuvent survenir lorsque vous essayez de synchroniser l'état avec d'autres parties de votre composant.