React-hooks-useCallback

||·····

于 2021-06-07 15:02:24 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

分类专栏： React-hooks js 文章标签：前端 react javascript

本文链接：https://blog.youkuaiyun.com/wangzhan991011/article/details/117662072

5 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍了React Hooks中的useCallback，它用于创建优化过的回调函数，仅在依赖项改变时更新。通过使用useCallback，可以减少不必要的子组件渲染，提高应用性能。例子中展示了如何使用useCallback与依赖项数组，确保在数据不变时保持回调函数的引用稳定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useCallbak

返回一个memoized（被记住的，备忘）的回调函数

// 官网示例
const memoizedCallbak = useCallback(
	()=>{
        doSomething(a,b);
    },
    [a,b]
)

把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子组件时，它将非常有用。

在每一次渲染组件时返回的函数其实都是不一样的，使用useCallback包裹之后并添加依赖项的函数，只会在我们函数所需数据改变的时候才会重新为我们更新函数，否则会一直使用之前记住的那个函数，减少了一些不必要的渲染性能浪费