应该在useEffect之前或之后返回运行?

Question

我正在观看这个视频https://youtu.be/0ZJgIjIuY7U学习useEffect

根据视频，return应该先运行，然后是useEffect本身。但是，我的useEffect在返回之前运行。正确的执行顺序应该是什么?

我代码:

import React, { useState, useEffect, useRef } from 'react';
export default function Use_Effect() {
const [ val , setVal ] = useState(0)
useEffect( () => {
console.log('add')
return (
console.log('return')
)
}, [val] )
return (
<div>
<input value={val} onChange={() => {
setVal(pre => pre + 1)
console.log("main window",{val})}}
/>
</div>
)
}

视频说我应该得到return ->添加→返回→添加

但是我得到add ->返回→添加→返回

Thanks very much

Answer 1

useEffect需要返回一个函数，该函数是在重新运行效果时运行以清除效果副作用的函数:

import React, { useState, useEffect, useRef } from 'react';
export default function Use_Effect() {
const [ val , setVal ] = useState(0)
useEffect( () => {
console.log('add')
return () => {
console.log('return')
}
}, [val] )
return (
<div>
<input value={val} onChange={() => {
setVal(pre => pre + 1)
console.log("main window",{val})}}
/>
</div>
)
}

在这种情况下，add将首先显示，return将只在效果再次运行之前显示。