Welche Leistungsoptimierungen wurden an Reaktionskomponenten vorgenommen?

Die Komponentenleistungsoptimierung von React umfasst: 1. Verwenden Sie so viele zustandslose Funktionen wie möglich, um Komponenten zu erstellen. 2. Teilen Sie Komponenten in Unterkomponenten auf, um eine detailliertere Kontrolle über Komponenten zu erhalten. 3. Verwenden Sie PureRender, um das Rendern von Änderungen zu minimieren . Unveränderlich verwenden.

Zu den Komponentenleistungsoptimierungen von React gehören:

1. Verwenden Sie so viele zustandslose Funktionen wie möglich, um Komponenten zu erstellen.

Zustandslose Komponenten haben nur zwei Parameter: Requisiten und Kontext. Es gibt keinen Status und keine Lebenszyklusmethode. Die Komponente selbst ist die Rendermethode in der zustandsbehafteten Komponentenkonstruktionsmethode.

Zustandslose Komponenten sollten verwendet werden, wo immer dies sinnvoll ist. Zustandslose Komponenten erstellen beim Aufruf keine neuen Instanzen wie React.createClass und ES6-Klasse. Sie behalten beim Erstellen immer eine Instanz bei, wodurch unnötige Überprüfungen und Speicherzuweisungen vermieden und eine interne Optimierung erreicht werden.

2. Teilen Sie die Komponente in Unterkomponenten auf und haben Sie eine detailliertere Kontrolle über die Komponente.

Verwandte wichtige Konzepte: Reine Funktion Gibt immer die gleiche Ausgabe zurück: Gegenbeispiele sind beispielsweise Math.random(), New Date()

Der Prozess hat keine Nebenwirkungen: das heißt, er kann den externen Zustand nicht ändern

Es gibt keine zusätzliche Zustandsabhängigkeit: das heißt , der Zustand innerhalb der Methode kann nur während des Lebenszyklus der Methode existieren Speicher wird gespeichert, was bedeutet, dass gemeinsam genutzte Variablen nicht innerhalb von Methoden verwendet werden können.

Reine Funktionen sind sehr praktisch für Tests und Refactoring auf Methodenebene. Dadurch kann das Programm eine gute Skalierbarkeit und Anpassungsfähigkeit aufweisen. Reine Funktionen sind die Grundlage für funktionale Ausdrücke.

Die React-Komponente selbst ist eine reine Funktion, das heißt, sie übergibt die angegebenen Requisiten, um ein bestimmtes virtuelles DOM zu erhalten, und der gesamte Prozess ist vorhersehbar.

Spezifische Methode

Teilen Sie die Komponente in Unterkomponenten auf, um eine detailliertere Kontrolle über die Komponenten zu erhalten. Durch die Aufrechterhaltung eines reinen Zustands können Methoden oder Komponenten fokussierter, kleiner, unabhängiger, wiederverwendbarer und testbarer werden.

3. Verwenden Sie PureRender, um das Rendern von Änderungen zu minimieren

Verwandte wichtige Konzepte: PureRenderPure bezieht sich in PureRender auf die Erfüllung der Bedingungen reiner Funktionen, d. h. Komponenten werden von denselben verwendet Requisiten und Zustandsrendering erzielen das gleiche Ergebnis.

Die Implementierung von PureRender in React erfordert die Neuimplementierung der Lebenszyklusmethode ShouldComponentUpdate. ShouldComponentUpdate ist eine spezielle Methode, die die zu aktualisierenden Requisiten und Zustände empfängt. Ihr Kern besteht darin, eine korrekte Komponentenwiedergabe durchzuführen. Wenn sie „false“ zurückgibt, wird die Lebenszyklusmethode nicht mehr nach unten ausgeführt; wenn sie „true“ zurückgibt, wird die Ausführung nach unten fortgesetzt. PureRender

PureRender的Pure即是指满足纯函数的条件，即组件被相同的props和state渲染会得到相同的结果。

在React中实现PureRender需要重新实现shouldComponentUpdate生命周期方法。shouldComponentUpdate是一个特别的方法，它接收需要更新的props和state，其本质是用来进行正确的组件渲染。当其返回false的时候，不再向下执行生命周期方法；当其返回true时，继续向下执行。

组件在初始化过程中会渲染一个树状结构，当父节点props改变的时候，在理想情况下只需渲染一条链路上有关props改变的节点即可；但是，在默认情况下shouldComponentUpdate方法返回true,React会重新渲染所有的节点。

有一些官方插件实现了对shouldComponentUpdate的重写，然后自己也可以做一些代码的优化来运用PureRender。

具体办法

(1) 运用PureRender

使用官方插件react-addons-pure-render-mixin实现对shouldComponentUpdate的重写

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }
  render() {
    return <div className={this.props.className}>foo</div>
  }
}

它的原理是对object(包括props和state)做浅比较，即引用比较，非值比较。比如只用关注props中每一个是否全等(如果是prop是一个对象那就是只比较了地址，地址一样就算是一样了)，而不用深入比较。

(2)优化PureRender

避免无论如何都会触发shouldComponentUpdate返回true的代码写法。

避免直接为prop设置字面量的数组和对象

就算每次传入的数组或对象的值没有变，但它们的地址也发生了变化。

如以下写法每次渲染时style都是新对象都会触发shouldComponentUpdate为true:

