常见例子

首先写一个段代码， 设置一个state count, 写一个logCount函数把count log出来，把logCount传入usejEffect里，并且把自己作为依赖传入第二个依赖里，我们希望每次count改变了，然后useEffect才会执行，并且console log出一次count

然后我们就会看到这个warning

The 'logCount' function makes the dependencies of useEffect Hook (at line 12) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'logCount' in its own useCallback() Hook.

为什么会出现这样的Warning

在我们的这个例子里，logCount作为依赖参数传入了useEffect里，也就是说每当logCount改变了，useEffect就会执行一次。你可能会想logCount并没有实际上的改变，但是对象的比较是基于referential equality.

console.log({name:'小明' === {name: '小明'}); //结果是false ;

即使这两个object拥有一样的key和value，但是他们memory的位置不同，所以是不等的。

同样的逻辑也可以用在函数的比较。

const fn1 = () => '小明'; const fn2 = () => '小明'; console.log(fn1===fn2); //结果false

在最开始的代码例子中，每次render，logCount这个函数都会被重新创造，所以render前的logCount并不等于render后的logCount。

useCallBack是怎么解决这个问题的

useCallBack会返回一个memoized的函数，reference只有在dependecy array改变的时候才会改变。这样子useEffect就会正确的根据count的改变去执行console log.