面试题：React中Web Workers基础使用

Question

在React项目中，简述如何初始化一个Web Worker来处理简单的密集计算任务，比如计算1到1000000的累加和，并说明Web Worker与主线程之间如何通信。

Answer 1

初始化Web Worker处理累加和任务

1. 创建Web Worker文件：
   • 在项目中创建一个新的JavaScript文件，例如worker.js。
   • 在worker.js中编写计算逻辑：

   self.onmessage = function (event) {
       let sum = 0;
       for (let i = 1; i <= 1000000; i++) {
           sum += i;
       }
       self.postMessage(sum);
   };
   

2. 在React组件中使用Web Worker：
   • 在React组件中引入和初始化Web Worker：

   import React, { useEffect } from'react';
   
   const App = () => {
       useEffect(() => {
           const worker = new Worker(new URL('./worker.js', import.meta.url));
           worker.onmessage = function (event) {
               console.log('计算结果:', event.data);
           };
           worker.postMessage();
           return () => {
               worker.terminate();
           };
       }, []);
   
       return (
           <div>
               <h1>Web Worker示例</h1>
           </div>
       );
   };
   
   export default App;
   

Web Worker与主线程之间的通信

1. 主线程向Web Worker发送消息：
   • 在主线程中，使用worker.postMessage()方法向Web Worker发送数据。例如在上述React组件中worker.postMessage();，这里虽然没有传递具体数据，但也可以传递参数，如worker.postMessage({start: 1, end: 1000000});。
2. Web Worker向主线程发送消息：
   • 在Web Worker中，使用self.postMessage()方法向主线程发送数据。如worker.js中self.postMessage(sum);将计算结果发送回主线程。
3. 监听消息：
   • 在主线程中，通过worker.onmessage事件监听Web Worker发送过来的消息，如worker.onmessage = function (event) { console.log('计算结果:', event.data); };。
   • 在Web Worker中，通过self.onmessage事件监听主线程发送过来的消息，如self.onmessage = function (event) { /* 处理消息 */ };。