⚛️useWorker() React Hook: Running heavy task in background, without blocking the UI

栏目: IT技术 · 发布时间: 4年前

内容简介:Use web workers with react hookBefore you start using thisMore examples:

⚛️useWorker() React Hook: Running heavy task in background, without blocking the UI

Use web workers with react hook

https://useworker.js.org/

:art: Features

  • Run expensive function without blocking UI ( Show live gif )
  • Supports Promises pattern instead of event-messages
  • Size: < 1KB , with zero dependencies
  • Clear API using hook

:floppy_disk: Install

npm install --save @koale/useworker

:hammer: Import

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

:orange_book: Documents

:bread: Demo

⚙ Web Workers

Before you start using this hook , I suggest you to read the Web Worker documentation.

:feet: Usage

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); // non-blocking UI
    console.log("End.");
  };

  return (
    <button type="button" onClick={runSort}>
      Run Sort
    </button>
  );
};

:feet: Examples

More examples: https://github.com/alewin/useWorker/tree/develop/example

:wrench: Roadmap

  • import and use external script inside useWorker function
  • import and use local script inside useWorker function
  • run multiple instance of the worker

:earth_asia: Contribute? Bug? New Feature?

The library is experimental so if you find a bug or would like to request a new feature , open an issue

:bulb: Similar Project

:scroll: License

MIT © alewin


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Domain-Driven Design Distilled

Domain-Driven Design Distilled

Vaughn Vernon / Addison-Wesley Professional / 2016-6-2 / USD 36.99

Domain-Driven Design (DDD) software modeling delivers powerful results in practice, not just in theory, which is why developers worldwide are rapidly moving to adopt it. Now, for the first time, there......一起来看看 《Domain-Driven Design Distilled》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具