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.dataconsole.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.datasetoldStr(DiffLeft)setnewStr(DiffRight)workerObj1.terminate()}}

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

React中使用worker线程相关推荐

深入理解 Node.js 中的 Worker 线程
多年以来,Node.js 都不是实现高 CPU 密集型应用的最佳选择,这主要就是因为 JavaScript 的单线程.作为对此问题的解决方案,Node.js v10.5.0 通过 worker_thr ...
React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...
react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
为什么重新new两个线程线程号相同_C++ 20中的新线程（jthread）功能
C++ 20带来了许多很酷的新功能,其中一个我将在这里简单介绍一下:std::jthread. 这个的实现std::jthread基于已经存在的std::thread.它基本上是一个包装器,它为线程带 ...
python多线程没用_为什么我无法在python中加入该线程？
我正在编写一个多线程类.该类具有parallel_process()函数,该函数被并行任务覆盖.要处理的数据放入队列中.每个线程中的worker()函数一直调用parallel_process(),直 ...
java中等待所有线程都执行结束
使用CountDownLatch,这其实是最优雅的写法了,每个线程完成后都去将计数器减一,最后完成时再来唤醒 @Test public void testThreadSync3() { final V ...
对话框中WaitForSingleObject等待线程退出导致程序阻塞的原因及解决
今天在调试程序中发现了程序中出现的一个问题,具体如下: 在对话框中新建一个线程worker thread,当用户点击cancel时,通知该线程函数退出,同时用WaitForSingleObject等待 ...
如何使 React 中的 useEffect、useLayoutEffect 只调用一次
如何使 React 中的 useEffect.useLayoutEffect 只调用一次 Hook 是 React 16.8 的新增特性,旨在替代原来 React 中的 Class 组件.Reac ...
C#中的多线程-线程同步基础（控制线程数量）
同步要领下面的表格列展了.NET对协调或同步线程动作的可用的工具: 简易阻止方法构成目的 Sleep 阻止给定的时间周期 Join 等待另一个线程完成锁系统构成目的跨进程? 速度 loc ...
netty worker线程数量_Dubbo线程模型
Dubbo中线程池的应用还是比较广泛的,按照consumer端到provider的RPC的方向来看,consumer端的应用业务线程到netty线程.consuemr端dubbo业务线程池,到prov ...

React中使用worker线程

首先

`npm run eject`

使用worker

React中使用worker线程相关推荐

最新文章

热门文章