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 youeject, 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失败，不会造成页面卡顿或者无响应。