Über welche Algorithmen verfügt das React-Framework? Detaillierte Erläuterung des Algorithmus des Reaktionsframeworks

In diesem Artikel werden hauptsächlich die Prinzipien des reagieren-Frameworks ausführlich erläutert. Schauen wir uns jetzt auch diesen Artikel an

Ich arbeite seit mehr als 2 Jahren an React. Ich liebe und hasse dieses Framework. Jeder kennt seine Vorteile, aber seine Mängel werden nach und nach aufgedeckt Bei großen Projekten wird in Kombination mit Frameworks von Drittanbietern wie Redux und ReactRouter die Menge an komplexem Geschäftscode sehr groß (der Front-End-Code ist häufig 1,5-mal so groß wie zuvor). Wenn das zugrunde liegende Design in der Anfangsphase nicht gut ist, stehen Sie häufig vor dem Problem einer geringen Entwicklungseffizienz. Im Folgenden werden einige Kernkonzepte des React-Frameworks zusammengefasst. Ich hoffe, dass es für alle hilfreich ist:

React-Diff-Algorithmus

Reacts diff-Algorithmus ist Virtual DOM Der Grund dafür, dass man sich am meisten auf Eigenwilligkeit verlässt, ist, dass wir alle wissen, dass die Leistung einer Seite im Allgemeinen von der Rendering-Geschwindigkeit und der Anzahl der Renderings abhängt. Wie kann der diff-Algorithmus für die Entwicklung optimal genutzt werden? Schauen wir uns zunächst an, wie es funktioniert.

Traditioneller Diff-Algorithmus

Berechnen Sie die minimalen Operationen, die zum Konvertieren einer Baumstruktur in eine andere Baumstruktur erforderlich sind. Der traditionelle Diff-Algorithmus vergleicht Knoten nacheinander durch Schleifenrekursion, was ineffizient und komplex ist O(n^3), wobei n die Gesamtzahl der Knoten im Baum ist. Mit anderen Worten: Wenn Sie 1.000 Knoten anzeigen möchten, müssen Sie Milliarden von Vergleichen nacheinander durchführen. Dieser Leistungsverbrauch ist für Frontend-Projekte nicht akzeptabel.

Kernalgorithmus

Wie oben zu sehen ist, ist die Komplexität des herkömmlichen Diff-Algorithmus O(n^3), was offensichtlich die Leistungsanforderungen nicht erfüllen kann. Und React verwandelt Probleme von O(n^3) Komplexität in Probleme von O(n) Komplexität, indem er mutige Strategien formuliert. Wie hat er es gemacht?

Tree Diff

Es gibt nur sehr wenige ebeneübergreifende Bewegungsvorgänge von DOM-Knoten in der Web-Benutzeroberfläche und können ignoriert werden. React hat eine prägnante und klare Optimierung des Baumalgorithmus vorgenommen, d. h. der hierarchische Vergleich von Bäumen vergleicht nur Knoten auf derselben Ebene. Wie in der Abbildung unten gezeigt:

React verwendet updateDepth, um die Ebene des virtuellen DOM-Baums zu steuern. Es werden nur DOM-Knoten im gleichen Farbfeld verglichen. Das heißt, alle untergeordneten Knoten unter einem übergeordneten Knoten werden mit derselben Farbe verglichen. Wenn festgestellt wird, dass ein Knoten nicht mehr existiert, werden der Knoten und seine Unterknoten vollständig gelöscht und nicht für weitere Vergleiche verwendet. Auf diese Weise ist nur eine Durchquerung des Baums erforderlich, um den Vergleich des gesamten DOM-Baums abzuschließen.

// tree diff算法实现updateChildren: function(nextNestedChildrenElements, transaction, context) {
  updateDepth++;  var errorThrown = true;  try {    this._updateChildren(nextNestedChildrenElements, transaction, context);
    errorThrown = false;
  } finally {
    updateDepth--;    if (!updateDepth) {      if (errorThrown) {
        clearQueue();
      } else {
        processQueue();
      }
    }
  }
}

Warum sollten wir die ebenenübergreifenden Operationen von DOM-Knoten reduzieren?

Wie unten gezeigt, wird der A-Knoten (einschließlich seiner Unterknoten) vollständig auf den D-Knoten verschoben, da React lediglich die Positionstransformation von Knoten auf derselben Ebene und für Knoten auf verschiedenen Ebenen berücksichtigt , es erstellt und löscht sie nur. Wenn der Wurzelknoten feststellt, dass A im untergeordneten Knoten verschwunden ist, zerstört er A direkt. Wenn D feststellt, dass es einen zusätzlichen untergeordneten Knoten A gibt, erstellt er ein neues A (einschließlich untergeordneter Knoten) als untergeordneten Knoten. Zu diesem Zeitpunkt lautet der Ausführungsstatus von React diff: A erstellen -> B erstellen ->

