react hook useCallback的使用

• 首先探索下useCallback是什么

const callback = useCallback(() => {
    console.log('依赖只有count')
  }, [count]);
  <button onClick={() => console.log(callback)}> what is callback</button>

当点击按钮的时候，控制台打印了一下内容

由此看出，常量callback的值就是一个函数，函数里面的代码就是我们写在useCallback钩子里面的代码
那既然我们写什么内容，callback 常量就是什么内容，这样写useCallback不就白写了？不是！

• 接着看看以下例子

 const [count, setCount] = useState(1);
  const [val, setVal] = useState(1);

  const callback = useCallback(() => {//依赖只有count，当val变化时，这里的val还保存着旧的值，因为val的变化不会引起这里的代码重新执行
    console.log(count, val)
  }, [count]);

<div className="App">
      count:<h4>{count}</h4>
      val:<h4>{val}</h4>
      <div>
          <button onClick={() => setCount(count + 1)}>+ count</button>
          <button onClick={() => setVal(val + 1)}>+ val</button>
          <button onClick={() => callback()}> what is callback</button>
      </div>
    </div>

实验步骤如下：
1、点击第一个按钮3次，这时页面是这样的

count已经从1加到了4
2、点击第二个按钮3次，这时页面是这样的

val从1加到了4，这个大家都可以想到，接下来操作第三步看奇迹
3、点击第三个按钮3次

控制台打印，4 1
为什么？不是打印4 4吗？因为useCallback的依赖只有count，在val发生变化时，不能够引起useCallback内部的更新，所以val保留着旧的值，所以打印4 1
4、点击第一个按钮1次

5、点击第三个按钮1次

这时控制台就打印了5 4
明白了val现在为什么是4了吧，因为刚才又点击了第一个按钮，引起了useCallback内部的更新，val又获取了最新的值，也就是常量callback得到了一个最新的函数，里面的变量的值都是最新的