什么时候使用useCallback

刚开始使用hook的时候,听旁边的小伙伴说,useCallback的作用是缓存函数,可以不每次渲染的重新创建函数,提升性能,然后给函数式组件的每个函数都使用了useCallback,但是用了几天后觉得,不对呀,既然是这样 react为什么不把所有函数默认useCallback而让使用者去加,这样多此一举呢,于是自己就研究了一下,到底什么时候该使用useCallback。

举个例子:

function CandyDispenser() {
  const initialCandies = ['snickers', 'skittles', 'twix', 'milky way']
  const [candies, setCandies] = React.useState(initialCandies)
  const dispense = candy => {
    setCandies(allCandies => allCandies.filter(c => c !== candy))
  }
  return (
    <div>
      <h1>Candy Dispenser</h1>
      <div>
        <div>Available Candy</div>
        {candies.length === 0 ? (
          <button onClick={() => setCandies(initialCandies)}>refill</button>
        ) : (
          <ul>
            {candies.map(candy => (
              <li key={candy}>
                <button onClick={() => dispense(candy)}>grab</button> {candy}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}

下面这两种写法哪种性能更好呢?

const dispense = React.useCallback(candy => {
  setCandies(allCandies => allCandies.filter(c => c !== candy))
}, [])
const dispense = candy => {
  setCandies(allCandies => allCandies.filter(c => c !== candy))
}

从我们的具体例子中退后一步,甚至从React那里考虑一下:执行的每行代码都有成本。让我稍微重构一下 useCallback 的例子来更清楚地说明事情(没有实际的改变,只是移动下代码):

const dispense = candy => {
  setCandies(allCandies => allCandies.filter(c => c !== candy))
}
const dispenseCallback = React.useCallback(dispense, [])

这是原来的:

const dispense = candy => {
  setCandies(allCandies => allCandies.filter(c => c !== candy))
}

是的,除了useCallback版本做了更多的工作之外,它们完全相同。 我们不仅需要定义函数,还要定义一个数组([])并调用 React.useCallback,它本身会设置属性和运行逻辑表达式等。

因此,在这两种情况下,JavaScript 必须在每次渲染中为函数定义分配内存,并且根据 useCallback 的实现方式,你可能会获得更多的函数定义内存分配(实际情况并非如此,但重点还在这里)

在组件的第二次渲染中,原来的 dispense 函数被垃圾收集(释放内存空间),然后创建一个新的 dispense 函数。 但是使用 useCallback 时,原来的 dispense 函数不会被垃圾收集,并且会创建一个新的 dispense 函数,所以从内存的角度来看,这对性能影响更大。

 性能优化不是免费的。 它们总是带来成本,但这并不总是带来好处来抵消成本。

所以应该什么时候使用 useCallback?

useCallback 要配合子组件的 shouldComponentUpdate 或者 React.memo 一起来使用的,否则就是反向优化。

举个例子:

// Button.jsx
import React from 'react';

const Button = ({ onClickButton, children }) => {
  return (
    <>
      <button onClick={onClickButton}>{children}</button>
      <span>{Math.random()}</span>
    </>
  );
};

export default React.memo(Button);




import React, { useState, useCallback } from 'react';
import Button from './Button';

export default function App() {
  const [count2, setCount2] = useState(0);

  const handleClickButton2 = useCallback(() => {
    setCount2(count2 + 1);
  }, []);

  return (
    <Button 
      count={count2}
      onClickButton={handleClickButton2}
    >Button2</Button>
  );
}

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值