React + Redux应用程序中的Web Workers

本·康弗斯特 （ Ben Konfrst）在Unsplash上拍摄的照片

在后台线程中运行脚本并执行任务，而不会干扰用户界面。

我们都知道JavaScript代码在单个线程中执行。 这意味着代码将逐行执行，并且如果某个特定任务需要很长时间才能完成，则其他所有任务都会搁置直到该任务完成为止。 如果我们要卸载主要威胁Web Workers，那就是全部。

☝️ 你应该知道的

几乎所有浏览器都支持Web Workers。 为了更好地控制错误处理和向后兼容，这是一种更好的检查方法。

if (window.Worker) {

...

}

仅创建一个实例，每次调用new Worker('worker.js')都将加载worker.js文件。 因此，您可能会在网络中看到类似的内容。

React + Redux

使用Redux更新存储很简单。 因此，我们将在一个位置或文件中创建一个Worker实例，将其导出并侦听onmessage事件，在该事件或事件中，当数据来自Worker时调度一个事件。

如果需要将某些脚本导入到全局工作程序范围，则可以在worker.js importScripts 。 在Web Worker中，您可以使用XMLHttpRequest，因此在下面的示例中，我导入axios并将其用于XHR调用。 每当新消息通过工作程序冒泡时，都会调用onmessage侦听器。 postMessage方法将消息发送到工作程序的内部范围。

使用Worker实例。 导入已经存在的Worker并使用要传递给Worker worker.js数据调用postMessage方法

结论

Web Workers是功能强大的API，您绝对应该使用它。 这对于后台同步，预取数据，光线跟踪非常有用。 使用Web Worker会对Web应用程序的性能产生重大影响。

📃有用的链接

• 使用网络工作者
• 工作界面
• 使用JavaScript Web Workers进行计算
• 使用Web Worker加速JavaScript应用程序
• 网络工作者规范

👏 感谢您的阅读。 提出建议，意见，想法 👍

如果您喜欢，拍手，在 medium ， twitter ， github 上关注我 ， 与您的朋友分享 😎

From: https://hackernoon.com/web-workers-in-react-redux-application-129274e84a4e