项目中看到别人代码基本上每个函数都写了useCallback 于是去查了查到底有什么作用
快看睡着了还是没太明白,直接同事请教了一下
大概浅显的理解一点
useCallback:
简单来说就是返回一个函数,只有在依赖项发生变化的时候才会更新(返回一个新的函数)
比如我有两个按钮A,B,都有onclick函数,
都不写useCallback包装onclick的时候,
点击A 按钮,B按钮的onclick也会重新渲染调用,返回一个新的函数
点击B 按钮,A按钮的onclick也会重新渲染调用,返回一个新的函数
如果useCallback包装B按钮的onclick,
点击A 按钮,B按钮的onclick不会被重新渲染调用,返回之前缓存的函数
点击B 按钮,A按钮的onclick还是会重新渲染调用,返回一个新的函数
useCallback
缓存的是函数,与useMemo
不同的是,useMemo
缓存的是值,
useMemo:
useMemo
和useEffect
的执行时间不同,useEffect
是在componentDidMount之后执行的,而useMemo
是在组件渲染过程中执行的。
useCallback
和 useMemo
参数相同,第一个参数是函数,第二个参数是依赖项的数组。
主要区别是
React.useMemo
将调用fn
函数并返回其结果,而React.useCallback
将返回fn
函数而不调用它。
memo :
作用在子组件上
通常来说,在组件树中 React 组件,
当父组件任何变动的情况下,子组件都会被重新渲染,即使prop所依赖的值没有发生变化,这是react组件的机制。
比如有一个父组件和一个子组件,子组件只是内嵌,不拥有任何父组件依赖,
当父组件调用函数,或者其他操作,导致页面全部重新渲染,子组件自然会重新渲染一次
当使用了React.memo(),该api使得组件仅在它的 props 发生改变的时候才进行重新渲染。但是通过React.memo(),我们可以仅仅让某些组件进行渲染。