面试题：useEffect的Clean Up 什么时候触发？

在这里插入图片描述

useEffect作为做常用的Hook，以下三个知识点你有必要了解下~

防止写出奇怪的代码祸害队友，而我不幸就是这个受害者！！！！！

useEffect的依赖项为空

useEffect的dependencyList作为一个可选参数，当他的依赖项为空的时候，每次引起页面的渲染更新的时候，都会调用一次该useEffect参数。

function App() {
  const [updateList, setUpdateList] = useState([])
  useEffect(() => {
    console.log("dependencyList 为null的useEffect被调用了")
  })
  return (
    <div className="App">
      <header className="App-header">
        <div>{updateList.map(time => { return <div>time:{time}</div> })}</div>
        <div onClick={() => { setUpdateList([...updateList, +new Date()]) }}>Add record</div>
      </header>
    </div>
  );
}

效果如下：

在这里插入图片描述

在示例中，点击页面的Add Record 按钮共计四次，右侧中显示了共计2+4次的日志，这说明了每次页面的刷新时候，由于dependencyList为空，所以每次的副作用都可以被调用到。

useeffect的依赖项为空数组的时候

在第一个示例中，我们可以猜想，每次的页面更新，useEffect作为副作用，都会被调用，但当dependencyList为空数组的时候，由于没有匹配到任何的dependency，所以会导致为每次的副作用都跟我们无关，只有第一次初始化页面的时候才会匹配到。

同样的，下面一个简单的例子。

function App() {
  const [updateList, setUpdateList] = useState([])
  useEffect(() => {
    console.log("dependencyList 为空数组的useEffect被调用了")
  }, [])
  return (
    <div className="App">
      <header className="App-header">
        <div>{updateList.map(time => { return <div>time:{time}</div> })}</div>
        <div onClick={() => { setUpdateList([...updateList, +new Date()]) }}>Add record</div>
      </header>
    </div>
  );
}

在这里插入图片描述

usseEffect返回函数代表什么？

首先，讲这个内容并不是想要表达什么，只是因为很多人在写博客的时候，内容太过于旧了，所以现在就更新一波，并不是说谁谁谁的问题。

打开CSDN，可以看到很多关于useEffect返回函数的描述
在这里插入图片描述

事实真的是这样嘛？让我们测试下。

function App() {
  const [updateList, setUpdateList] = useState([])
  useEffect(() => {
    return () => {
      console.log('useEffect的返回函数被调用')
    }
  }, [])
  return (
    <div className="App">
      <header className="App-header">
        <div>{updateList.map(time => { return <div>time:{time}</div> })}</div>
        <div onClick={() => { setUpdateList([...updateList, +new Date()]) }}>Add record</div>
        <a href='https://www.baidu.com'>跳转到百度</a>
      </header>
    </div>
  );
}