react-hooks useEffect触发时机，依赖项为对象或者数组时应该如何处理？

react hooks的依赖项目可以按照数据类型分为基本数据类型和引用数据类型，当为基本数据类型时useEffect可以根据依赖项的变化而去发生改变，当为引用数据类型时，useeffect总是会被触发，因为useEffect这里进行的时浅比较

eg:当依赖项为基本数据类型时

const [count, setCount] = useState[0];

useEffect(() => {

console.log(count)

}, [count]);

这里当count发生变化时会在useeffect钩子中打印出count

eg：当依赖项为引用数据类型时

const [obj, setObj] = useState({});

useEffect(() => {

console.log(obj)

}, [obj]);

这里只要我们组件中有obj更新，即使obj完全没有变化，也会打印出obj，因为useEffect作的是浅比较，始终会返回false

那如果我们想要的是obj中有发生改变时采取打印obj这个时候要怎么办呢？

解决方法有两种：

第一种：使用useRef

我们只需要写个usePrevious的钩子方法即可

function usePrevious(value) {

const ref = useRef();

useEffect(() => {

ref.current = value;

}, [value]);

return ref.current;

}

然后去使用：

useEffect(() => {

if (!equalsObj(defaultKeysRef, defaultKeys)) {

setDisplayKeys(defaultKeys);

}

}, [defaultKeys, defaultKeysRef]);

这个时候就是当发生改变时才会

第二种：使用use-deep-compare-effect包

import useDeepCompareEffect from 'use-deep-compare-effect';

useDeepCompareEffect(() => {

console.log('deep-keys', defaultKeys);

}, [defaultKeys]);

将useEffect方法替换成useDeepCompareEffect即可