React中使用worker线程

首先

需要在webpack.config.js中配置worker-loader;
如果没找到webpack.config.js这个文件，我们可以使用npm run eject来讲webpack的文件暴露出来，但是一经暴露，无法还原。

npm run eject

**Note: this is a one-way operation. Once you eject, you can't go back!**
我们需要先下载loader

npm i worker-loader

在webpack.config.js中使用：

 rules: [
        {
   
          test: /\.worker\.js$/,
          use: [{
   
            loader: 'worker-loader',
          },
          {
    loader: 'babel-loader' }]// 增加es6 转换语法
        },
        ......
        ]

大概就在这个文件的340行位置。

使用worker

我们使用的时候需要woeker文件以xxx.worker.js结尾：
如：
file.worker.js
file.worker.js内容：

onmessage = function (e) {
   //监听主进程的消息

  const {
   data1,data2} =e.data

  console.time("开始计算")
  const DIFF = require('diff')
  let DiffLeft = DIFF.diffLines(data1, data2)

  console.timeEnd("开始计算")

  postMessage({
    DiffLeft, DiffRight: DiffLeft})//向主进程发送消息
}

在A组件中引入：

import React, {
    useEffect, useState } from 'react'
import Worker from './file.worker.js'

使用：

  const [workerObj1, setWorkerObj1] = useState({
   })

   useEffect(() => {
   
        const myWorker = new Worker();
        setWorkerObj1(myWorker)
    }, [])
  //点击事件：
     const workerFun = () => {
   
          //向子进程发送消息
               workerObj1.postMessage(JSONObj.data)
                workerObj1.onmessage = function (e) {
   
                //执行这个函数说明已经收到了worker线程的消息
            console.log(e.data,'完成')
            setcontextBoxLoading(false)
            const {
    DiffLeft,DiffRight } = e.data
            setoldStr(DiffLeft)
            setnewStr(DiffRight)
            workerObj1.terminate()
        }
    }

我们可以创建多个worker线程，每个线程做自己的事情，适合做大量的运算。
在worker线程做大量运算不会造成主线程渲染或者执行其他js失败，不会造成页面卡顿或者无响应。