In welchen Fällen verursacht der setState() KEINE erneute Wiedergabe in einer React Component?

Question

Ich weiß, dass normalerweise jede Änderung in den Requisiten oder der Zustand einer React Component bewirkt, dass es neu gerendert wird, aber in welchen Szenarien kann ein setState() Aufruf erfolgen und nicht zu einem erneuten Rendern führen?

Answer 1

Beim Vererben von plain React.Component wird React standardmäßig render() für die Komponente aufrufen, wenn entweder die Elternkomponente neu rendert oder setState in der Komponente aufgerufen wird.

Wenn Sie jedoch sollteComponentUpdate() in Ihrer React-Komponente implementieren, können Sie den Aktualisierungszyklus kurzschließen. Dies ist nützlich, wenn Sie nur eine begrenzte Anzahl von Requisiten haben, die Grundwerte sind (string, number, bool) oder wenn Sie mit unveränderlichen Datenstrukturen arbeiten. Dann können Sie einfach so etwas tun:

shouldComponentUpdate(nextProps, nextState) { 
    return nextState.name !== this.state.name // Don't re-render if name is equal 
} 

Die Standardimplementierung von shouldComponentUpdate() ist

shouldComponentUpdate(nextProps, nextState) { 
    return true; 
} 

Es ist auch möglich, von React.PureComponent zu erben, die im Grunde flachen Vergleich Ihrer Requisiten implementiert und Zustand.

Ich würde die folgenden Artikel für eine tiefer gehende Antwort empfehlen: https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation und https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578 (Vor allem der Abschnitt genannt (PureComponent und shouldComponentUpdate)

Es ist auch nützlich, den Unterschied zwischen zu verstehen, was passiert, wenn die render-Funktion aufgerufen wird und was der Versöhnung Algorithmus tut, um das DOM zu aktualisieren. Mehr zu diesem here.

Answer 2

definitionsgemäß this.setState verursacht eine rerender. Wenn Sie ohne rerender this.state ändern wollen, ist nichts, was man fro stoppen Ich mache eine normale manuelle Zuweisung.

this.setState({name: 'newname'}) //changes this.state with render 
this.state.name = 'newname' //no rerender, but still changes this.state