Lassen Sie uns ausführlich über bitweise Operationen im React-Quellcode sprechen

Vorwort

In den letzten zwei Jahren haben sich viele Freunde bei mir über den React-Quellcode beschwert, zum Beispiel:

• Warum verwendet der Scheduler eine Datenstruktur wie einen Mini-Heap anstelle eines Arrays?
• Im Quellcode gibt es mehrere einseitig verknüpfte Listen und zirkuläre verknüpfte Listen. Können wir nicht einfach Arrays verwenden?
• Sind diverse Bitoperationen im Quellcode notwendig?

Als geschäftsabhängiges Framework scheut sich React nicht, den Quellcode komplexer zu gestalten, um die Laufzeitleistung ein wenig zu verbessern.

Bitoperationen werden häufig verwendet, wenn Status-, Flag-Bits und Prioritätsoperationen beteiligt sind.
In diesem Artikel werden die repräsentativeren Teile davon erläutert. Nachdem Sie es gelernt haben, zeigen Sie Ihre Fähigkeiten, wenn Sie auf ähnliche Szenarien stoßen, und Sie werden die beeindruckendste Person in Ihrer Branche sein.

Mehrere gängige Bitoperationen

In JS werden die Operanden von Bitoperationen zuerst in Int32 (vorzeichenbehaftete 32-Bit-Ganzzahl) konvertiert, und nachdem die Bitoperation ausgeführt wurde, wird die entsprechende Gleitkommazahl von Int32 konvertiert.

In React werden drei hauptsächliche Bitoperatoren verwendet: Bitweises Und, Bitweises Oder und Bitweises Nicht.

Bitweises UND (&)

Für jedes Bit der beiden binären Operanden gilt: Wenn beide Bits 1 sind, dann ist das Ergebnis 1, andernfalls 0.

Um beispielsweise 3 und 2 zu berechnen, konvertieren Sie zuerst die Operanden in Int32:

// Int32 entspricht 3
0b000 0000 0000 0000 0000 0000 0000 0011 
// Int32 entspricht 2
0b000 0000 0000 0000 0000 0000 0000 0010 

Der Intuition halber schließen wir die führenden Nullen aus und behalten nur die letzten 8 Bits (die tatsächliche Anzahl der an der Berechnung beteiligten Bits sollte 32 Bits betragen):

  0000 0011
& 0000 0010
------------
  0000 0010

Das Ergebnis von 3 & 2, umgewandelt in eine Gleitkommazahl, ist also 2.

Bitweises ODER (|)

Für jedes Bit der beiden binären Operanden gilt: Wenn beide Bits 0 sind, dann ist das Ergebnis 0, andernfalls ist es 1.

Berechnen Sie 10 | 3:

  0000 1010
| 0000 0011
------------
  0000 1011

Das Rechenergebnis wird in eine Gleitkommazahl umgewandelt und beträgt 11.

Bitweises NICHT (～)

Führen Sie für jedes Bit eines binären Operanden eine bitweise Inversion durch (0 und 1 werden vertauscht).

Für ~3 konvertieren Sie 3 in Int32 und invertieren dann jedes Bit:

// Int32 entspricht 3
0b000 0000 0000 0000 0000 0000 0000 0011 
// Bitweise Inversion 0b111 1111 1111 1111 1111 1111 1111 1100

Das in eine Gleitkommazahl umgewandelte Berechnungsergebnis ist -4.

Wenn Sie dieses Ergebnis verwirrt, können Sie sich über den Komplementcode informieren.

Sehen wir uns die Anwendung bitweiser Operationen in React vom Einfachen bis zum Schwierigen an.

Markierungsstatus

Im React-Quellcode gibt es mehrere Kontexte und beim Ausführen einer Funktion muss häufig ermittelt werden, in welchem ​​Kontext sie sich gerade befindet.

Nehmen wir an, es gibt drei Kontexte:

// Ein Kontext const A = 1;
// B-Kontext const B = 2;
// Nicht im Kontext const NoContext = 0;

