Reagieren - erfassen intermediate in sollteComponentUpdate

Question

Ich muss eine nicht-triviale Berechnung als Teil meiner Implementierung von . Ich muss auch die gleiche Berechnung als Teil der render Implementierung durchführen. Ich würde gerne das Ergebnis der Berechnung in shouldComponentUpdate erfassen und in meiner render Implementierung wiederverwenden können - d. H. Ich möchte vermeiden, denselben Wert zweimal zu berechnen.

Gibt es eine empfohlene Möglichkeit, dies zu implementieren?

Answer 1

Der beste Weg, dies zu tun, ist wahrscheinlich Ihren eigenen setState() Wrapper in Ihrer Komponente wie zu definieren:

setMyState(newProps, newState) { 
    var nonTrivialResult = doStuff(newProps, newState); 
    newState.checkSum = nonTrivialResult; 
    this.setState(newState); 
} 

Und Anruf Diese neue Methode, wo immer Sie anrufen würden setState(), und auch von componentWillReceiveProps.

Der Wrapper hat Zugriff auf alle aktuellen Requisiten und den Status sowie auf alle neuen Requisiten und den Status, den Sie übergeben. Auf diese Weise sollten Sie in der Lage sein, beliebige Berechnungen durchzuführen.

Möglicherweise müssen Sie auch doStuff() von getInitialState() für die erste Runde anrufen.

In diesem Setup wird Ihre Berechnung nur einmal bei jedem Rendervorgang durchgeführt. Und Sie können das Ergebnis in shouldComponentUpdate() überprüfen.

Im Lebenszyklus reagieren wird shouldComponentUpdate() nach componentWillReceiveProps() genannt, so sollte diese Arbeit ..

Answer 2

Können Sie es bei componentWillReceiveProps behandeln und den Zustand dort mit dem berechneten Ergebnis aktualisieren? (Sorry soll dies eher wie ein Kommentar sein, aber ich habe nicht genug rep)