栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

实际上,useCallback和useMemo有什么区别?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

实际上,useCallback和useMemo有什么区别?

TL; DR;

  • useMemo
    用来记住函数调用之间以及渲染之间的计算结果
  • useCallback
    是要记住渲染之间的回调本身(引用相等)
  • useRef
    是为了在渲染之间保留数据(更新不会触发重新渲染)
  • useState
    是在渲染之间保留数据(更新将触发重新渲染)

长版:

useMemo
着重避免繁重的计算。

useCallback
着重于另一件事:修复内联事件处理程序(如
onClick={() => { doSomething(...);}
引起
PureComponent
子项重新呈现)时的性能问题(因为函数表达式每次都有参照性的不同)

也就是说,

useCallback
它更接近
useRef
,而不是一种记忆计算结果的方法。

查看文档,我确实同意它看起来令人困惑。

useCallback
会返回一个已记忆的回调版本,仅当输入之一发生更改时才会更改。 当将回调传递给依赖于引用相等性的优化子组件以防止不必要的渲染
(例如,shouldComponentUpdate) 时, 此方法很有用。

假设我们有一个

PureComponent
基于子对象的子对象
<Pure />
,该子对象只有
props
在更改后才会重新渲染。

每次重新渲染父级时,此代码都会重新渲染子级,因为内联函数每次都在引用方面有所不同:

function Parent({ ... }) {  const [a, setA] = useState(0);  ...   return (    ...    <Pure onChange={() => { doSomething(a); }} />  );}

我们可以借助

useCallback

function Parent({ ... }) {  const [a, setA] = useState(0);  const onPureChange = useCallback(() => {doSomething(a);}, []);  ...   return (    ...    <Pure onChange={onPureChange} />  );}

但是一旦

a
更改,我们发现
onPureChange
我们创建的处理程序函数以及为我们记住的React仍然指向旧
a
值!我们有一个错误而不是性能问题!这是因为
onPureChange
使用闭包来访问
a
变量,该变量是在
onPureChange
声明时捕获的。为了解决这个问题,我们需要让React知道在哪里删除
onPureChange
并重新创建/记住(记忆)指向正确数据的新版本。为此,我们在
useCallback的第二个参数中添加
a`了一个
依赖 项:

const [a, setA] = useState(0);const onPureChange = useCallback(() => {doSomething(a);}, [a]);

现在,如果

a
已更改,React将重新渲染组件。在重新渲染期间,它会发现的依赖关系
onPureChange
有所不同,因此需要重新创建/存储新版本的回调。终于一切正常!



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/595068.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号