需求背景
在开发中 有的需求往往和分页等会产生冲突 比如批量修改后又进行自定义修改 后端无法获取前置更改等 这个时候不分页数据量会很大而且需要我们对数据进行二次加工 然后需要我们进行优化处理 这就可以采取webworker多线程处理了 下面是一个没有借助react-webworker插件的原生简单例子
实现过程
即粘即用 逻辑步骤我都写在代码注释里面了
这是我的目录结构 worker.js为我创建的多线程处理文件 选中的为我使用的文件地址
worker.js页面
// 定义worker线程脚本代码
const workercode = () => {self.onmessage = function (e) {//e为通信传入的对象//这里写需要对数据处理加工的内容//例子const result=[]result=e.data.map(item=>item.name)//发送回去self.postMessage(result);};
};
//为了将workerCode函数转化为一个可由Worker构造函数使用的URL，将该函数转换为字符串，并从中提取函数体。接着，使用此函数体内容创建一个Blob对象，并通过URL.createObjectURL创建一个指向该Blob的URL。 把脚本代码转为string
let code = workercode.toString();
code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'));const blob = new Blob([code], { type: 'application/javascript' });
const worker_script = URL.createObjectURL(blob);module.exports = worker_script;
使用页面
//1.引入
import worker_script from './worker.js';//2.定义
const worker = new Worker(worker_script);//3.发送数据及接收 我这边直接放入一个例子 核心内容会标注const applyData = useCallback(async (num, urlFilterLevelLists, wall) => {//开启loadingsetSpinLoading(true);try {// 获取原始数据const res = await getApplyList(cpeId);// 将数据发送到 Web Worker 处理worker.postMessage({data: res,wall,urlFilterLevelLists,num,level,});// 监听 Web Worker 的返回结果worker.onmessage = (e) => {const { processedData, idMap } = e.data;batchUpdates(() => {setExpandedRowKeys(Array.from(idMap.values()));setApplyDataSource(processedData);});};} finally {//结束loadingsetSpinLoading(false);}},[cpeId],);
注：期间在worker.js中写逻辑时 定义函数等因为闭包需要写到onmessage内 里面foreach/for in写法可能会导致报错 写成for即可 若遇到报错promise未定义等 大概率是通信没有成功
)
