useMemo用于记住值,减少重新渲染组件所需的时间。
useCallback用于记住函数,通常是为了防止组件的重新渲染
举例子组件接收回调函数作为 props
父组件引入子组件:
const getList = useCallback(
() => fetch(`http://example.com/api/${userId}`),
[userId],
);
return (
<button onClick={getList}></button> //父组件点击button按钮调用getList方法
<childComponent clickFn={getList}> //父组件将getList方法作为参数props传递给子组件
)
使用了useCallback,getList会被记忆,当父组件多次点击button按钮调用getList方法时,React 不会在每次渲染中重新创建这个函数,只要userId没有改变,React 就会重用之前的函数实例(函数引用),userId发生了改变才会创建新的函数实例(函数引用),函数引用没有发生改变,就不会触发子组件的重新渲染。
如果不使用useCallback,每次点击button按钮,getList方法都会创建新的函数实例,从而触发子组件的重新渲染
标签:函数,渲染,getList,userId,js,react,组件,useCallback From: https://www.cnblogs.com/panzai/p/18515413