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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

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返回的函数是在什么时候执行