npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

use-polling-hook

v1.1.1

Published

usePolling hook 可以帮助你快速创建轮询任务,并且帮助你处理复杂的 loading 变化。(仅在参数变动时,改变 loading 的值,避免渲染闪烁)

Downloads

4

Readme

usePolling 轮询调用任务

usePolling hook 可以帮助你快速创建轮询任务,并且帮助你处理复杂的 loading 变化。(仅在参数变动时,改变 loading 的值,避免渲染闪烁)

使用方法:


    /** 轮巡函数 */
  const pollingFn = useCallback((queryParams) => {
    // 查询
   dispatch({ type: 'fetchSystemReports', payload: queryParams });
  }, []);

  const [loading, forceUpdate] = usePolling({
    interval: 1000,
    pollingFn,
    params:{
      page: pagination.page - 1,
      pageSize: pagination.pageSize,
      paramsA,
      paramsB,
      paramsC,
    }
  });
  <Button onClick={forceUpdate}>刷新</Button>
  <Table loading={loading}>

usePolling 接受一个参数对象,其中包含

  1. pollingFn 查询函数, 注意为了避免重复注册轮训,usePolling需要用useCallback包裹,保证每次rerender时,pollingFn的内存地址不变,因为无法对函数进行deepEqual比较
  2. params 查询参数,会在调用pollingFn时传入。usePolling会监听params一层内容的变化,在hook内部会对params内部属性依次进行shallowEqual比较,所以你可以直接在使用hook时,以字面量的方式传入params,并且不必考虑params的内存地址变动
  3. interval 轮训时间,默认1s,当interval变化时,也会引起usePolling重新注册setInterval任务也

loading

usePolling返回loading和forceUpdate,你可以直接将loading传递给需要渲染的组件 loading会在每次参数变动后的第一次渲染时被修改,后面轮训时不会改变loading的内容,保证渲染时不会出现闪烁的现象

forceUpdate

如果你需要强制刷新数据,请使用forceUpdate函数来保证usePolling内部的运行逻辑不被破坏,forceUpdate的本质也是改变一个内部的参数值,来达到强行重新注册任务的效果

简单执行流程如下

alt text

use-polling-hook

use-polling-hook