reactjs – 在React中創(chuàng)建一個Web worker

wangjuntytl 發(fā)布于2019-08-26 14:05 / 4113人閱讀

摘要：我有一個使用創(chuàng)建的應用程序而不是已彈出我正在嘗試使用網(wǎng)絡工作者我嘗試過軟件包如果我嘗試開箱即用的從中導入我收到錯誤消息告訴我不支持加載器我已經(jīng)知道了解決方案是彈出應用程序我不想這樣做并編輯還是有其他方法在應用程序中使用編輯我在這

我有一個使用create-react-app創(chuàng)建的React應用程序,而不是已彈出.我正在嘗試使用網(wǎng)絡工作者.我嘗試過worker-loader軟件包(https://github.com/webpack-co...

如果我嘗試開箱即用的worker-loader(從’worker-loader！../ workers / myworker.js’中導入Worker),我收到錯誤消息,告訴我Create React App不支持Webpack加載器,我已經(jīng)知道了.

解決方案是彈出應用程序(我不想這樣做)并編輯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");

云服務器 GPU云服務器 table中創(chuàng)建form java中創(chuàng)建二維數(shù)組 web workers web-worker

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110028.html

【Under-the-hood-ReactJS-Part8】React源碼解讀

摘要：接上文，流程圖我們已經(jīng)知道掛載的工作流程，現(xiàn)在我們換個方向研究下方法，這個也是的重要組成部分。這個問題，我們會在下一篇文章中進行解答。。。接上文， React流程圖：https://bogdan-lyashenko.gith... this.setState 我們已經(jīng)知道掛載的工作流程，現(xiàn)在我們換個方向研究下--setState方法，這個也是React的重要組成部分。首先，為什么我...

zhoutk 2019-08-22 18:25 評論0 收藏0
漫談前端性能突破 React 應用瓶頸

摘要：表示調(diào)用棧在下一將要執(zhí)行的任務。兩方性能解藥我們一般有兩種方案突破上文提到的瓶頸將耗時高成本高易阻塞的長任務切片，分成子任務，并異步執(zhí)行這樣一來，這些子任務會在不同的周期執(zhí)行，進而主線程就可以在子任務間隙當中執(zhí)行更新操作。 showImg(https://segmentfault.com/img/remote/1460000016008111); 性能一直以來是前端開發(fā)中非常重要的話題...

whlong 2019-08-26 12:10 評論0 收藏0
前端清單第 27 期：React Patent License 回復，Shopify WebVR 購

摘要：新聞熱點國內(nèi)國外，前端最新動態(tài)就開源許可證風波進行回復數(shù)周前，基金會決定禁止旗下項目使用，因為其在標準的許可證之外添加了專利聲明此舉引發(fā)了社區(qū)的廣泛討論，希望能夠更新其開源許可證。 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前端開發(fā)工程師著作權歸作者所有，轉載請聯(lián)系作者獲得授權。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已經(jīng)誕生有兩年左右了，自從適配了An...

darkerXi 2019-08-21 12:05 評論0 收藏0