react+ts+worker多线程处理大数据

现在的web开发相对于几年前已经不可同日而语，不仅仅是简单的接口拿数据展示，而在有时候也会有大量的数据处理，尤其在接口返回数据不规范且数据量巨大的时候，仅仅在主线程处理就会有页面卡顿的现象，这时候就需要用到 worker 多线程，用子线程来处理复杂的逻辑运算，主线程只需要处理view层展示就好，bingo～～

// worker.js
class WebWorker {
    constructor(worker: WebWorker) {
        let code = worker.toString();
        code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'));

        const blob = new Blob([code],{type: 'text/javascript'});
        // worker地址为同源地址
        return new Worker(URL.createObjectURL(blob));
    }
}

export const workers = () => {
    function workerCode(this: Worker){
        this.onmessage = (e: MessageEvent) => {
            for (let index = e.data.num; index < 10000; index++) {
                this.postMessage(index)
            }
            this.postMessage(JSON.stringify(e))
        }
        this.postMessage(JSON.stringify({}))
    }
    const myWorker = new WebWorker(workerCode);
    return myWorker;
}

// index.tsx
import { useEffect } from 'react'
import { workers } from '../../worker'

const Index:FC<any> = (props) => {
  useEffect(() => {
    const worker = workers() as Worker
    worker.postMessage(JSON.stringify({ num: 0 }))
    worker.onmessage = ({ data }) => {
      const resData = JSON.parse(data)
      console.log('====================================')
      console.log(resData, 'message')
      console.log('====================================')
    }
    return () => worker.terminate(); 
  }, [])
}