javascript - 在代码沙箱中使用 npm 包对 web worker 做出反应
问题描述
- 我正在尝试在我的应用程序中实现反应网络工作者。
- 所以我做了一个研究,发现了这个包 https://www.npmjs.com/package/react-webworker。
- 我将有数千个数字,我需要拼接一个数字,然后将其传递给 api。
- 因为会有更多的数据。
- 我决定使用网络工作者。
- 但是当我包含代码网络工作者结果时,我没有得到。
- 你能告诉我如何让网络工作者在我的沙箱中工作吗?
- 在下面提供我的代码片段和沙箱。
https://codesandbox.io/s/redux-async-actions-y5ho5
<DataList
doFetch={store.getState().fetched}
data={store.getState().data}
/>
<MyComponent />
const MyComponent = () => (
<WebWorker url="/worker.js">
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
19, 20, 21,
];
let result= [];
let plantsSearchData = numbers.map(search => {
// console.log("numbers---->", search);
if (search.length > 1) {
result.push(search);
}
console.log("pushed numbers---->", result);
});
const response = await axios.get( "https://reqres.in/api/users?page=2"
);
{({ data, error, postMessage, updatedAt, lastPostAt }) => (
<div>
{data && (
<div>
<strong>Received some data:</strong>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)}
<button
onClick={() => postMessage("hello")}
disabled={updatedAt < lastPostAt}
>
{updatedAt < lastPostAt ? "Loading..." : "Go"}
</button>
</div>
)}
</WebWorker>
);
解决方案
在您的 main.js 文件中导入 web-worker 并在您的 componentDidMount() 生命周期中创建一个 webworker 实例
使用此链接获取更多信息网络工作者反应
推荐阅读
- php - 显示不同的输出
- git - 如何使用 git diff 显示一些不可见的字符差异?
- python - 如何递归计算Python中两个坐标之间的曼哈顿距离?
- actionscript-3 - 如何将数组随机保存在数组中
- r - 如何根据列制作“For循环”
- python - 如何合并具有重复键的字典列表
- python - 计算熊猫中一堆特定关键字出现次数的最有效方法是什么?
- rust - 为什么 if-let 表达式使用赋值运算符而不是相等运算符?
- python-3.x - 使用GPU的结果有什么区别?
- github-pages - 尽管在我的实时服务器上本地工作,但图像不会加载到 git hub 页面上。我检查了路径和 Capitilisation