React-[useEffect篇]- useEffect中的第二個參數dependency array以及搜索功能


依賴項/dependency array

預設中,effects 會在每次元件渲染之後才會執行(但這不是我們每次想要的),因此,我們可以透過寫入條件在依賴項參數中來預防這個情況。

若沒有dependency array React不知道何時應該要執行effect

而如果我們有寫入條件在依賴項中,只要這些條件改變,effect就會執行一次

每一個在useEffect中使用的state 以及 變數 和 prop 都必須要寫入在依賴項中,因為當這些數值改變,effect才會執行他的任務,也能保持元件資料與內部系統(UI)的一致/同步性。

最好的方式就是把useEffect也想成是事件監聽器event listener ,他會監聽該依賴項中寫入的參數是否有改變,只要有改變,就會觸發執行該useEffect

到底useEffect是在什麼階段發生的?

  • useEffect中的程式碼常常會需要跑比較長的時間的任務(例如fetch data),所以不會在瀏覽器渲染時或是渲染之前,來執行useEffect的程式碼,這樣會造成畫面是舊的ui未更新是舊版本並且造成阻塞block

  • 第二個原因是因為useEffect如果有設定state那麼會需要額外的渲染來更新畫面->

哪一個useEffect會先執行?

我在增加依賴項的條件來比對誰會先執行:

把搜尋bar中的query state和useEffect 所fetching 的data保持資料一致性

先看這段程式碼:

因為依賴項裡面沒有寫上使用的變數,才會一直發生錯誤搜索不到資料

在useEffect 的依賴項中加入query做監聽資料是否改變

並且在執行fetch data的程式碼之前加入一個判斷:

    //在執行這個fetch data 以前做一個判斷
    //增加一個條件
    if (query.length < 3) {
      setMovies([]);
      setError("");
      return;
    }

這樣在搜尋框中輸入的字串要三個字以上才會啟動fetching data的請求

本篇筆記,出自Udemy-The Ultimate React Course 2023: React, Redux & More 筆記








你可能感興趣的文章

[1] Python 3 簡介與安裝

[1] Python 3 簡介與安裝

網際網路是什麼?

網際網路是什麼?

JavaScript Object

JavaScript Object






留言討論