Menggunakan Pekerja Web untuk Pemprosesan Latar Belakang dalam Aplikasi React Hooks.

1.0 Pengenalan

Web Workers dalam React ialah fungsi yang membenarkan berjalan serentak berbilang utas dalam aplikasi React. Ini membolehkan beberapa utas berjalan di latar belakang, untuk mengecualikannya daripada dijalankan sebagai sebahagian daripada utas utama.

Ambil contoh, anda mempunyai aplikasi yang mungkin anda ingin melakukan pengiraan yang rumit, pengambilan data yang besar daripada API atau melaksanakan pemberitahuan latar belakang, tanpa mengubah fungsi biasa bagi urutan utama yang sedang berjalan. Ini boleh dicapai dengan melaksanakan React Web Hooks yang memastikan bahawa Antara Muka Pengguna tidak membeku semasa semua proses ini dijalankan dalam apl React.

Dalam panduan ini, kami akan mencipta contoh projek tindak balas yang melaksanakan pekerja web dalam cangkuk tindak balas tersuai untuk melakukan pengiraan eksponen.

Langkah

Langkah 1: Cipta Apl React

Buat aplikasi tindak balas.

npx create-vite myproject -- --template react

Saya lebih suka menggunakan vite untuk mencipta apl bertindak balas kerana ia mempunyai masa jalan yang lebih pantas berbanding dengan apl buat-tindak balas .
Di sini kami menggunakan react sebagai templat dari vite.

pilih JavaScript:

buka projek pada editor. (Saya akan menggunakan kod Vs untuk projek ini)

code .

Langkah 2: Perancah projek kami.

Di dalam direktori src, buat cangkuk direktori lain/gunakanWebWorkers.
Di dalam folder ini, cipta fail index.js yang akan memuatkan pekerja web kami seperti yang ditunjukkan di bawah:

Langkah 3: Mencipta pekerja web kami

Di dalam /hooks/useWebWorker/index.js kami, kami mencipta cangkuk tersuai, yang mencipta pekerja web kami

Buat cangkuk tersuai useWebWorker yang mengambil workerFunction dan inputData sebagai parameter.

const useWebWorker =(workerFunction,inputData)=>{

}
export default useWebWorker;

Mulakan keadaan untuk hasil, ralat dan status pekerja web kami menggunakan cangkuk useState.

import {useState} from 'react'
const useWebWorker =(workerFunction,inputData)=>{
const [result,setResult] = useState(null);
const [error,setError] = useState(null);
const [loading,setLoading] = useState(false);

}
export default useWebWorker;

i) hasil menyimpan hasil pekerja web kami. Pada mulanya ditetapkan kepada null.

ii)ralat menjejaki ralat yang mungkin berlaku dalam pekerja web. Pada mulanya ditetapkan kepada null.

iii) pemuatan memberikan keadaan pekerja web kami sama ada memproses data atau tidak. Pada mulanya ditetapkan kepada palsu.

Mulakan useEffect untuk menahan pekerja web kami.

import {useState,useEffect} from 'react'
const useWebWorker =(workerFunction,inputData)=>{
const [result,setResult] = useState(null);
const [error,setError] = useState(null);
const [loading,setLoading] = useState(false);

useEffect(()=>{

},[inputData])

}
export default useWebWorker;

Cakuk useEffect berjalan apabila inputData berubah, kerana ia telah ditetapkan sebagai pembatas,
Apabila inputData batal atau tidak ditentukan, cangkuk keluar lebih awal.

if(!inputData)return;

Pastikan semua keadaan ditetapkan semula dengan betul

    setLoading(true);
    setError(null);
    setResult(null);

Buat gumpalan pekerja web

    const blob = new Blob(
      [
        `
          self.onmessage = function(event) {
            (${workerFunction.toString()})(event);
          };
        `,
      ],
      { type: "application/javascript" }
    );

Menukar workerFunction kepada rentetan dan memasukkannya dalam objek Blob. Blob ini mewakili kod JavaScript yang akan dijalankan dalam Pekerja Web.

