例子

之前和一个新同事一起开发时候，他写了一段类似这样的一段代码，我之前也写过类似的，因此觉得有必要记录一下

const [params,setParams] = useState({})
useEffect(() => {
    return () => {
      setParams({...params,pageNum:1})
    };
}, []);//没在依赖数组中添加params
复制代码

这显然是不符合react hook标准的，useEffect的函数获取不到最新的值可能会导致一些场景的错误，可以用函数式useState(state => state)来获取到最新值或者使用useReducer，官网都有介绍清楚的,传送门；

useEffect 函数里的return与依赖数组的关系

useEffect(() => {
    return () => {
      console.log(123);
    };
  },[visible,list]);//每次visible、list更新都会触发return 匿名函数
复制代码

useEffect(() => {
    if(visible&&list.length > 0)
    return () => {
      console.log(123);
    };
  },[visible,list]);//只有当组件销毁的时候触发return 匿名函数
复制代码

查阅源码可得

function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
    debugger
    var hook = updateWorkInProgressHook();
    var nextDeps = deps === undefined ? null : deps;//更新后的依赖
    var destroy = undefined;
    if (currentHook !== null) {
      var prevEffect = currentHook.memoizedState;
      destroy = prevEffect.destroy;//return匿名函数，销毁组件的时候执行该函数

      if (nextDeps !== null) {
        var prevDeps = prevEffect.deps;//之前的依赖

        if (areHookInputsEqual(nextDeps, prevDeps)) {//通过Object.js比较前后依赖数组，如果函数没用到过依赖数组，nextDeps、prevDeps一直不相等

          hook.memoizedState = pushEffect(hookFlags, create, destroy, nextDeps);
          return;
        }
      }
    }

    currentlyRenderingFiber$1.flags |= fiberFlags;
    hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);
  }
复制代码