JavaScript ist ein Singlethread. Was bedeutet das und was ist ein Thread?

Ein Thread ist ein Ausführungskontext, bei dem es sich um alle Informationen handelt, die eine CPU benötigt, um einen Befehlsstrom auszuführen. Normalerweise sind JS-Anwendungen also in einem Thread enthalten.

Nachteile?

Stellen Sie sich vor, Sie müssen in Ihrer Web-App eine lange Aufgabe bearbeiten, die Dom, die Webseite in allgemeiner Sprache, wird einfrieren, weil der Dolmetscher die Aufgabe beenden muss, bevor er zur nächsten übergeht. Er kann nicht zwei Aufgaben gleichzeitig bearbeiten. Wenn er die lange Aufgabe beendet hat, kann er den Dom aktualisieren und wieder zum Leben erwecken. Die Lösung, um dies zu vermeiden, ist die Verwendung eines Webworkers.

Was ist ein Webworker?

Ein Webworker ist ein JS-Skript, das unabhängig im Hintergrund ausgeführt wird. Web-Worker sind oft in der Lage, mehrere CPUs zu verwenden.

In diesem Fall werden wir sehen, wie man einen Webworker in React verwendet.

Einrichten :

• Installieren Sie nodeJS, das uns Zugriff auf npm und npx gibt: https://nodejs.org/en/download/
• React- Projekt generieren: Im Terminal ausführen „npx create-react-app replace-me-with-the-name-of-the-app – template typescript“

Lass uns Spaß haben.

Um mit dem Arbeiter kommunizieren zu können, verwenden wir onMessage und postMessage().

Jetzt schreiben wir unsere Fibonacci-Funktion, die wir vom Webworker ausführen werden.

//fibo.worker.js
// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
  // eslint-disable-next-line no-restricted-globals
  self.onmessage = (message) => {
    const nbr = message.data;
    var n1 = 0;
    var n2 = 1;
    var somme = 0;


    for (let i = 2; i <= nbr; i++) {
      somme = n1 + n2;


      n1 = n2;


      n2 = somme;
    }


    const result = nbr ? n2 : n1;


    postMessage(result);
  };
};

// eslint-disable-next-line import/no-anonymous-default-export

// eslint-disable-next-line no-restricted-globals

//woker-builder.js
export default class WorkerBuilder extends Worker {
  constructor(worker) {
    const code = worker.toString();
    const blob = new Blob([`(${code})()`]);
    return new Worker(URL.createObjectURL(blob));
  }
}

import WorkerBuilder from './worker/woker-builder';
import Worker from './worker/fibo.worker';

instance = new WorkerBuilder(Worker);

componentDidMount() {
    instance.onmessage = (message) => {
      if (message) {
        console.log("Message from worker", message.data);
      }
    };
  }
<button onClick   ​={() => instance.postMessage(5)}>
  Send Message
</button>

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import WorkerBuilder from "./worker/woker-builder";
import FiboWorker from "./worker/fibo.worker";

const instance = new WorkerBuilder(FiboWorker);
class App extends Component {
  componentDidMount() {
    instance.onmessage = (message) => {
      if (message) {
        console.log("Message from worker", message.data);
      }
    };
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Web worker in React
          </p>
          <button
            onClick={() => {
              instance.postMessage(5);
            }}
          >Send Message</button>
        </header>
      </div>
    );
  }
}

export default App;

      

Wenn wir im Quellen-Tab tiefer in die Konsole gehen, sehen wir oben rechts zwei Threads, den Haupt- und den Fibo-Worker namens f18f83d0–6ed0–484e-86f1–6d1938793085

Ich hoffe, Sie haben etwas aus diesem Vortrag gelernt, vielen Dank für Ihr Lesen.