Es kann festgestellt werden, dass, wenn sich ein Knoten über Ebenen hinweg bewegt, der imaginäre Bewegungsvorgang nicht stattfindet, sondern der Baum mit A als Wurzelknoten vollständig neu erstellt wird , ein Vorgang, der sich auf die Leistung React auswirkt.

Komponentenunterschied

Zwei Komponenten mit derselben Klasse erzeugen ähnliche Baumstrukturen, und zwei Komponenten mit unterschiedlichen Klassen erzeugen unterschiedliche Baumstrukturen.

• Wenn es sich um Komponenten des gleichen Typs handelt, fahren Sie mit dem Vergleich gemäß der ursprünglichen Strategie fort virtual DOM tree.

• Wenn nicht, wird die Komponente als dirty component beurteilt, wodurch alle untergeordneten Knoten unter der gesamten Komponente ersetzt werden.

• Für denselben Komponententyp ist es möglich, dass Virtual DOM keine Änderungen vorgenommen wurden. Wenn Sie dies sicher wissen, können Sie viel Zeit für die Diff-Operation sparen React ermöglicht Benutzern die Verwendung von shouldComponentUpdate(), um zu bestimmen, ob die Komponente unterschieden werden muss.

Wie oben gezeigt, wenn component D in component G geändert wird, ändern sich die Strukturen der beiden, auch wenn die beiden component ähnliche Strukturen haben, sobald React feststellt, dass D und G unterschiedliche Arten von Komponenten sind nicht verglichen werden. Löschen Sie stattdessen component D direkt und erstellen Sie component G und seine untergeordneten Knoten neu. Wenn zwei component von unterschiedlichem Typ sind, aber eine ähnliche Struktur haben, wirkt sich React diff zwar auf die Leistung aus, aber wie im offiziellen Blog von React heißt es: Verschiedene Arten von component haben kaum eine Chance auf ähnliche DOM tree, also ist es so Es ist schwierig, dass solche extremen Faktoren einen signifikanten Einfluss auf den Entwicklungsprozess haben.

Element diff

Für eine Gruppe untergeordneter Knoten auf derselben Ebene können sie durch eine eindeutige ID unterschieden werden. React schlägt eine Optimierungsstrategie vor: Entwickler dürfen eindeutige Schlüssel hinzufügen, um dieselbe Gruppe von untergeordneten Knoten auf derselben Ebene zu unterscheiden. Obwohl es sich nur um eine kleine Änderung handelt, hat sich die Leistung weltbewegend verändert!

Die in der neuen und alten Sammlung enthaltenen Knoten sind wie in der folgenden Abbildung dargestellt. Durch den Vergleich der neuen und alten Sammlung wird festgestellt, dass die Knoten in der neuen und alten Sammlung sind Die gleichen Knoten müssen nicht gelöscht und erstellt werden. Sie müssen lediglich die Positionen der Knoten im alten Satz verschieben und sie auf die Positionen der Knoten im neuen Satz aktualisieren Das von React gegebene Ergebnis ist: B und D führen keine Operationen aus und A und C führen Verschiebungsoperationen aus.

Entwicklungsvorschläge

(1)[basierend auf Tree Diff] Bei der Entwicklung von Komponenten hilft die Aufrechterhaltung einer stabilen DOM-Struktur insgesamt Leistung. Mit anderen Worten: Nehmen Sie so wenig dynamische Manipulationen wie möglich an der DOM-Struktur vor, insbesondere an Bewegungsoperationen. Wenn die Anzahl der Knoten zu groß ist oder die Seite zu oft aktualisiert wird, ist das Phänomen des Einfrierens der Seite offensichtlicher. Sie können Knoten über CSS ein- oder ausblenden, ohne tatsächlich DOM-Knoten entfernen oder hinzufügen zu müssen.

(2)[Basierend auf Komponentenunterschied] Achten Sie bei der Entwicklung von Komponenten darauf, shouldComponentUpdate() zu verwenden, um unnötige Aktualisierungen von Komponenten zu reduzieren. Darüber hinaus sollten ähnliche Strukturen so weit wie möglich in Komponenten gepackt werden, was nicht nur die Codemenge reduziert, sondern auch den component diff Leistungsverbrauch verringert.

(3)[Basierend auf Elementdiff] Versuchen Sie bei Listenstrukturen, Vorgänge wie das Verschieben des letzten Knotens an den Kopf der Liste zu reduzieren Aktualisierungsvorgänge sind zu häufig. Dies wirkt sich in gewissem Maße auf die Renderleistung von React aus.

React-Lebenszyklus

Der Lebenszyklus von React kann in vier Situationen unterteilt werden:

• Beim Laden für Beim ersten Installieren einer Komponente führen Sie getDefaultProps, getInitialState, componentWillMount, render und componentDidMount in der Reihenfolge

• aus. Bei der Deinstallation einer Komponente führen Sie ; >componentWillUnmount

