如果您是一名尚未了解 React hooks 的 React 開發人員,那麼現在就是時候了。 這篇文章將詳細介紹 useEffect React Hook。 它的鉤子相當於瑞士軍刀。 它解決了各種問題,例如如何在組件安裝時獲取數據、如何在狀態或屬性更改時運行代碼、如何設置計時器或間隔等等。
useEffect 幾乎可以用於在不返回 JSX(任何類型的副作用)的 React 組件中“執行”的任何操作。 每個組件還可能有多個 useEffects。
所有這些功能都是有代價的:除非您了解它是如何工作的,否則它可能會令人困惑。 在這篇文章中,我們將查看各種示例,以便您可以掌握概念模型並將其應用到您自己的代碼中。
反應鉤 – 它試圖解決什麼問題?
Hooks 首次在 React 16.8 版本中引入,現在被許多 React 項目使用。 Hooks 克服了組件之間代碼重複的問題。 它們是在不使用類的情況下編寫的。 這並不意味著 React 正在放棄類;而是意味著 React 正在放棄類。 hooks 只是一種替代方法。
React 允許您快速創建具有狀態邏輯的複雜組件。 由於該類依賴於 React 生命週期方法,因此很難分離這些組件。 這就是 React Hooks 的用武之地。
它們允許您將組件劃分為更小的功能。 您現在可以根據功能將代碼排列和分離為更小的單元,而不是根據生命週期方法將代碼劃分為更小的部分。
什麼是 useEffect Hook?
Hook 是允許您訪問狀態和其他 React 功能而無需編寫 ES6 類的函數。 React hooks API 有一個名為 useEffect 的鉤子。 如果您熟悉 React 生命週期,那麼 useEffect 鉤子與 組件已掛載, 組件更新和 組件將卸載 生命週期方法相結合。
根據 React Hooks 文檔,它的創建是為了解決 ES6 類組件生命週期方法的一些問題。
句法
第一個參數是回調函數,默認情況下在每次渲染後執行。 第二個參數是一個可選的 Dependency 數組,指示 Hook 僅在目標狀態發生變化時才回調。
Hook 比較了每個依賴項的歷史和當前狀態。 如果兩個值不匹配,則 Hook 調用第一個參數中指定的回調。 依賴數組改變了通常的回調行為,並保證 Hook 忽略組件範圍內的所有其他組件。
基本用法
為了保存消息,我在上面的代碼示例中使用了 React useState。 之後,我獲取消息狀態變量並將其打印在屏幕上。 但是,我現在想在組件安裝後立即使用 useEffect 修改消息。
從 React 框架導入 useEffect 後,我已將效果插入到 useState 行後面。 useEffect 的第一個參數是一個函數。 當執行此函數處理程序時,它將處理您提供的任何副作用。 該函數是一個回調函數,當 React 組件生命週期事件之一發生時調用。
什麼時候使用?
useEffect 鉤子在多種情況下可能很有用。 以下是最關鍵的:
- 當我們希望根據提供的參數獲取數據時,我們可以從客戶端更改此參數。 使用新數據更新參數後將調用它。
- 如果我們想從 API 端點檢索數據並將其顯示在客戶端。 當我們的組件呈現時,執行給 useEffect 掛鉤的函數或處理程序,並檢索組件狀態中的數據。 然後將這些狀態用於用戶界面組件中。
- 當你的組件依賴於外界的數據而我們無法保證數據一定會到達時,我們應該使用Effect(也許服務器就在那裡)。 不要拋出問題並阻止其他組件顯示,而是將它們放置在 useEffect 掛鉤中。
用例
如果組件在第一次運行後重新渲染,它將不會執行。
每當組件渲染或重新渲染時,它都應該被執行。
默認情況下,該程序僅運行一次。 之後,如果 prop 值發生變化,請運行:
對於異步活動,請始終使用 useEffect。
對於其他開發人員來說,useEffect 代碼塊是異步作業的明顯標記。 可以在不使用 useEffect 的情況下創建異步代碼,但這不是“React 方法”,它會增加複雜性和錯誤風險。
使用 useEffect 而不是編寫可能停止 UI 的異步代碼是 React 社區中的一項眾所周知的技術,尤其是 React 團隊構建它來執行副作用的方式。
利用它的另一個優點是,開發人員可以簡單地檢查代碼並立即檢測在“控制流之外”運行的代碼,這只有在第一個渲染週期之後才變得重要。 此外,這些塊適合提取為可重用甚至更具語義的自定義 Hook。
一個例子
使用 useEffect 代碼,每秒遞增一個數字。
結論
在我看來,如果你想成為更高級別的 React 開發人員,那麼了解 useEffect Hook 的底層設計原則和最佳實踐是一項需要學習的關鍵技能。
總而言之,useEffect Hook 接收一個包含命令式、潛在效果完整邏輯的函數。 依賴數組是第二個參數,可用於影響執行。 在處理的同時,還需要使用返回函數編寫清理代碼。
如果文章有幫助,請在評論中告訴我們。
發表評論