useCallback记忆函数与useMemo记忆组件

useCallback记忆函数

• 目的：缓存函数，优化代码
• 防止因为组件重新渲染，导致方法被重新创建，起到缓存作用，只有第二个参数变化了，才重新声明一次。
• 举个栗子

    var handleClick = useCallback(()=> {
      console.log(name)
    }, [name])
 //  只有name改变后，这个函数才会重新声明一次，
 //  如果传入空数组，那么就是第一次创建后就被缓存，如果name后期变了，拿到的还是老的name。
 //  如果不传第二个参数，每次都会重新声明一次，拿到的就是最新的name。

useMemo 记忆组件

• 类似于vue的计算属性
• useCallback的功能完全可以由useMemo所替代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。

var handleClick  = useMemo(() => {
  return ()=> {
     console.log(name)
  }
}, [依赖]) // 当依赖值发生变化时才会重新声明一次

useCallback 与 useMemo的区别

• 唯一区别是：useCallback不会执行第一个参数函数，而是将它返回给你，而useMemo会执行第一个函数并且将函数执行结果返回给你。