为什么useEffect会通过两次

Question

我试图使用Effect，但没有成功。。这是我的密码。。。

const [listVisaoGeral, setListVisaoGeral] = useState([]);

first useEffect:  
useEffect(() => {
console.log(First)
async function getVisaoGeral() {
try {
await axiosInstance
.get("....")
.then(function (responseVisaoGeral) {
return responseVisaoGeral.data;
})
.then(function (treatedVisaoGeralList) {
setListVisaoGeral(treatedVisaoGeralList);
});
} catch (error) {
console.log(error);
Alert.alert(
"Erro",
"Não foi possível consultar a lista de recursos. Por favor, tente novamente."
);
}
}

getVisaoGeral();
}, []);


second use effect : 

useEffect(() => {
console.log(Second)

}, [listVisaoGeral]);

我不明白为什么它在第二次使用中通过了两次效果，因为我只改变了一次状态。。。

Answer 1

是的，它按预期运行了两次。

第一次，因为所有useEffects都是在第一次渲染后调用的，而与依赖关系的变化无关。

第二次，因为状态发生了变化。

如果不想在第一次渲染期间运行useEffect内部的内容，可以使用某种标志useRef来识别第一次渲染并提前返回。

import { useEffect, useRef } from 'react';
const isFirstRender = useRef(true);
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
console.log('Second');
}, [listVisaoGeral]);