Unterschiede: 1. Die Architektur von Version 15 ist in zwei Teile unterteilt: Koordinator und Renderer, während die Architektur von Version 16 in drei Teile unterteilt ist: Scheduler, Koordinator und Renderer 2. Der Reconciler von Version 15 arbeitet rekursiv und synchron , und die Version 16 des Reconcilers verwendet asynchrone unterbrechbare Aktualisierungen anstelle der synchronen Aktualisierungen der Version 15.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, React16- und React15-Version, Dell G3-Computer.
II Die Architektur von React16 kann in drei Schichten unterteilt werden:
Scheduler (Scheduler) – Die Priorität von Planungsaufgaben, hoch- Vorrangige treten in die erste Reconciler-Phase ein Reconciler (Koordinator) – Finden Sie die Komponenten heraus, die aktualisiert werden müssen, und legen Sie fest, wie sie aktualisiert werden müssenRenderer (Renderer) – Verantwortlich für das Rendern der geänderten Komponenten auf der Seite
Vorher gesagt: Browser Der 16,6-ms-Mechanismus Für das menschliche Auge beträgt die normale und gleichmäßige Bildwiederholfrequenz 60 Hz, was 60 Bildern entspricht, d. h. der Browser wird alle 16,6 ms einmal aktualisiert. Wir wissen, dass js Dom-Elemente bedienen kann, sodass sich der GUI-Thread des Browsers und der js-Thread gegenseitig ausschließen. Die Ausführung von js und das Zeichnen und Layout des Browsers können nicht gleichzeitig ausgeführt werden. Daher muss der Browser alle 16,6 ms die folgenden Vorgänge ausführen: JS-Skriptausführung ------ Browserstil-Layout ------ Browserstilzeichnung Wenn die Ausführungszeit des JS-Skripts zu lang ist, mehr als Nach ca. 16,6 ms können die Browserzeichnung und das Browserlayout während dieser Aktualisierung nicht ausgeführt werden, was zu einem für das menschliche Auge erkennbaren Einfrieren führt. Es wurde festgestellt, dass der Browser während des Vorgangs nicht in „Echtzeit“ reagiert. Wenn der Benutzer beispielsweise Inhalte in das Eingabefeld eingibt, wird dies als Drücken der Tastaturtaste angezeigt, die Eingabe wird jedoch nicht in Echtzeit auf der Seite angezeigt.Der Unterschied zwischen 15 und 16
Reconciler von React15 ist Stack-Reconciler. Das heißt, es arbeitet rekursiv, ist synchron und kann während des Prozesses der Generierung und Differenzierung des virtuellen DOM-Baums nicht unterbrochen werden. Wenn die Komponentenebene zu tief ist, ist die Ausführungszeit von js zu lang und der Browser kann kein Layout erstellen und zeichnen, was zu einem Frameverlust führt. Der Reconciler von React16 ist Fiber-Reconciler. Das heißt, das asynchrone unterbrechbare Update wird anstelle des synchronen Updates von React15 verwendet. Der Scheduler von React16 teilt dem Reconciler mit, ob der Browser freie Zeit zum Ausführen des JS-Skripts hat. Dies hat keine Auswirkungen auf die Zeichen- und Layoutarbeit des Browsers. Es sind keine Frames verloren gegangen.In React16 verwendet das ursprüngliche virtuelle DOM stattdessen die neue Struktur Fiber, da seine Struktur die Anforderungen asynchroner unterbrechbarer Aktualisierungen nicht mehr erfüllen kann. Virtuelle DOM-Knoten entsprechen Fiber-Knoten und virtuelle DOM-Bäume entsprechen Fiber-Bäumen.
Empfohlenes Lernen: „Video-Tutorial reagieren
“Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen den Versionen „react15' und „react16'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
