UseEffect，在狀態變化時重新運行？

Question

useEffect(() => {
      if (params.usersearch === props.search || "random" === props.search) { 
        console.log('same');
        return;
      }else{
        console.log(props.search);
        console.log('Params is :',params.usersearch);
        let api = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&tags=${params.usersearch}&per_page=24&format=json&nojsoncallback=1`;
        props.handleLoading(true); //changing state
        let fetchedData = axios
          .get(api)
          .then((data) => data.data.photos.photo)
          .catch((err) => console.log(err));
        props.handleData(fetchedData); //changing state
        props.handleSearch(params.usersearch); //changing state
        props.handleLoading(false); //changing state
        const title = document.querySelector("title");
        title.textContent = `Flickr-Photos/${params.usersearch}`;
        }
    },[params.usersearch]);

大家好。 我有一個問題，如果我的 useEffect 正在運行並且它處於更改狀態之間（正如我在 props.handleLoading 函數被觸發時提到的那樣），那么它會停止並重新運行 useEffect 方法還是會完成代碼？

Answer 1

這種代碼執行不能被隱式停止。

答： useEffect-callback 會被再次調用，即使之前沒有做完

您可以使用去抖動或阻塞行為並取消/忽略先前的操作。 UseEffect 支持一種清理方法。 您可以返回一個函數來取消具有給定油門值的計時器（用於去抖動）。

如反應文檔所述

為什么我們從效果中返回一個函數？ 這是效果的可選清理機制。 每個效果都可能返回一個在它之后進行清理的函數。 這讓我們可以保持添加和刪除訂閱的邏輯彼此接近。 它們是相同效果的一部分！

React 究竟何時清理效果？ React 在組件卸載時執行清理。 然而，正如我們之前所了解的，效果會為每次渲染運行，而不僅僅是一次。 這就是為什么 React 還會在下次運行效果之前清理上一次渲染中的效果。 我們將討論為什么這有助於避免錯誤以及如何選擇退出這種行為，以防它在下面產生性能問題。

解決方案

Stackblitz 示例