React中useEffect return的函数什么时间执行

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";


function App() {
  const [visible,setVisible] = useState(true)
  return (
   <div>
     <button onClick = {()=>{setVisible(!visible)}}> show</button>
    {visible ? <A></A>: ""}
   </div>
  );
}

const A = props =>{
  const [n,setN] = useState(0)
  useEffect(()=>{
    console.log('我执行了')
    return ()=>{
      console.log('return执行了')
    }
  },[n])
  return (
    <div>
      <button onClick = {()=>{setN(n+1)}}> +1</button>
    <div>111</div>
    </div>
   );
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

　　

组件 A 首次渲染后， 只执行 console.log('我执行了')

组件 A 被销毁前，只执行 console.log('return执行了')

组件再次被渲染后，同样只执行 console.log('我执行了')

组件再次被销毁前，同样只执行 console.log('return执行了')

当组件 A 内，使用 useState 创建的变量，发生变化时，会造成重新渲染，简单理解为就是函数A重新执行，导致组件A经历销毁，重新渲染两个步骤，即先执行 console.log('return执行了') ，之后再 执行 console.log('我执行了')

可以得出结论，return 只在组件被销毁之前才会执行，常用于清理以下遗留垃圾，比如订阅或计时器 ID 等占用资源的东西。

代码例子 ： musing-paper-u1uuqp - CodeSandbox

示例用途：react hook 中useEffect返回的函数是在什么时候执行