Buat Pekerja yang menjana URL untuk Blob dan buat Pekerja Web baharu menggunakan URL ini:

    const workerScriptUrl = URL.createObjectURL(blob);
    const worker = new Worker(workerScriptUrl);

Sediakan pengendali acara untuk mesej yang dikeluarkan oleh pekerja.

worker.onmessage(event){

}

apabila pekerja web menghantar mesej ke utas utama (menggunakan postMessage), pengendali acara dicetuskan.
event.data mengandungi sama ada hasil atau ralat yang sah dalam pekerja web. Kami mengendalikan pemaparan sama ada ralat atau hasil yang sah dalam pernyataan if-else.

Sekiranya berlaku ralat, kami menetapkan ralat itu kepada event.data.error di dalam setError().
jika keputusan yang sah dikembalikan, kami menghantar hasilnya ke event.data di dalam setResult()

    worker.onmessage = (event) => {
      console.log("Worker result:", event.data);
      if (event.data.error) {
        setError(event.data.error);
      } else {
        setResult(event.data);
      }
      setLoading(false);
    };

Menetapkan pemuatan kepada palsu apabila selesai.

Mengendalikan ralat pekerja Web:

Kami menggunakan worker.onerror(event){

}
Kami menghantar acara sebagai parameter, mengemas kini ralat kepada event.message dan mengemas kini keadaan pemuatan kepada palsu.

    worker.onerror = (event) => {
      console.error("Worker error:", event.message);
      setError(event.message);
      setLoading(false);
    };

Kami kini menghantar inputData kepada pekerja web

worker.postMessage(inputData);

Kami menamatkan Web Worker dan membatalkan URL Blob apabila komponen dinyahlekap atau inputData atau workerFunction berubah:

    return () => {
      worker.terminate();
      URL.revokeObjectURL(workerScriptUrl);
    };
  }, [inputData, workerFunction]);

Kami akhirnya mengembalikan keadaan pekerja web dengan mengembalikan keadaan hasil, ralat dan pemuatan:

return {result,error,loading}

Eksport useWebWorker:

export default useWebWorker;

Di bawah ialah kod lengkap untuk cangkuk/useWebWorker/index.js:

import { useState, useEffect } from "react";

const useWebWorker = (workerFunction, inputData) => {
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!inputData) return;

    setLoading(true);
    setError(null);
    setResult(null);

    const blob = new Blob(
      [
        `
          self.onmessage = function(event) {
            (${workerFunction})(event);
          };
        `,
      ],
      { type: "application/javascript" }
    );

    const workerScriptUrl = URL.createObjectURL(blob);
    const worker = new Worker(workerScriptUrl);

    worker.onmessage = (event) => {
      console.log("Worker result:", event.data);
      setResult(event.data);
      setLoading(false);
    };

    worker.onerror = (event) => {
      console.error("Worker error:", event.message);
      setError(event.message);
      setLoading(false);
    };

    console.log("Posting message to worker:", inputData);
    worker.postMessage(inputData);

    return () => {
      worker.terminate();
      URL.revokeObjectURL(workerScriptUrl);
    };
  }, [inputData, workerFunction]);

  return { result, error, loading };
};

export default useWebWorker;

Langkah 4: Mengedit App.jsx kami

Dalam App.jsx kami, mari kita tentukan fungsi pekerja yang akan dilaksanakan oleh pekerja web kami:

const workerFunction = (e) => {
  const { base, exponent } = e.data;
  console.log("Worker function received data:", base, exponent);

  let result = 1;
  for (let i = 0; i < exponent; i++) {
    result *= base;
  }

  self.postMessage(result);
};

e.data contains data from the web worker.

The workerFunction:
Logs the received data (base and exponent).
Computes the power of base raised to exponent.
Sends the result back to the main thread using self.postMessage(result).

Let's now define our App functional component inside our App.jsx:

