Wie man überprüft, welche Requisiten sich in componentWillReceiveProps geändert haben

Question

Gibt es eine Möglichkeit zu überprüfen, welche Requisiten sich innerhalb componentWillReceiveProps geändert haben (ohne alte Requisiten woanders zu lagern)?

heißt

componentWillReceiveProps (newProps) { 
    if(/* newProps.profileImage is different to previous props */) /* do stuff */ 
} 

Answer 1

Zu dem Zeitpunkt, dass diese lifecycle method genannt wird, this.props zum vorherigen Satz von Stützen beziehen.

Um eine einzelne Eigenschaft foo auf den neuen Requisiten mit der gleichen Eigenschaft auf den alten zu vergleichen, können Sie einfach newProps.foo mit this.props.foo vergleichen. Also in Ihrem Beispiel:

componentWillReceiveProps (newProps) { 
    if(newProps.profileImage !== this.props.profileImage) /* do stuff */ 
} 

Answer 2

Sie können immer noch zu this.props.profileImage vergleichen, weil es erst aktualisiert wird erhalten nach componentWilReceiveProps aufgerufen wird. Zum Beispiel in den docs ist dieses Beispiel verwendet:

componentWillReceiveProps: function(nextProps) { 
    this.setState({ 
    likesIncreasing: nextProps.likeCount > this.props.likeCount 
    }); 
} 

Answer 3

Ja, Sie können überprüfen, ob eine bestimmte Requisite geändert wurde. this.props bezieht sich auf die Requisiten vor sie haben sich geändert. So zum Beispiel:

componentWillReceiveProps(newProps) { 
    if(newProps.profileImage != this.props.profileImage) { 
    /* do stuff */ 
    } 
} 

Hinweis: Die Stützen müssen nicht jedes Mal ändern die Methode aufgerufen wird, so lohnt es sich, zu testen, um zu sehen, welche geändert prop.

Answer 4

Sie können auch alle Requisiten durchlaufen, um zu sehen, was sich geändert hat.

componentWillReceiveProps(nextProps) { 
    for (const index in nextProps) { 
    if (nextProps[index] !== this.props[index]) { 
     console.log(index, this.props[index], '-->', nextProps[index]); 
    } 
    } 
}