Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Unterschieds zwischen Component und PureComponent
Dieses Mal werde ich Ihnen den Unterschied zwischen der Verwendung von Component und PureComponent ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Component und PureComponent? Schauen Sie mal rein.
Ich fing an, auf PureCompoent
umzusteigen, weil es eine leistungsfähigere Version von Component
war. Obwohl sich herausstellt, dass dies wahr ist, ist diese Leistungssteigerung mit einigen Einschränkungen verbunden. Lassen Sie uns etwas tiefer in PureComponent
eintauchen und verstehen, warum wir es verwenden sollten.
Bis auf die Bereitstellung einer shouldComponentUpdate
-Methode mit flachem Vergleich sind PureComponent
und Component
grundsätzlich identisch. Wenn sich entweder props
oder state
ändert, führt PureComponent
einen flachen Vergleich zwischen props
und state
durch. Andererseits vergleicht Component nicht props
und state
im aktuellen und nächsten Status. Daher wird die Komponente bei jedem Aufruf von shouldComponentUpdate
standardmäßig neu gerendert.
Beim Vergleich des vorherigen und nächsten props
und state
prüft der flache Vergleich, ob der ursprüngliche Wert den gleichen Wert hat (zum Beispiel: 1 == 1
oder ture==true
), ob das Array und die -Objekt--Referenz identisch sind.
Sie haben vielleicht gehört: Ändern Sie keine Objekte und Arrays in props
und state
. Wenn Sie Objekte in Ihrer übergeordneten Komponente ändern, werden dies auch Ihre „reinen“ Unterkomponenten tun nicht aktualisiert werden. Obwohl der Wert geändert wurde, vergleicht die Unterkomponente, ob die vorherige Referenz von props
dieselbe ist, und es wird kein tiefer Vergleich durchgeführt.
Im Gegensatz dazu können Sie ein neues Objekt zurückgeben, indem Sie die es6-Zuweisungsmethode oder den Array-Erweiterungsoperator verwenden oder eine Bibliothek eines Drittanbieters verwenden, um Unveränderlichkeit zu erreichen.
Der Vergleich von Grundwerten und Objektreferenzen ist ein kostengünstiger Vorgang. Wenn Sie eine Liste mit untergeordneten Objekten haben und eines davon aktualisiert wird, ist die Überprüfung ihrer props
und state
viel schneller als das erneute Rendern jedes untergeordneten Knotens
Angenommen, Sie haben eine Liste von Elementen und jedem Element wird ein eindeutiger Parameter an die übergeordnete Methode übergeben. Um Parameter zu binden, können Sie Folgendes tun:
<CommentItem likeComment={() => this.likeComment(user.id)} />
Dieses Problem führt dazu, dass jedes Mal, wenn die Rendermethode der übergeordneten Komponente aufgerufen wird, eine neue Funktion erstellt und an likeComment
übergeben wird. Dies hat den Nebeneffekt, dass jede untergeordnete Komponente props
geändert wird, was dazu führt, dass sie alle neu gerendert werden, auch wenn sich die Daten selbst nicht geändert haben.
Um dieses Problem zu lösen, übergeben Sie einfach einen Verweis auf die Prototypmethode der übergeordneten Komponente an die untergeordnete Komponente. Die likeComment
-Eigenschaft der untergeordneten Komponente hat immer die gleiche Referenz, sodass keine unnötigen erneuten Renderings erforderlich sind.
<CommentItem likeComment={this.likeComment} userID={user.id} />
Erstellen Sie dann eine Klassenmethode in der untergeordneten Komponente, die auf das eingehende Attribut verweist:
class CommentItem extends PureComponent { ... handleLike() { this.props.likeComment(this.props.userID) } ... }
Überlegen Sie, wie Ihre Konfigurationskomponente angezeigt wird Die zehn Lieblingsartikel des Benutzers aus einer Artikelserie.
render() { const { posts } = this.props const topTen = posts.sort((a, b) => b.likes - a.likes).slice(0, 9) return //... }
Jedes Mal, wenn die Komponente erneut gerendert wird, erhält topTen
eine neue Referenz, auch wenn sich posts
nicht geändert hat und die abgeleiteten Daten dieselben sind. Dadurch wird die Liste unnötig neu gerendert.
Sie können dieses Problem lösen, indem Sie Ihre abgeleiteten Daten zwischenspeichern. Legen Sie beispielsweise die abgeleiteten Daten in Ihrer Komponente state
so fest, dass sie nur aktualisiert werden, wenn Beiträge aktualisiert werden.
componentWillMount() { this.setTopTenPosts(this.props.posts) } componentWillReceiveProps(nextProps) { if (this.props.posts !== nextProps.posts) { this.setTopTenPosts(nextProps) } } setTopTenPosts(posts) { this.setState({ topTen: posts.sort((a, b) => b.likes - a.likes).slice(0, 9) }) }
Wenn Sie Redux verwenden, sollten Sie die Verwendung von „reselect“ in Betracht ziehen, um „Selektoren“ zu erstellen, um abgeleitete Daten zu kombinieren und zwischenzuspeichern.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.
Empfohlene Lektüre:
Detaillierte Erläuterung der Lebenszyklusnutzung in React
Detaillierte Erläuterung der Komponentenkommunikationsnutzung in React
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Unterschieds zwischen Component und PureComponent. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!