reactjs – 在React中創建一個Web worker

wangjuntytl 發布于2019-08-26 14:05 / 4105人閱讀

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

我有一個使用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");

GPU云服務器云服務器 table中創建form java中創建二維數組 web workers web-worker

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/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