javascript - useCallback 对当前组件做了什么?

标签 javascript reactjs react-hooks usecallback

在我读过的 React 文档

Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

没关系,我们需要防止子组件不必要的渲染,但是对于使用 useCallback 的当前组件,useCallback 真正提供了什么?

据我所知 useCallback 是为了防止当前组件重新渲染一遍又一遍地创建相同的函数(如果我错了,请纠正我),并且它将保留对只要依赖项数组包含相同的引用,就可以使用相同的函数(无需创建新函数)。

是吗?或者我们有更深层次的东西?

我检查过这个great answer但它谈论的是防止(子级)重新渲染,我正在寻找 useCallback 对于当前组件意味着什么。

最佳答案

useCallback 确实没有提高它所定义的组件的性能(事实上,它使它变得稍微更糟,因为有一点React 在每个渲染上要做更多的工作)。它对于组件重新渲染的频率没有任何影响。

在组件的每次渲染中,JS 每次仍然“创建”一个新函数。如果依赖项没有改变,useCallback 将简单地丢弃这个新函数,并返回前一个函数。

useCallback 在两种情况下很有用:

  • 您将回调传递给使用 React.memo 的组件(以确保它仅在 props 更改时重新渲染)。如果没有 useCallback,子组件将在每次父组件渲染时重新渲染。

  • 您(或子组件或自定义 Hook )希望在 useEffect 中使用回调,并且希望减少效果运行的次数。

关于javascript - useCallback 对当前组件做了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72360737/

相关文章:

javascript - 通过具有名为“提交”的隐藏字段的提交事件提交表单

Javascript 包含取决于页面的控制

javascript - Cordova Inappbrowser - window.history.back 和forward 在executescript 函数中不起作用

javascript - 仅当表格悬停时才出现滚动条

javascript - React 在我的组件实际拥有数据之前渲染它

javascript - 将顶部滚动 10 像素到特定的 div

javascript - 如何在 render() 中的 JSX 组件树中定义的组件上调用 React forceUpdate()

reactjs - angerouslySetInnerHtml 在渲染期间不会更新

javascript - React.StrictMode : SetState function in useEffect is run multiple times when effect is run once

javascript - React Hooks 未正确更新数组