Was sind Ballaststoffe in React

Fiber ist der neue Planungsalgorithmus von React und eine Neuimplementierung des Kernalgorithmus. React Fiber fragmentiert den Update-Prozess. Nach der Ausführung jedes Update-Prozesses wird die Kontrolle an das Aufgabenkoordinationsmodul von React zurückgegeben, um zu sehen, ob andere dringende Aufgaben erledigt werden müssen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Fiber wurde nach der React16-Version eingeführt. Planung, Koordination, Diff-Algorithmus und Rendering auf der gesamten Architekturebene stehen in engem Zusammenhang mit Fiber.

Was ist React Fiber?

Wenn React Komponenten rendert, ist der gesamte Prozess vom Start von setState bis zum Abschluss des Renderings synchron („alles in einem Durchgang“). Wenn die Komponenten, die gerendert werden müssen, relativ groß sind, belegt die js-Ausführung den Hauptthread für lange Zeit, was zu einer schlechten Reaktionsfähigkeit der Seite führt und die Reaktion in Anwendungen wie Animationen und Gesten weniger effektiv macht.

Um dieses Problem zu lösen, hat das React-Team nach zweijähriger Arbeit den Kernalgorithmus in Reconciliation neu geschrieben. Und diese neue Funktion wurde in der Version v16 veröffentlicht. Um den vorherigen und den nachfolgenden Abgleicher zu unterscheiden, wird der vorherige Abgleicher normalerweise als Stapelabgleicher und der neu geschriebene Abgleicher als Faserabgleicher oder kurz Fiber bezeichnet.

Die offizielle Erklärung lautet: „React Fiber ist eine Neuimplementierung des Kernalgorithmus.“

Fiber kann die Reaktionsfähigkeit und Leistung komplexer React-Anwendungen verbessern. Fiber ist der neue Planungsalgorithmus (Abgleichsalgorithmus)

React Fiber fragmentiert den Update-Prozess. Nach der Ausführung jedes Update-Prozesses wird die Kontrolle an das für die Aufgabenkoordination zuständige Modul zurückgegeben, um zu sehen, ob es andere dringende Aufgaben gibt Wenn nicht, fahren Sie mit der Aktualisierung fort. Wenn es dringende Aufgaben gibt, erledigen Sie die dringenden Aufgaben.

Wenn React Komponenten rendert, ist der gesamte Prozess vom Start von setState bis zum Abschluss des Renderings synchron („alles in einem Durchgang“). Wenn die Komponenten, die gerendert werden müssen, relativ groß sind, belegt die js-Ausführung den Hauptthread für lange Zeit, was zu einer schlechten Reaktionsfähigkeit der Seite führt und die Reaktion in Anwendungen wie Animationen und Gesten weniger effektiv macht.

Um dieses Problem zu lösen, hat das React-Team nach zweijähriger Arbeit den Kernalgorithmus in React – Reconciliation – neu geschrieben. Und diese neue Funktion wurde in der Version v16 veröffentlicht. Um den vorherigen und den nachfolgenden Abgleicher zu unterscheiden, wird der vorherige Abgleicher normalerweise als Stapelabgleicher und der neu geschriebene Abgleicher als Faserabgleicher oder kurz Fiber bezeichnet.

Ursache der Verzögerung

Der Arbeitsablauf des Stapelabgleichers ist dem Funktionsaufrufprozess sehr ähnlich. Der Abgleich von untergeordneten Komponenten in einer übergeordneten Komponente kann mit der Rekursion einer Funktion verglichen werden (aus diesem Grund wird sie als Stapelabgleicher bezeichnet). Nach setState startet React sofort den Abstimmungsprozess, ausgehend vom übergeordneten Knoten (virtuelles DOM) und durchläuft ihn, um den Unterschied zu finden. Nachdem alle virtuellen DOM-Durchquerungen abgeschlossen sind, kann der Abgleicher die aktuellen Informationen, die geändert werden müssen, an das reale DOM übergeben und sie zum Rendern an den Renderer übergeben. Anschließend wird der aktualisierte Inhalt auf dem Bildschirm angezeigt. Bei einem besonders großen vDOM-Baum dauert der Abgleichsprozess sehr lange (x00 ms). Während dieser Zeit ist der Hauptthread von js belegt, sodass jegliche Interaktion, jedes Layout und jedes Rendern gestoppt wird, was dem Benutzer das Gefühl gibt, dass die Seite nicht mehr vorhanden ist gesteckt. .

Scheduler

