useEffect对获取函数的影响是什么

Question

我想了解为什么在代码块的底部使用useEffect，以及它的用途。我认为这与组件的生命周期和避免无限循环有关，但我无法完全理解这一切。如果有人能向我解释幕后发生了什么，以及useEffect块的使用有什么影响，我将不胜感激。非常感谢！

const Films = () => {
const [filmDataState, setFilmDataState] = useState();
const [loadingState, setLoadingState] = useState();
const [errorState, setErrorState] = useState(false);

const getFilmsHandler = useCallback(async () => {
setLoadingState(true);
try {
const response = await fetch(
process.env.REACT_APP_DBLINKMOVIES,
{ method: "GET", headers: { "Content-Type": "application/json" }, }
);
const data = await response.json();
console.log(data);

let filmArray = [];
for(const key in data){
filmArray.push({
key: key,
title: data[key].title,
crawl: data[key].openingText
})
}
console.log(filmArray);
setFilmDataState(filmArray);
setLoadingState(false);
} catch (error) {
setErrorState(error.message);
}
}, []);

useEffect(() => {
getFilmsHandler();
}, [getFilmsHandler]);

Answer 1

如果不直接链接react中的文档，我能想到的最短答案是useEffect块(具有空的依赖数组(确保块中的代码只运行一次。或者，当将依赖项添加到依赖项数组时，当这些依赖项中的任何一个发生更改时，它将再次运行。

最重要的是要记住，当组件的状态发生变化时，它会重新渲染。

如果你没有useEffect。您的组件将获取数据，这将更新组件的状态，这将触发组件的重新提交，这将导致另一次获取数据，依此类推。

Answer 2

useEffect是一个React钩子，我们把它放在代码的底部，以优先处理这个代码块。它基本上是一个钩子的替代品；老派；生命周期方法componentDidMount、componentDidUpdate和componentWillUnmount。它允许您在不需要类组件的情况下执行生命周期任务。