JavaScript é um single-threaded. O que significa e o que é um tópico?

Um thread é um contexto de execução, que é toda a informação de que uma CPU precisa para executar um fluxo de instruções. Normalmente, os aplicativos JS estão contidos em um encadeamento.

Contras?

Imagine que em seu aplicativo da web você precise processar uma tarefa longa, o Dom, que é a página da web em linguagem comum, vai congelar porque o intérprete precisa terminar a tarefa antes de passar para a próxima. Ele não pode processar duas tarefas ao mesmo tempo, então quando ele terminar a longa tarefa, ele será capaz de atualizar o Dom e voltar à vida. A solução para evitar isso é usar um web worker.

O que é um web worker?

Um web worker é um script JS executado em segundo plano de forma independente. Os Web workers geralmente podem utilizar várias cpu.

Neste caso, veremos como usar um web worker para reagir.

Configurar :

• Instale o nodeJS que nos dá acesso a npm e npx: https://nodejs.org/en/download/
• Gerar projeto react : execute no terminal “npx create-react-app replace-me-with-the-name-of-the-app - template typescript”

Vamos nos divertir.

Para podermos nos comunicar com o trabalhador, usaremos onMessage e postMessage ().

Agora vamos escrever nossa função fibonacci que será executada pelo web worker.

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

      

Se aprofundarmos no console na guia de fontes, podemos ver no canto superior direito que temos dois threads, o principal e o fibo worker nomeado como f18f83d0–6ed0–484e-86f1–6d1938793085

Espero que você tenha aprendido algo com essa palestra, obrigado pela leitura.