React - useEffect 实现 componentWillUnmount

参考：

React - 官方文档：清除 effect

useEffect 通过返回一个清除函数来实现组件销毁时的清除操作。官方文档是这样解释 useEffect 的清除函数的：通常，组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。为防止内存泄漏，清除函数会在组件卸载前执行。另外，如果组件多次渲染（通常如此），则在执行下一个 effect 之前，上一个 effect 就已被清除。官方文档里说的“组件卸载”，实际上包含两个意思：

组件销毁
组件重渲染

组件重渲染时，useEffect 的流程比较容易理解，同官方文档解释的一样，React 会在该组件重渲染时查询当前 useEffect 是否定义清除函数，若定义了，则会在执行 effect 之前，调用上一个 effect 的清除函数。但组件销毁时，useEffect 流程不同在于：不会再执行下一个 useEffect 中的副作用(因为下一步组件就要被销毁了)，React 只会将上一次 useEffect 的清除函数执行，然后销毁组件。

componentWillUnmount

综上，我们要模拟实现 componentWillUnmount 生命周期，在组件创建时添加某个副作用，然后一直到组件销毁时，清除副作用，代码编写如下：

useEffect(()=>{
  // do something
  return ()=>{
    // clear ...
  }
}, [])

我们传入一个空依赖数组，告诉 React 该 useEffect 只执行一次，它只会在组件挂载时执行一次，然后清除函数就会一直保存，直到组件销毁时，会被 React 调用，执行清除函数。

jtwang7 / React-Note

React - useEffect 实现 componentWillUnmount #22

React - useEffect 实现 componentWillUnmount

componentWillUnmount