Scheduling ist ein Prozess der Faserabstimmung, der hauptsächlich bestimmt, was wann getan werden soll. Der Prozess von ? zeigt, dass der Abgleich im Stapelabgleich „alles auf einmal“ erfolgt, da wir nur die laufenden Ergebnisse der Funktion benötigen, aber für die Benutzeroberfläche müssen wir auch die folgenden Probleme berücksichtigen:

• Nicht alle Statusaktualisierungen müssen sofort angezeigt werden, z. B. Aktualisierungen von Teilen außerhalb des Bildschirms.
• Die Antwortpriorität von Benutzereingaben ist beispielsweise höher als die des Füllens von Inhalten durch Anfragen. Die Antwortpriorität ist höher
• Idealerweise sollte es bei einigen Vorgängen mit hoher Priorität möglich sein, die Ausführung von Vorgängen mit niedriger Priorität zu unterbrechen, wenn der Benutzer beispielsweise noch einen Kommentar auf der Seite eingibt Der Antwort sollte Vorrang eingeräumt werden.

Der Abstimmungsprozess sollte also wie im Bild unten dargestellt ablaufen. Nachdem Sie ihn erledigt haben, können Sie „durchatmen“ und zu ihm zurückkehren Überprüfen Sie im Hauptthread, ob Aufgaben mit höherer Priorität verarbeitet werden müssen. Andernfalls wird die Ausführung fortgesetzt (kooperative Planung).

Aufgabenaufteilung Fiber-Tree & Fiber

Schauen wir uns zunächst an, wie React unter Stack-Reconciler funktioniert. Erstellen (oder aktualisieren) Sie einige Elemente im Code. React erstellt (oder aktualisiert) das virtuelle DOM basierend auf diesen Elementen. React ändert dann das reale DOM basierend auf dem Unterschied zwischen dem virtuellen DOM vor und nach der Aktualisierung. Beachten Sie, dass

unter dem Stack Reconciler DOM-Aktualisierungen synchron erfolgen, d. h. während des Vergleichsprozesses des virtuellen DOM werden DOM-Vorgänge sofort ausgeführt, wenn festgestellt wird, dass eine Instanz aktualisiert wird .

Unter dem Fiber-Conciler kann der Vorgang in viele kleine Teile aufgeteilt und unterbrochen werden, sodass der synchrone Betrieb des DOM dazu führen kann, dass der Fiber-Baum nicht mit dem tatsächlichen DOM synchronisiert ist. Für jeden Knoten werden nicht nur die Grundinformationen des entsprechenden Elements gespeichert, sondern auch einige Informationen für die Aufgabenplanung. Daher ist Fiber nur ein Objekt, das die kleinste Arbeitseinheit darstellt, die während der Abstimmungsphase aufgeteilt werden kann, und eins zu eins der Reaktionsinstanz in der obigen Abbildung entspricht. Verwalten Sie die Eigenschaften der Instanz selbst über das Attribut stateNode. Die nächste Arbeitseinheit der aktuellen Arbeitseinheit wird durch Kind und Geschwister dargestellt, und return gibt das Ziel an, das nach Abschluss der Verarbeitung mit den zurückgegebenen Ergebnissen zusammengeführt werden soll, und zeigt normalerweise auf den übergeordneten Knoten. Die gesamte Struktur ist ein verknüpfter Listenbaum. Nachdem die Ausführung jeder Arbeitseinheit (Faser) abgeschlossen ist, wird geprüft, ob sie noch über die Zeitscheibe des Hauptthreads verfügt. Wenn nicht, werden zuerst andere Transaktionen mit hoher Priorität verarbeitet und ausgeführt wird fortgesetzt, bis der Hauptthread frei ist.

stateNode属性管理Instance自身的特性。通过child和sibling表征当前工作单元的下一个工作单元，return表示处理完成后返回结果所要合并的目标，通常指向父节点。整个结构是一个链表树。每个工作单元（fiber）执行完成后，都会查看是否还继续拥有主线程时间片，如果有继续下一个，如果没有则先处理其他高优先级事务，等主线程空闲下来继续执行。

fiber {  	stateNode: {},    child: {},    return: {},    sibling: {},
}复制代码

举个例子

当前页面包含一个列表，通过该列表渲染出一个button和一组Item，Item中包含一个div，其中的内容为数字。通过点击button，可以使列表中的所有数字进行平方。另外有一个按钮，点击可以调节字体大小。

页面渲染完成后，就会初始化生成一个fiber-tree。初始化fiber-tree和初始化Virtual DOM tree没什么区别，这里就不再赘述。

于此同时，react还会维护一个workInProgressTree。workInProgressTree用于计算更新，完成reconciliation过程。

