reactjs – 在React中创建一个Web worker

wangjuntytl 发布于2019-08-26 14:05 / 3835人阅读

摘要：我有一个使用创建的应用程序而不是已弹出我正在尝试使用网络工作者我尝试过软件包如果我尝试开箱即用的从中导入我收到错误消息告诉我不支持加载器我已经知道了解决方案是弹出应用程序我不想这样做并编辑还是有其他方法在应用程序中使用编辑我在这

我有一个使用create-react-app创建的React应用程序,而不是已弹出.我正在尝试使用网络工作者.我尝试过worker-loader软件包(https://github.com/webpack-co...

如果我尝试开箱即用的worker-loader(从’worker-loader！../ workers / myworker.js’中导入Worker),我收到错误消息,告诉我Create React App不支持Webpack加载器,我已经知道了.

解决方案是弹出应用程序(我不想这样做)并编辑webpack.config.js还是有其他方法在React应用程序中使用Web worker？

编辑：我在这里找到了解决方案：https://github.com/facebookin...

最佳答案
正如我在上面问题的编辑中所写,我在这里找到了解决方案：https://github.com/facebookin...
这是一个有效的例子：

// worker.js
const workercode = () => {

    self.onmessage = function(e) {
        console.log("Message received from main script");
        var workerResult = "Received from main: " + (e.data);
        console.log("Posting message back to main script");
        self.postMessage(workerResult);
    }
};

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;

然后,在需要使用Web worker的文件中：

import worker_script from "./worker";
var myWorker = new Worker(worker_script);

myWorker.onmessage = (m) => {
    console.log("msg from worker: ", m.data);
};
myWorker.postMessage("im from main");

海外云主机服务器托管 table中创建form java中创建二维数组 web workers web-worker

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110028.html

【Under-the-hood-ReactJS-Part8】React源码解读

摘要：接上文，流程图我们已经知道挂载的工作流程，现在我们换个方向研究下方法，这个也是的重要组成部分。这个问题，我们会在下一篇文章中进行解答。。。接上文， React流程图：https://bogdan-lyashenko.gith... this.setState 我们已经知道挂载的工作流程，现在我们换个方向研究下--setState方法，这个也是React的重要组成部分。首先，为什么我...

zhoutk 2019-08-22 18:25 评论0 收藏0
漫谈前端性能突破 React 应用瓶颈

摘要：表示调用栈在下一将要执行的任务。两方性能解药我们一般有两种方案突破上文提到的瓶颈将耗时高成本高易阻塞的长任务切片，分成子任务，并异步执行这样一来，这些子任务会在不同的周期执行，进而主线程就可以在子任务间隙当中执行更新操作。 showImg(https://segmentfault.com/img/remote/1460000016008111); 性能一直以来是前端开发中非常重要的话题...

whlong 2019-08-26 12:10 评论0 收藏0
前端清单第 27 期：React Patent License 回复，Shopify WebVR 购

摘要：新闻热点国内国外，前端最新动态就开源许可证风波进行回复数周前，基金会决定禁止旗下项目使用，因为其在标准的许可证之外添加了专利声明此举引发了社区的广泛讨论，希望能够更新其开源许可证。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清单第 27 期：React Patent License 回复，Sho...

jeffrey_up 2019-08-21 12:03 评论0 收藏0
翻译 | 从 ReactJS 到 React-Native—两者的主要差异是什么？

摘要：跟非常相似，但是在开始尝试你第一个之前，也需要了解两者之间的一些差异。推荐的方式是使用提供的。能用到组件中的或者上以启用这个组件的触摸事件。华翔，Web前端开发工程师著作权归作者所有，转载请联系作者获得授权。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已经诞生有两年左右了，自从适配了An...

darkerXi 2019-08-21 12:05 评论0 收藏0