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.

Component und PureComponent haben einen Unterschied

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.

Flache Vergleich 101

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.

Niemals ändern

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.

Haben Sie Leistungsprobleme?

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

Andere Lösungen Lösung

Keine Werte in der Renderfunktion binden

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)
  }
  ...
}

Leiten Sie keine Daten in der Render-Methode ab

Ü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!