随笔

React的useCallback与memo

useCallback(fn, [dep])；
【该hooks不阻止函数创建，而是在依赖不变的情况下返回旧函数地址（保持地址不变）。】

React.memo()；
【校验props；若props的数据内存地址产生变化就重新渲染组件（props是函数时无效）】

React.memo检测的是props中数据的栈地址是否改变。而父组件重新构建的时，会重新构建父组件中所有函数（旧函数销毁，新函数创建，等于更新了函数地址)，新的函数地址传入到子组件中被props检测到栈地址更新。也就引发了子组件的重新渲染

使用场景：
在往子组件传入了一个函数fn，并且[子组件]被React.momo缓存了的时候使用

const Child = React.memo(() => {
  return <div></div>
})
const childFun = useCallback(() => {
// 函数体
}, [dep])
return (
<div>
<Button onClick={() => setParentState(val => val+1)}>点击我改变父组件中与Child组件无关的state</Button>
    <Child fun={childFun}/>
</div>
)