有这样一个场景，在加载网页时，突然无响应，直到所有资源加载完毕才响应。但是，在加载资源时，用户可能无法在页面上执行某些功能，例如单击、选择或拖动元素。这时候你可能会想到使用Webworker来帮助我们解决这个问题。在本文中，我们将学习如何在React应用程序中使用WebWorker。我们还将学习通过useWorkerizedReducer在webworker中使用useReducerHook。webworkerWebworker是在后台运行的JavaScript脚本，不会干扰其他脚本的执行。由于JavaScript是单线程语言，它不能同时运行多个脚本，这对于运行大型计算脚本来说是一个问题。WebWorkers帮助在后台加载繁重的计算脚本，而不影响页面的性能。语法constworker=newWorker(newURL("./worker.js",import.meta.url),{type:"module",});Worker构造函数接受两个参数；第一个是工人文件名，第二个是工人的类型。类型可以是经典的，也可以是模块。如果未指定类型，则默认类型为classic。在本文中，我们将使用模块类型，因为reducer只能在组件中使用。要在WebWorker组件中使用导入功能，我们必须将import.meta.URL添加到URL构造函数中。useReduceruseReducer是一个用于存储和更新状态的ReactHook。它接受三个参数：reducer，initialstate，作为最后一个参数，initialfunction，可选：const[state,dispatch]=useReducer(reducer,initialArg,init);useReducer返回一个包含当前状态值的数组，以及一个您向其提供要执行的操作的调度函数。调度函数接受一个指定要执行的操作类型的对象。它本质上是将动作类型传递给reducer函数，reducer函数用于更新状态。reducer函数reducer是一个接受两个参数的函数，当前状态和动作对象。它使用接收到的动作来确定状态变化并返回新状态。下面的代码演示了如何使用reducer函数来改变状态：functionreducer(state,action){switch(action.type){case'increment':return{count:state.count+1};case'decrement':return{count:state.count-1};默认值：抛出新的错误（）；}}每当action.type触发reducer函数时，它会返回新状态作为reducer函数内部的更改。Action是一种对象类型，它指示reducer如何更改状态。它必须具有类型属性。action.type可用于条件语句以确定状态如何更改。为了让reducer功能在webworker中运行，我们必须使用useWorkerizedReducer。useWorkerizedReduceruseWorkerizedReducer类似于useReducer，除了它允许reducer在worker中执行，还允许我们创建一个动态的React应用程序。useWorkerizedReducer允许将长时间运行的计算放置在reducer中，而不会影响应用程序的响应能力。useWorkerizedReducer负责为worker提供useReducer的功能。useWorkerizedReducer通过将reducer的状态复制到主线程来弥合工作线程和主线程之间的差距。reducer操作worker的状态对象，使用postMessage()来保持复制主线程的当前状态。实际操作：构建一个简单的计数器应用程序要了解如何将Reducer放入webworker中，让我们创建一个简单的计数器应用程序，该应用程序会在当前状态更改时返回。首先，打开一个命令行，输入以下命令：npxcreate-react-appmy-appcdmy-appnpmstart应用安装成功后，我们需要使用useWorkerizedReducer作为程序的依赖。要安装“useWorkerizedReducer”，请在终端中执行以下命令：npmiuse-workerized-reducer现在我们已经成功安装了useWorkerizedReducer，让我们创建一个worker.js文件。创建worker.js由于我们在worker.js文件中使用reducer，因此我们将在src文件夹中创建worker.js文件：单击创建新文件，将其命名为worker.js，并将其保存到src文件夹中，如图所示下面：现在我们已经创建了worker.js文件，让我们在其中添加以下reducer代码：//worker.jsimport{initWorkerizedReducer}from"use-workerized-reducer";initWorkerizedReducer("counter",//reducer'snameasync(state,action)=>{switch(action.type){case"increment":state.counter+=1;break;case"decrement":state.counter-=1;break;默认:thrownewError();}});在上面的代码中，我们从use-workerizedReducer中导入了initWorkerizedReducer。initWorkerizedReducer()有两个参数：第一个是减速器的名称：counter。第二个是异步函数。现在我们已经准备好worker.js文件，我们需要从use-workerizedreducer/react导入useWorkerizedReducer，这允许我们从worker文件中调用reducer函数：//main.jsimport{render,h,Fragment}from"反应“；从“use-workerized-reducer/react”导入{useWorkerizedReducer}；constworker=newWorker(newURL("./worker.js",import.meta.url),{type:"module",});functionApp(){//一个worker可以包含多个不同名称的reducerconst[state,dispatch,busy]=useWorkerizedReducer(worker,"counter",//Reducer名称{counter:0}//初始状态);返回（<>计数：{state.counter}
