React-hook: useCallback和useMemo

useCallback

---

（1）作用：

使用形式：

const returnFunction = useCallback(
  ()=>{},// 参数1：inline回调函数
  [],// 参数2：依赖数据
)

useCallback返回值是一个函数也就是前面的returnFunction，它的参数有两个一个是inline回调函数，一个是依赖项。只有依赖项发生变化的时候会产生一个新的callback函数。第二个参数数组是必须的，如果默认为空的情况下只会产生一次新的callback函数。【注：】useCallback到底返回的是个什么玩意儿：（这里存疑？？？）
useCallback其实返回的就是它的第一个参数内联函数。但是它分为两种情况：当依赖项发生改变的时候返回的是更新后的第一个函数参数；如果依赖项没有发生变化返回的就是未经更新的原始的函数参数

（1）使用场景：

useCallback的使用目的不是为了解决它的参数1内联函数重复创建的问题，而是为了解决控件的重复渲染。
举个例子：

function Comp(){
  const [data1,setData1] = useState(0);
  const [data2,useData2] = useState(0);
  const handleClick1 = ()=>{
    setData1(data1+1)
  }
  const handleClick2 = ()=>{
    setData2(data2+1)
  }
  return (
    

      组件Cheap:{data1}
      组件Cheap:{data2}
    
  );
}

Cheap是一个渲染成本比较低的组件，Expensive是一个渲染成本比较高的组件。但是在点击Cheap的时候也会导致Expensive的组件也被重新渲染，即使data2的值并没有改变，这就增加了渲染的成本。
而useCallback就能很好的解决这个重复渲染的问题。

（2）使用方法：

import React, { useState, memo, useCallback } from 'react';
function Comp(){
  const [data1,setData1] = useState(0);
  const [data2,useData2] = useState(0);
  const handleClick1 = ()=>{
    setData1(data1+1)
  }
  const handleClick2 = useCallback(
    ()=>{
      setData2(data2+1);
    },
    [data2]
  )
  return (
    

      组件Cheap:{data1}
      组件Cheap:{data2}
    
  );
}

这样只会在expensive发生点击事件的时候才会去更新handleClick2。不会产生点击Cheap也会一起渲染Expensive的情况了。

useMemo

---

（1）使用场景：

（2）作用效果：