Wenn die Komponente neu geladen wird, werden
• ,

  und getInitialState der Reihe nach ausgeführt, componentWillMount jedoch nicht rendercomponentDidMountgetDefaultPropsWenn die Komponente erneut gerendert wird, erhält die Komponente den aktualisierten Status und führt

  ,
,
• ,

  und componentWillReceiveProps der Reihe nach aus. shouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdateDrei Zustände der React-Komponenten

Zustand 1: MONTAGE

ist für die Verwaltung von

,

im Leben verantwortlich Zyklus,

und mountComponent. getInitialStatecomponentWillMountrendercomponentDidMount

Status 2: RECEIVE_PROPS

ist für die Verwaltung von

,

,

, updateComponent und . componentWillReceivePropsshouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdateStatus 3: UNMOUNTING

ist für die Verwaltung von

im Lebenszyklus verantwortlich. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte

React Reference Manual

der PHP Chinese-Website, um mehr zu erfahren)

unmountComponent Setzen Sie zunächst den Status auf componentWillUnmount. Wenn vorhanden ist, führen Sie ihn aus. Wenn zu diesem Zeitpunkt innerhalb von

aufgerufen wird, wird

nicht ausgelöst. Der Aktualisierungsstatus ist UNMOUNTING und der Deinstallationsvorgang der Komponente ist abgeschlossen. Der Implementierungscode lautet wie folgt: componentWillUnmount

// 卸载组件unmountComponent: function() {
  // 设置状态为 UNMOUNTING
  this._compositeLifeCycleState = CompositeLifeCycle.UNMOUNTING;  // 如果存在 componentWillUnmount，则触发
  if (this.componentWillUnmount) {    this.componentWillUnmount();
  }  // 更新状态为 null
  this._compositeLifeCycleState = null;  this._renderedComponent.unmountComponent();  this._renderedComponent = null;

  ReactComponent.Mixin.unmountComponent.call(this);
}

React生命周期总结

生命周期	调用次数	能否使用setState()
getDefaultProps	1	否
getInitialState	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否
componentWillUpdate	>=0	否
componentDidUpdate	>=0	否
componentWillUnmount	1	否
componentDidUnmount	1	否

setState实现机制

setState是React框架的核心方法之一，下面介绍一下它的原理：

// 更新 statesetState: function(partialState, callback) {
  // 合并 _pendingState
  this.replaceState(
    assign({}, this._pendingState || this.state, partialState),
    callback
  );
},

当调用 setState 时，会对 state 以及 _pendingState 更新队列进行合并操作，但其实真正更新 state 的幕后黑手是replaceState。

// 更新 statereplaceState: function(completeState, callback) {
  validateLifeCycleOnReplaceState(this);  // 更新队列
  this._pendingState = completeState;  // 判断状态是否为 MOUNTING，如果不是，即可执行更新
  if (this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING) {
    ReactUpdates.enqueueUpdate(this, callback);
  }
},

replaceState 会先判断当前状态是否为 MOUNTING，如果不是即会调用 ReactUpdates.enqueueUpdate 执行更新。

当状态不为 MOUNTING 或 RECEIVING_PROPS 时，performUpdateIfNecessary 会获取 _pendingElement、_pendingState、_pendingForceUpdate，并调用 updateComponent 进行组件更新。

// 如果存在 _pendingElement、_pendingState、_pendingForceUpdate，则更新组件performUpdateIfNecessary: function(transaction) {
  var compositeLifeCycleState = this._compositeLifeCycleState;  // 当状态为 MOUNTING 或 RECEIVING_PROPS时，则不更新
  if (compositeLifeCycleState === CompositeLifeCycle.MOUNTING ||
      compositeLifeCycleState === CompositeLifeCycle.RECEIVING_PROPS) {    return;
  }  var prevElement = this._currentElement;  var nextElement = prevElement;  if (this._pendingElement != null) {
    nextElement = this._pendingElement;    this._pendingElement = null;
  }  // 调用 updateComponent
  this.updateComponent(
    transaction,
    prevElement,
    nextElement
  );
}

如果在 shouldComponentUpdate 或 componentWillUpdate 中调用 setState，此时的状态已经从 RECEIVING_PROPS -> NULL，则 performUpdateIfNecessary 就会调用 updateComponent 进行组件更新，但 updateComponent 又会调用 shouldComponentUpdate 和 componentWillUpdate，因此造成循环调用，使得浏览器内存占满后崩溃。

开发建议

不建议在 getDefaultProps、getInitialState、shouldComponentUpdate、componentWillUpdate、render 和 componentWillUnmount 中调用 setState，特别注意：不能在 shouldComponentUpdate 和 componentWillUpdate中调用 setState，会导致循环调用。

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt vonÜber welche Algorithmen verfügt das React-Framework? Detaillierte Erläuterung des Algorithmus des Reaktionsframeworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!