微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

当函数用作私有方法时,我是否从 useCallback 中获得任何性能提升?

如何解决当函数用作私有方法时,我是否从 useCallback 中获得任何性能提升?

React 的 useCallback 钩子在将生成的(记忆化的)函数传递给子组件以避免不必要的重新渲染时提供了性能提升。

当钩子用作内部(“私有”)函数时,我是否会获得任何性能提升? 例如:

function Foo({numbers}) {

  const dep1 = React.useMemo(() => {......},[....])
  const calc = React.useCallback((a) => a * dep1,[dep1])

  return (
    <>
      {numbers.map((num) => (
        <div key={num}>
          Num: {num},Calculated: {calc(num)}
        </div>
      ))}
    </>
  );
}

或者做一个简单的

const calc = (a) => a * dep1

那个案例是一样的吗?

换句话说,由于 useCallback 记住的是函数引用,而不是函数本身,所以在不将其作为 prop 传递时是否必须使用它?

解决方法

对于本地使用(组件内部)=LEN(FORMULATEXT(A5))-LEN(SUBSTITUTE(FORMULATEXT(A5)," ",""))+1 字面上的doesn't make 任何改进。它会在每次重新渲染时被调用,即使考虑到它会从内存中获取一个原始函数对象,它仍然会重新创建内联函数。

但是,如果 useCallback 缓存从一些繁重的计算中接收到的值,则它是有意义的。它使用了记忆原理,这有助于避免冗余的繁重操作。

附言

值得注意的是,使用 useMemo 包装私有方法的唯一合理用例是如果(出于任何原因)您打算将此方法放入 useEffect 依赖项中。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。