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

useEffect 是一个 React 钩子，我们将其放在代码的底部以优先处理此代码块。它基本上是“old-school”生命周期方法 componentDidMount、componentDidUpdate 和 componentWillUnmount 的钩子替换。它允许您在不需要 class 组件的情况下执行生命周期任务。

Answer 2

我能想到的最短的答案是 useEffect 块（带有一个空的依赖数组）确保块中的代码只有运行一次。或者在将依赖项添加到依赖项数组时，当这些依赖项中的任何一项发生更改时，它将再次运行。

最重要的是要记住，当组件的状态发生变化时 re-render。

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

useEffect 对抓取函数有什么影响？

What is the impact of useEffect on a fetching function?

reactjs

use-effect