const App = () => {
  const [base, setBase] = useState("");
  const [exponent, setExponent] = useState("");
  const [inputData, setInputData] = useState(null);
  const { result, error, loading } = useWebWorker(workerFunction, inputData);

base: Stores the base number input.
exponent: Stores the exponent number input.
inputData: Stores the data to be sent to the worker.
Custom Hook Usage: useWebWorker is used to create a Web Worker and manage its state.

  const handleBaseChange = (e) => setBase(e.target.value);
  const handleExponentChange = (e) => setExponent(e.target.value);

handleBaseChange: Updates base state when the input value changes.
handleExponentChange: Updates exponent state when the input value changes

  const handleCalculate = () => {
    setInputData({ base: Number(base), exponent: Number(exponent) });
  };

handleCalculate Function: Converts base and exponent to numbers and sets them as inputData for the Web Worker.

  return (
    <div>
      <h1>Exponential Calculation with Web Worker</h1>
      <div>
        <label>
          Base:
          <input type="number" value={base} onChange={handleBaseChange} />
        </label>
      </div>
      <div>
        <label>
          Exponent:
          <input type="number" value={exponent} onChange={handleExponentChange} />
        </label>
      </div>
      <button onClick={handleCalculate}>Calculate</button>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
      {!loading && !error && result !== null && <div>Result: {result}</div>}
    </div>
  );
};

JSX Layout:
Displays a title and input fields for base and exponent.
A button triggers the handleCalculate function.
Conditionally renders loading, error, or result messages based on the state.

Below is the complete App.jsx code:

import { useState } from "react";
import useWebWorker from "./hooks/useWebWorker";
import "./App.css";

const workerFunction = (e) => {
  const { base, exponent } = e.data;
  console.log("Worker function received data:", base, exponent);

  let result = 1;
  for (let i = 0; i < exponent; i++) {
    result *= base;
  }

  self.postMessage(result);
};

const App = () => {
  const [base, setBase] = useState("");
  const [exponent, setExponent] = useState("");
  const [inputData, setInputData] = useState(null);
  const { result, error, loading } = useWebWorker(workerFunction, inputData);

  const handleBaseChange = (e) => setBase(e.target.value);
  const handleExponentChange = (e) => setExponent(e.target.value);

  const handleCalculate = () => {
    setInputData({ base: Number(base), exponent: Number(exponent) });
  };

  return (
    <div>
      <h1>Exponential Calculation with Web Worker</h1>
      <div>
        <label>
          Base:
          <input type="number" value={base} onChange={handleBaseChange} />
        </label>
      </div>
      <div>
        <label>
          Exponent:
          <input type="number" value={exponent} onChange={handleExponentChange} />
        </label>
      </div>
      <button onClick={handleCalculate}>Calculate</button>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
      {!loading && !error && result !== null && <div>Result: {result}</div>}
    </div>
  );
};

export default App;

We can now use npm run dev to view our project.
Below is a live preview of our project:
Web Workers Project Implementation

Conclusion

Implementing Web Workers in your React applications can significantly enhance performance, especially when dealing with CPU-intensive tasks. By offloading such tasks to background threads, you ensure that your app remains responsive and provides a smooth user experience.

In our example, we've seen how straightforward it can be to set up and use Web Workers in a React environment. From dynamically creating a worker using a custom hook to managing the communication between the main thread and the worker, every step is designed to be both efficient and easy to integrate.

This approach not only helps in maintaining a responsive UI but also makes your app more robust and user-friendly. Whether it's for complex calculations, data processing, or any other heavy lifting, Web Workers can be your go-to solution for multitasking in modern web applications.

Remember, the key to a great user experience is not just about what your app does but how it feels while doing it. By implementing Web Workers, you can ensure that your app feels snappy and responsive, keeping your users happy and engaged. So, go ahead and explore the power of Web Workers in your next React project – your users will thank you for it!

Atas ialah kandungan terperinci Menggunakan Pekerja Web untuk Pemprosesan Latar Belakang dalam Aplikasi React Hooks.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!