JavaScript - однопоточный. Что это значит и что такое нить?

Поток - это контекст выполнения, который представляет собой всю информацию, необходимую ЦП для выполнения потока инструкций. Поэтому обычно JS-приложения содержатся в одном потоке.

Минусы?

Представьте, что в вашем веб-приложении вам нужно обработать длинную задачу, Dom, которая представляет собой веб-страницу на обычном языке, зависнет, потому что интерпретатору нужно завершить задачу, прежде чем перейти к следующей. Он не может обрабатывать две задачи одновременно, поэтому, когда он завершит длинную задачу, он сможет обновить Дом и вернуться к жизни. Чтобы избежать этого, используйте веб-воркер.

Что такое веб-воркер?

Веб-воркер - это JS-скрипт, который выполняется в фоновом режиме независимо. Веб-работники часто могут использовать несколько ЦП.

В этом случае мы увидим, как использовать веб-воркер в React.

Настраивать :

• Установите nodeJS, который даст нам доступ к npm и npx: https://nodejs.org/en/download/
• Создать проект реакции: запустите в терминале «npx create-response-app replace-me-with-the-name-of-the-app - template typescript»

Давай повеселимся.

Чтобы иметь возможность общаться с воркером, мы будем использовать onMessage и postMessage ().

Теперь мы напишем нашу функцию Фибоначчи, которую будет выполнять веб-воркер.

//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;

      

Если мы углубимся в консоль на вкладке «Источники», то увидим, что в правом верхнем углу у нас есть два потока: основной и рабочий фибо с именем f18f83d0–6ed0–484e-86f1–6d1938793085.

Надеюсь, вы кое-что узнали из этой лекции, спасибо за чтение.