⚛️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


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

查看所有标签

猜你喜欢:

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

流畅的Python

流畅的Python

[巴西] Luciano Ramalho / 安道、吴珂 / 人民邮电出版社 / 2017-5-15 / 139元

【技术大咖推荐】 “很荣幸担任这本优秀图书的技术审校。这本书能帮助很多中级Python程序员掌握这门语言,我也从中学到了相当多的知识!”——Alex Martelli,Python软件基金会成员 “对于想要扩充知识的中级和高级Python程序员来说,这本书是充满了实用编程技巧的宝藏。”——Daniel Greenfeld和Audrey Roy Greenfeld,Two Scoops ......一起来看看 《流畅的Python》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码