Beim Eingeben eines Kontexts können Sie die bitweise ODER-Operation verwenden, um den Eintrag zu markieren:

// Aktueller Kontext let curContext = 0;

// Kontext A eingeben curContext |= A;

Nehmen wir als Beispiel einen 8-Bit-Binärwert (eigentlich müsste es wieder Int32 sein, aber das dient der Einfachheit) und führen eine bitweise ODER-Operation für curContext und A aus:

  0000 0000 // aktueller Kontext
| 0000 0001 // A
------------
  0000 0001

An dieser Stelle können Sie die bitweise UND-Operation mit NoContext kombinieren, um zu bestimmen, ob Sie sich in einem bestimmten Kontext befinden:

// Befindet es sich im Kontext A? Wahr
(aktueller Kontext & A) !== Kein Kontext

// Befindet es sich im Kontext B? false
(aktueller Kontext & B) !== Kein Kontext

Kombinieren Sie nach dem Verlassen eines Kontexts bitweises UND und bitweises NICHT, um die Markierung zu entfernen:

//Kontext A aus dem aktuellen Kontext entfernen
aktuellerKontext &= ~A;

// Befindet es sich im Kontext A? false
(aktueller Kontext & A) !== Kein Kontext

curContext führt eine bitweise UND-Operation mit ~A aus:

  0000 0001 // aktuellerKontext
& 1111 1110 // ~A
------------
  0000 0000

Das heißt, entfernen Sie A aus curContext.

Wenn das Unternehmen mehrere Zustände gleichzeitig verarbeiten muss, können Sie Techniken wie Operationen höherer Ordnung verwenden.

Prioritätsberechnung

In React haben Updates, die durch den Aufruf von this.setState in verschiedenen Situationen ausgelöst werden, unterschiedliche Prioritäten. Für den Vergleich und die Auswahl zwischen Prioritäten werden ebenfalls Bitoperationen verwendet.
Insbesondere verwendet React 31 Bits zum Speichern von Aktualisierungen (der Grund, warum es 31 statt 32 sind, liegt darin, dass das höchste Bit von Int32 das Vorzeichenbit ist und nicht die spezifische Nummer speichert).

Je niedriger die Bitposition, desto höher die Aktualisierungspriorität (desto mehr muss zuerst verarbeitet werden).

Angenommen, es gibt zwei Updates in der aktuellen Anwendung:

0b000 0000 0000 0000 0000 0000 0001 0001

Die Aktualisierungspriorität bei Nr. 1 ist die höchste (muss synchron verarbeitet werden) und die Aktualisierungspriorität bei Nr. 5 ist die Standardpriorität.

React muss häufig herausfinden, welches Update die höchste Priorität hat (im obigen Beispiel an erster Stelle). Die Methode lautet wie folgt:

Funktion getHighestPriorityLane(Fahrspuren) {
  Rückfahrspuren & -spuren;
}

Zur Erklärung: Da Int32 die Zweierkomplementdarstellung verwendet, können -lanes als die folgende zweistufige Operation betrachtet werden:

1. Fahrspurverneinung (~Fahrspuren)
2. Addiere 1

Der Übersichtlichkeit halber verwenden wir 8 Bit:

Fahrspuren 0001 0001
~Fahrspuren 1110 1110 // erster Schritt + 1 1110 1111 // zweiter Schritt

Dann lauten die Fahrspuren und -spuren wie folgt:

  0001 0001 // Fahrspuren  
& 1110 1111 // -Fahrspuren
------------
  0000 0001

Es wird das erste Update übernommen (mit der höchsten Priorität unter den vorhandenen Updates).

Zusammenfassen

Obwohl Bitoperationen in der Wirtschaft nicht oft verwendet werden, sind sie in bestimmten Szenarien eine praktische und effiziente Methode.

Gefällt Ihnen diese Operation?

Dies ist das Ende dieses Artikels über die mittleren Operationsfähigkeiten im React-Quellcode. Weitere relevante Inhalte zu den mittleren Operationsfähigkeiten im React-Quellcode finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!