当前位置：首页 > news >正文

react中防止数据多大并需要二次加工处理进行单线程转多线程webworker优化处理（不借助react-webworker）

news 来源：原创 2025/6/18 16:28:55

需求背景

在开发中有的需求往往和分页等会产生冲突比如批量修改后又进行自定义修改后端无法获取前置更改等这个时候不分页数据量会很大而且需要我们对数据进行二次加工然后需要我们进行优化处理这就可以采取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) => {
      //开启loading
      setSpinLoading(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 {
        //结束loading
        setSpinLoading(false);
      }
    },
    [cpeId],
  );

注：期间在worker.js中写逻辑时定义函数等因为闭包需要写到onmessage内里面foreach/for in写法可能会导致报错写成for即可若遇到报错promise未定义等大概率是通信没有成功