用户点击平方按钮后，利用各个元素平方后的list调用setState，react会把当前的更新送入list组件对应的update queue中。但是react并不会立即执行对比并修改DOM的操作。而是交给scheduler去处理。

scheduler会根据当前主线程的使用情况去处理这次update。为了实现这种特性，使用了requestIdelCallbackAPI。对于不支持这个API的浏览器，react会加上pollyfill。

总的来讲，通常，客户端线程执行任务时会以帧的形式划分，大部分设备控制在30-60帧是不会影响用户体验；在两个执行帧之间，主线程通常会有一小段空闲时间，requestIdleCallback

setState({}, callback); // stack concilersetState(() => { return {} }, callback); // fiber conciler复制代码

Zum BeispielDie aktuelle Seite enthält eine Liste, über die eine Schaltfläche und eine Reihe von Elementen gerendert werden. Das Element enthält ein Div, dessen Inhalt eine Zahl ist. Durch Klicken auf die Schaltfläche können alle Zahlen in der Liste quadriert werden. Es gibt auch eine Schaltfläche, auf die Sie klicken können, um die Schriftgröße anzupassen.

Seite Nachdem das Rendern abgeschlossen ist, wird ein Faserbaum initialisiert und generiert. Es gibt keinen Unterschied zwischen der Initialisierung von Fiber-Tree und der Initialisierung von Virtual DOM Tree, daher werde ich hier nicht auf Details eingehen.

🎜🎜 Yu Gleichzeitig verwaltet React auch einen workInProgressTree. workInProgressTree wird verwendet, um Aktualisierungen zu berechnen und den Abgleichsprozess abzuschließen. 🎜🎜🎜🎜Benutzer Nachdem Sie auf die quadratische Schaltfläche geklickt haben, verwenden Sie die quadratische Liste jedes Elements, um setState aufzurufen. React sendet das aktuelle Update an die Aktualisierungswarteschlange, die der Listenkomponente entspricht. React führt den Vergleich jedoch nicht sofort durch und ändert die DOM-Operation. Überlassen Sie es stattdessen dem Planer. 🎜🎜🎜🎜Planer Dieses Update wird basierend auf der aktuellen Nutzung des Hauptthreads verarbeitet. Um diese Funktion zu implementieren, wird die requestIdelCallbackAPI verwendet. Für Browser, die diese API nicht unterstützen, fügt React Pollyfill hinzu. 🎜🎜Im Allgemeinen werden Client-Threads bei der Ausführung von Aufgaben in Frames unterteilt, ohne dass die Benutzererfahrung zwischen zwei Ausführungsframes beeinträchtigt wird >requestIdleCallback kann während dieser 🎜Leerlaufzeit🎜 🎜Idle Callback🎜 aufrufen und einige Aufgaben🎜🎜🎜🎜 ausführen

• 低优先级任务由requestIdleCallback处理；

• 高优先级任务，如动画相关的由requestAnimationFrame处理；

• requestIdleCallback可以在多个空闲期调用空闲期回调，执行任务；

• requestIdleCallback方法提供deadline，即任务执行限制时间，以切分任务，避免长时间执行，阻塞UI渲染而导致掉帧；

一旦reconciliation过程得到时间片，就开始进入work loop。work loop机制可以让react在计算状态和等待状态之间进行切换。为了达到这个目的，对于每个loop而言，需要追踪两个东西：下一个工作单元（下一个待处理的fiber）;当前还能占用主线程的时间。第一个loop，下一个待处理单元为根节点。

因为根节点上的更新队列为空，所以直接从fiber-tree上将根节点复制到workInProgressTree中去。根节点中包含指向子节点（List）的指针。

根节点没有什么更新操作，根据其child指针，接下来把List节点及其对应的update queue也复制到workinprogress中。List插入后，向其父节点返回，标志根节点的处理完成。

根节点处理完成后，react此时检查时间片是否用完。如果没有用完，根据其保存的下个工作单元的信息开始处理下一个节点List。

接下来进入处理List的work loop，List中包含更新，因此此时react会调用setState时传入的updater funciton获取最新的state值，此时应该是[1,4,9]。通常我们现在在调用setState传入的是一个对象，但在使用fiber conciler时，必须传入一个函数，函数的返回值是要更新的state。react从很早的版本就开始支持这种写法了，不过通常没有人用。在之后的react版本中，可能会废弃直接传入对象的写法。

setState({}, callback); // stack concilersetState(() => { return {} }, callback); // fiber conciler复制代码

