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

@kne/use-ref-callback

v0.1.2

Published

这是一个React hooks,它内部使用ref去保证callback是最新的(你也可以通过参数指定callback为初始值),而不引起组件的不必要渲染

Downloads

296

Readme

use-ref-callback

描述

这是一个React hooks,它内部使用ref去保证callback是最新的(你也可以通过参数指定callback为初始值),而不引起组件的不必要渲染

安装

npm i --save @kne/use-ref-callback

概述

这是一个React hooks,它内部使用ref去保证callback是最新的(你也可以通过参数指定callback为初始值),而不引起组件的不必要渲染

你为何需要使用它?

在我们使用React hooks进行函数式组件开发的时候,经常遇到一个棘手的问题,组件的事件绑定函数的更新问题例如:

const Example = () => {
  const handlerClick = () => {
  };
  return <Button onClick={handlerClick}>按钮</Button>
};

在以上代码中,每次Example组件render,handlerClick都会重新生成,则组件Button的onClick属性就会随之更新,进而触发组件Button的render,但是这其实是不必要的。

所以我们通常会改造代码如下:

import { useCallback } from 'react';

const Example = () => {
  const handlerClick = useCallback(() => {
  }, []);
  return <Button onClick={handlerClick}>按钮</Button>
};

但是以上改造中又会带来新的问题,如果在handlerClick中需要执行一个传给Example的属性的函数,那么我们需要把它放到useCallback的dependence里面

import { useCallback } from 'react';

const Example = ({ callback }) => {
  const handlerClick = useCallback(() => {
  }, [callback]);
  return <Button onClick={handlerClick}>按钮</Button>
};

如果调用的地方的callback没有使用useCallback去限制不必要的render导致的修改,那么handlerClick每次依然会被修改成新的值从而触发Button的不必要render,如果我们不把它放到useCallback的dependence里面,那callback 里面如果引用了可能会修改的state或者props,由于我们一直使用的是老的callback值,导致callback中的值也是老的,就带来了程序错误。

这个hooks就解决了这个问题,它使用ref去记录每次callback修改的值,确保你调用的函数是最新的函数。但是它本身是用useCallback包裹过的,不会引起组件render。

示例

示例代码

  • 这里填写示例标题
  • 这里填写示例说明
  • _useRefCallback(@kne/use-ref-callback),button(antd/lib/button),space(antd/lib/space),_Switch(antd/lib/switch),_message(antd/lib/message)
const { default: useRefCallback } = _useRefCallback;
const { useState } = React;
const { default: Button } = button;
const { default: Space } = space;
const { default: Switch } = _Switch;
const { default: message } = _message;

const BaseExample = ({ callback }) => {
  const [keepInit, setKeepInit] = useState(false);
  const handlerClick = useRefCallback(callback, keepInit);
  return <Space>
    <Switch checked={keepInit} onChange={setKeepInit} /><Button type="primary" onClick={handlerClick}>点击执行callback</Button>
  </Space>;
};

const Example = () => {
  const [count, setCount] = useState(0);
  return <Space direction="vertical">
    <div><BaseExample callback={() => {
      message.info(count);
    }} /></div>
    <div>
      <Button onClick={() => {
        setCount((value) => value + 1);
      }}>状态+1,当前状态:{count}
      </Button>
    </div>
  </Space>;
};

render(<Example />);

API

useRefCallback(callback,keepInit)

|属性名|说明|类型|默认值| | --- | --- | --- | --- | |callback|回调函数|function|-| |keepInit|如果为true,callback更新时返回function将不重新赋值|boolean|false|

返回值: function 包装后的方法,将会通过ref自动赋值为最新的callback