<Account style={{color: &#39;black&#39;}} />

改进办法：将字面量设置为一个引用:

const defaultStyle = {};
<Account style={this.props.style || defaultStyle} />

避免每次都绑定事件

如果这样绑定事件的话每次都要生成一个新的onChange属性的值:

render() {
  return <input onChange={this.handleChange.bind(this)} />
}

应该尽量在构造函数内进行绑定，如果绑定需要传参那么应该考虑抽象子组件或改变现有数据结构:

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}
handleChange() {
  ...
}
render() {
  return <input onChange={this.handleChange} />
}

在设置子组件的时候要在父组件级别重写shouldComponentUpdate

4.运用immutable

JavaScript中对象一般是可变的，因为使用引用赋值，新的对象的改变将影响原始对象。为了解决这个问题是使用深拷贝或者浅拷贝，但这样做又造成了CPU和内存的浪费。

Immutable data

Die Komponente rendert während des Initialisierungsprozesses eine Baumstruktur. Wenn sich die Requisiten des übergeordneten Knotens ändern, muss sie im Idealfall nur den Knoten rendern, der sich auf die Requisitenänderung auf einem Link bezieht. Standardmäßig gibt die Methode „sollteComponentUpdate“ jedoch „true“ zurück Alle Knoten neu rendern. 🎜🎜Es gibt einige offizielle Plug-Ins, die das Umschreiben von shouldComponentUpdate implementieren, und dann können Sie auch einige Codeoptimierungen durchführen, um PureRender zu verwenden. 🎜🎜Spezifische Methode🎜🎜(1) Verwenden Sie PureRender🎜🎜Verwenden Sie das offizielle Plug-in „react-addons-pure-render-mixin“, um shouldComponentUpdate neu zu schreiben🎜rrreee🎜It The Das Prinzip besteht darin, einen oberflächlichen Vergleich von Objekten (einschließlich Requisiten und Status) durchzuführen, dh einen Referenzvergleich und einen Nichtwertvergleich. Sie müssen beispielsweise nur darauf achten, ob die einzelnen Requisiten übereinstimmen (wenn es sich bei der Requisite um ein Objekt handelt, wird nur die Adresse verglichen, und dieselbe Adresse wird als gleich betrachtet), ohne einen detaillierten Vergleich durchzuführen. 🎜🎜(2) Optimieren Sie PureRender🎜🎜Vermeiden Sie das Schreiben von Code, der shouldComponentUpdate auslöst, um auf jeden Fall „true“ zurückzugeben. 🎜🎜Vermeiden Sie es, literale Arrays und Objekte direkt für prop festzulegen🎜🎜Auch wenn sich der Wert des übergebenen Arrays oder Objekts nicht jedes Mal ändert, haben sich auch deren Adressen geändert. 🎜🎜Wenn es sich bei dem Stil um ein neues Objekt handelt, das wie folgt geschrieben ist, wird ShouldComponentUpdate jedes Mal, wenn es gerendert wird, als wahr ausgelöst:🎜rrreee🎜Verbesserungsmethode: Setzen Sie das Literal auf eine Referenz:🎜rrreee🎜Vermeiden Sie die Bindung des Ereignisses jedes Mal🎜 🎜Wenn Sie es so binden: Für Ereignisse muss jedes Mal ein neuer Wert des onChange-Attributs generiert werden: 🎜rrreee🎜 Sie sollten versuchen, die Bindung innerhalb des Konstruktors durchzuführen, wenn die Bindung die Übergabe von Parametern erfordert Ziehen Sie in Betracht, Unterkomponenten zu abstrahieren oder den aktuellen Status zu ändern:🎜rrreee🎜Wenn Sie untergeordnete Komponenten einrichten, schreiben Sie shouldComponentUpdate auf der Ebene der übergeordneten Komponente neu🎜🎜🎜4 JavaScript ist aufgrund der Verwendung von Referenzzuweisungen im Allgemeinen veränderbar. Änderungen am neuen Objekt wirken sich auf das ursprüngliche Objekt aus. Um dieses Problem zu lösen, wird Deep Copy oder Shallow Copy verwendet, was jedoch zu einer Verschwendung von CPU und Speicher führt. 🎜🎜Unveränderliche Daten löst dieses Problem sehr gut. 🎜

Unveränderliche Daten sind Daten, die nach ihrer Erstellung nicht mehr geändert werden können. Durch Ändern, Hinzufügen oder Löschen eines unveränderlichen Objekts wird ein neues unveränderliches Objekt zurückgegeben. Das Prinzip der unveränderlichen Implementierung ist eine persistente Datenstruktur. Das heißt, wenn alte Daten zur Erstellung neuer Daten verwendet werden, ist garantiert, dass die alten und neuen Daten gleichzeitig verfügbar und unverändert sind. Um den durch tiefes Kopieren verursachten Leistungsverlust zu vermeiden, verwendet Immutable gleichzeitig die strukturelle gemeinsame Nutzung. Wenn sich also ein Knoten im Objektbaum ändert, werden nur dieser Knoten und der davon betroffene übergeordnete Knoten sowie andere Knoten geändert werden geteilt.

Verwandte Lernempfehlungen: Javascript-Lern-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Leistungsoptimierungen wurden an Reaktionskomponenten vorgenommen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!