useMemo useCallback

useMemo (const cachedValue = useMemo(calculateValue, dependencies))
是 React 中的一个 Hook，它可以用来缓存计算结果，并在后续的渲染中重复利用这些计算结果。useMemo 接收两个参数：一个函数和一个依赖数组。当依赖数组中的任何一个值发生变化时，useMemo 会重新执行传入的函数，并返回新的计算结果。

useMemo和useCallback的区别及使用场景(const cachedFn = useCallback(fn, dependencies))
useMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态
useCallback 缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费；
另外还需要注意的是，useCallback应该和React.memo配套使用，缺了一个都可能导致性能不升反而下降。

【React Hooks】memo和useCallback搭配所带来的性能优化
场景： let Home = () => {
const [searchId, setSearchId] = useState(0)
// 函数
const handleSearchIdChange = (e) => {
console.log('handleSearchChange 被创建了')
setSearchId(e.target.value)
}

return (
    <>
        <Search handleSearchId={handleSearchId}/> // 传入的是函数
        <Detail />
    </>
)

}

/** Search.tsx 伪代码 */
let Search = (props: ISearchProps) => {

const { handleSearchId } = props

return (
    <>
        <input onChange={(e) => {handleSearchId(e)}}/>
    </>
)

}

export default Search

/** Detail.tsx */
let Detail = () => {

console.log('Detail Component 被渲染了')
return (
    <span>test</span>
)

}

export default Detail
问题：
1.Detail都伴随着被重新创建了，从而造成了不必要的性能浪费
2.Home组件中，handleSearchId方法被重新创建

问题一的办法（React.memo类似于React.PureComponent，能对props做浅比较，防止组件无效的重复渲染!）
let Detail = memo(() => {

console.log('Detail Component 被渲染了')
return (
    <span>test</span>
)

})

export default Detail

问题二的办法（使用usecallback）

原文链接：https://blog.csdn.net/weixin_43804496/article/details/131040368
https://www.cnblogs.com/fe-linjin/p/11391967.html