官方demo写的很清楚

当需要记住一个回调时，使用usePersistFn。比如 你需要传递一个回调给子组件时，如果使用useCallback，只要useCallback的依赖发生改变，就会触发函数更新，就会触发子组件渲染。这样子肯定不是我们期望的。

这个时候使用usePersitstFn就能解决这个问题

3种区别

  1.  // 1. 直接创建   
  2. const cb1 = () => {
  3.   console.log(count)
  4. }
  5. // 2. useCallback
  6. const cb2 = useCallback(()=>{
  7.   console.log(count)
  8. },[count])
  9. // 3. usePersistFn 
  10. const cb3 = usePersistFn(() => {
  11.   console.log(count)
  12. })

简单的来说cb2是cb1的优化，cb3是cb2的优化

  • 当3个函数分别创建在一个组件内，只要存在更新，cb1就会变化，有所依赖cb1的也都会触发变化,相关render
  • count 发生变化，cb2相关变化和触发相关render