<div align="center">

🚨 需要新的维护者! 🚨

🔍 寻找热情的人接手 useWorker 仓库。

🌟 对维护这个酷炫项目感兴趣吗? 🌟

</div>

---

<h1 align="center"> <br> <img width="300px" src="https://yellow-cdn.veclightyear.com/2b54e442/73fc82a9-0635-49d2-8f92-e860d03737f5.png" alt="useWorker" title="useWorker() 使用 React Hook 的 Web Workers" /> <br> </h1> <h2 align="center"> 使用 React Hook 的 Web Workers <br /> https://useworker.js.org/ <a href="https://twitter.com/intent/tweet?text=useWorker - 使用 React Hooks 的 Web Workers&url=https://github.com/alewin/useWorker&via=alessiokoci&hashtags=react,useworker,hooks,javascript"> <br /> <img alt="Tweet" src="https://yellow-cdn.veclightyear.com/2b54e442/889f9747-1d89-4c1f-881b-1823439388ea.svg?style=social" /> </a> </h2> <h3 align="center"> <img alt="GitHub" src="https://img.shields.io/npm/dm/@koale/useworker" /> <img alt="size" src="https://img.shields.io/bundlephobia/minzip/@koale/useworker/2.1.0" /> <img alt="GitHub" src="https://img.shields.io/npm/l/@koale/useworker" /> <img src="https://badgen.net/npm/types/tslib" alt="TypeScript 支持" title="TypeScript 支持" data-canonical-src="https://badgen.net/badge/TypeScript/Support" style="max-width:100%;"> </h3>

---

🎨 特性

• 运行昂贵的函数而不阻塞 UI（查看实时 GIF）
• 支持Promise模式而非事件消息
• 大小：不到3KB！
• 使用 Hook 的清晰 API
• TypeScript 支持
• Web Worker 实例垃圾回收
• 远程依赖选项
• 超时选项

---

💾 安装

• @latest

npm install --save @koale/useworker

---

🔨 导入

import { useWorker, WORKER_STATUS } from "@koale/useworker";

---

📙 文档

• 入门
• API
• 示例
• 限制

---

🍞 演示

• 排序：对 50000 个随机数进行排序
• CSV：生成 CSV、解析 CSV、转换为 JSON
• 外部依赖：在 Web Worker 中使用外部脚本

---

⚙ Web Workers

在开始使用这个钩子之前，我建议你阅读 Web Worker 文档。

---

🐾 用法

import React from "react";
import { useWorker } from "@koale/useworker";

const numbers = [...Array(5000000)].map(e => ~~(Math.random() * 1000000));
const sortNumbers = nums => nums.sort();

const Example = () => {
  const [sortWorker] = useWorker(sortNumbers);

  const runSort = async () => {
    const result = await sortWorker(numbers); // 不阻塞 UI
    console.log(result);
  };

  return (
    <button type="button" onClick={runSort}>
      运行排序
    </button>
  );
};

---

🖼 实时演示

<img alt="useworker 演示" src="https://yellow-cdn.veclightyear.com/2b54e442/9ca5dd88-eb12-49d5-82a6-0987fd35b9b0.gif" />

---

🐾 示例

更多示例：https://github.com/alewin/useWorker/tree/develop/example

---

🔧 路线图

• 终止 Web Worker
• 响应式 Web Worker 状态
• 添加超时选项
• 在 useWorker 函数中导入并使用远程脚本
• 支持 可转移对象
• 测试 useWorker #41
• 在 useWorker 函数中导入并使用本地脚本 #37
• useWorkers Hook #38
• useWorkerFile Hook #93

---

🤔 动机和限制

大多数 React 项目都是通过 Create React App 初始化的。 不幸的是，CRA 不提供对 Web Workers 的支持，除非你 eject 并手动更改 webpack 配置。

这个库允许你使用 Web Workers 而无需更改 CRA 配置，这就是为什么经常会有限制或特殊的变通方法。

如果你对手动更改 webpack 配置以管理你的 workers 感兴趣，请参阅：worker-loader

---

已知问题

有一个与 Babel 等转译工具相关的已知问题，可能会导致 Not referenced 错误。

由于这个库的方法是将传递给 Hook 的整个函数移动到 worker 中，如果函数被转译，转译工具使用的变量定义可能会在函数移动到 worker 时超出作用域，导致意外的引用错误。

如果你遇到这种类型的问题，一个解决方法是将你的函数声明包装在一个函数对象中作为字符串。

const sum = new Function(`a`, `b`, `return a + b`)

---

🌏 贡献？错误？新功能？

这个库是实验性的，所以如果你发现错误或想要请求一个新的功能，请打开一个issue

---

💡 类似项目

• greenlet
• react-hooks-worker

---

💻 维护者

• @zant
• @alewin

💻 贡献者

• 感谢：
• @zant（测试、CI、RFC、错误修复、localdependencies 功能等）
• @101arrowz（isoworker 包提案）
• @z4o4z（Typescript 实现、RFC 讨论）
• @IljaDaderko（Typescript 支持、RFC 讨论）
• @ophirg（Typescript 支持）
• @Pigotz（RFC 讨论）
• @gubo97000（修复 #108）

如何贡献？

阅读 CONTRIBUTE.md

---

📜 许可证

MIT

---