JavaScript는 단일 스레드입니다. 그것은 무엇을 의미하고 스레드는 무엇입니까?

스레드는 CPU가 명령 스트림을 실행하는 데 필요한 모든 정보 인 실행 컨텍스트입니다. 따라서 일반적으로 JS 애플리케이션은 하나의 스레드에 포함됩니다.

단점?

웹 앱에서 긴 작업을 처리해야한다고 상상해보십시오. 통역사가 다음 작업으로 이동하기 전에 작업을 완료해야하기 때문에 공용 언어로 된 웹 페이지 인 Dom이 멈출 것입니다. 동시에 두 가지 작업을 처리 할 수 ​​없으므로 긴 작업을 완료하면 Dom을 업데이트하고 다시 살아날 수 있습니다. 이를 피하는 해결책은 웹 작업자를 사용하는 것입니다.

웹 워커 란 무엇입니까?

웹 작업자는 백그라운드에서 독립적으로 실행되는 JS 스크립트입니다. 웹 작업자는 종종 다중 CPU를 활용할 수 있습니다.

이 경우 반응에서 웹 워커를 사용하는 방법을 살펴 보겠습니다.

설정 :

• npm 및 npx에 대한 액세스를 제공하는 nodeJS 설치 https://nodejs.org/en/download/
• 반응 프로젝트 생성 : 터미널에서 실행 "npx create-react-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라는 이름의 fibo 작업자가 있습니다.

이 강의에서 뭔가를 배웠기를 바랍니다. 읽어 주셔서 감사합니다.