Was ist die genaue Verwendung von ComponentWillUpdate in ReactJS?

Question

Ich bin neu in diesem ReactJS und begann den Component Lifecycle zu lernen. Jetzt habe ich Zweifel über die componentWillUpdate und componetDidUpdate. Ich weiß, dass, sobald Sie senden return true von Funktion, wird es componentWillUpdate aufrufen. Sobald die Komponente aktualisiert wurde, ruft an.

Meine Frage ist, sind wir wirklich etwas in der componetWillUpdate Funktion? Ich hoffe, wir können setState nicht auch in dieser Funktion verwenden. Was genau ist die Funktion componentWillUpdate? Wann wird es nützlich sein?

Answer 1

Die KomponenteWillUpdate gibt Ihnen die Möglichkeit, die Komponente zu manipulieren, bevor sie neue Requisiten oder Zustand erhält. Ich benutze es normalerweise, um Animationen zu machen. Sagen wir, ich möchte ein Element sanft aus der Ansicht verblassen, bevor ich das dom entferne. Das hilft.

componentWillUpdate : function(newProps,newState){ 
    if(!newState.show){ 
     $(ReactDOM.findDOMNode(this.refs.elem)).css({'opacity':'1'}); 
    } 
    else{ 
     $(ReactDOM.findDOMNode(this.refs.elem)).css({'opacity':'0'});; 
    } 
}, 
componentDidUpdate : function(oldProps,oldState){ 
    if(this.state.show){ 
     $(ReactDOM.findDOMNode(this.refs.elem)).css({'opacity':'1'}); 
    } 
    else{ 
     $(ReactDOM.findDOMNode(this.refs.elem)).css({'opacity':'0'});; 
    } 
} 

https://jsfiddle.net/zupoj3x6/

Einer der vielen vielen Anwendungsfällen besonders wenn es um Animationen kommt. Die Idee ist, sich auf den Zustandswechsel vorzubereiten. Die Herstellung kann in vielerlei Hinsicht sein,

• Sie könnten eine Variable gesetzt werden soll, die für die für diesen besonderen Zustand machen benötigt werden könnten
• Sie möchten Ihre divs oder

• Versand Ereignisse animieren Löschen/setzen Sie Ihre Geschäfte.

  Endlose Anwendungsfälle.