在获取到最新的state值后，react会更新List的state和props值，然后调用render，然后得到一组通过更新后的list值生成的elements。react会根据生成elements的类型，来决定fiber是否可重用。对于当前情况来说，新生成的elments类型并没有变（依然是Button和Item），所以react会直接从fiber-tree中复制这些elements对应的fiber到workInProgress 中。并给List打上标签，因为这是一个需要更新的节点。

List节点处理完成，react仍然会检查当前时间片是否够用。如果够用则处理下一个，也就是button。加入这个时候，用户点击了放大字体的按钮。这个放大字体的操作，纯粹由js实现，跟react无关。但是操作并不能立即生效，因为react的时间片还未用完，因此接下来仍然要继续处理button。

button没有任何子节点，所以此时可以返回，并标志button处理完成。如果button有改变，需要打上tag，但是当前情况没有，只需要标记完成即可。

老规矩，处理完一个节点先看时间够不够用。注意这里放大字体的操作已经在等候释放主线程了。

接下来处理第一个item。通过shouldComponentUpdate钩子可以根据传入的props判断其是否需要改变。对于第一个Item而言，更改前后都是1,所以不会改变，shouldComponentUpdate返回false，复制div，处理完成，检查时间，如果还有时间进入第二个Item。

第二个Item shouldComponentUpdate返回true，所以需要打上tag，标志需要更新，复制div，调用render，讲div中的内容从2更新为4，因为div有更新，所以标记div。当前节点处理完成。

In der obigen Situation ist das Div bereits ein Blattknoten und hat keine Geschwisterknoten, und sein Wert wurde aktualisiert. Zu diesem Zeitpunkt muss der durch die Änderung dieses Knotens erzeugte Effekt mit dem übergeordneten Knoten zusammengeführt werden. Zu diesem Zeitpunkt führt React eine Liste, in der alle Elemente aufgezeichnet werden, die Effekte erzeugen.

Kehren Sie nach dem Zusammenführen zum übergeordneten Knotenelement zurück, und die Markierung des übergeordneten Knotens ist abgeschlossen.

Die nächste Arbeitseinheit ist Artikel. Bevor Sie Artikel eingeben, überprüfen Sie die Zeit. Aber dieses Mal lief die Zeit davon. An diesem Punkt muss React den Hauptthread austauschen und den Hauptthread anweisen, ihm in Zukunft Zeit zuzuweisen, um die verbleibenden Vorgänge abzuschließen.

Der Hauptthread führt als Nächstes den Vorgang der Vergrößerung der Schriftart durch. Führen Sie nach Abschluss den nächsten Reaktionsvorgang aus, der fast dem Verarbeitungsprozess des vorherigen Elements entspricht. Nach Abschluss der Verarbeitung lauten der gesamte Faserbaum und workInProgress wie folgt:

Nach Abschluss der Das Element kehrt zur Liste zurück und führt den Effekt zusammen. Die Effektliste sieht nun wie folgt aus:

Zu diesem Zeitpunkt kehrt die Liste zum Stammknoten zurück und führt den Effekt zusammen, und alle Knoten können als abgeschlossen markiert werden. Zu diesem Zeitpunkt markiert die Reaktion „workInProgress“ als „pendingCommit“. Das bedeutet, dass Sie in die Commit-Phase eintreten können.

Zu diesem Zeitpunkt müssen Sie prüfen, ob die Zeit ausreicht. Wenn Sie keine Zeit haben, müssen Sie warten, bis die Änderung beim DOM eingereicht wird. Nach Eintritt in Stufe 2 aktualisiert reacDOM das DOM basierend auf der in Stufe 1 berechneten Effektliste.

Nach der Aktualisierung des DOM ist workInProgress vollständig mit dem DOM konsistent. Um den aktuellen Faserbaum und das DOM konsistent zu halten, tauscht React die aktuellen und workinProgress-Zeiger aus.

Tatsächlich verwaltet React die meiste Zeit zwei Bäume (Doppelpufferung). Dies kann die Zeit für die Speicherzuweisung und die Müllbereinigung beim nächsten Update verkürzen. Führen Sie nach Abschluss des Commits die Funktion „componentDidMount“ aus.

Zusammenfassung

Durch die Aufteilung des Abstimmungsprozesses in kleine Arbeitseinheiten kann die Seite schneller auf Browserereignisse reagieren. Ein weiteres Problem ist jedoch noch ungelöst: Wenn das aktuell verarbeitete React-Rendering lange dauert, wird das nachfolgende React-Rendering weiterhin blockiert. Aus diesem Grund fügt Fiber Reconciler eine Prioritätsstrategie hinzu.

【Verwandte Empfehlung: Redis-Video-Tutorial】

Das obige ist der detaillierte Inhalt vonWas sind Ballaststoffe in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!