React Hook useEffect,如何使用
了解 useEffect React Hook 的用途以及如何使用它!
如果你對 React Hook 還不熟悉,可以先閱讀我的React Hook 簡介。
在 React 中,我常常使用的一個 Hook 是 useEffect
。
1 | import React, { useEffect } from 'react' |
useEffect
函數會在元件首次渲染以及每次更新後執行。
React 首先會更新 DOM,然後呼叫傳給 useEffect()
的函數。
舉個例子:
1 | const { useEffect, useState } = React |
提示:如果你是熟悉舊版的 React 開發人員,習慣使用 componentDidMount
、componentWillUnmount
和 componentDidUpdate
事件,那麼 useEffect
可以取代它們。
你可以選擇從傳給 useEffect()
的函數中 返回一個函數:
1 | useEffect(() => { |
當元件卸載時,將會執行返回的函數中的代碼。
你可以在這個返回的函數中進行任何需要的「清理」工作。
對於舊版開發人員來說,這類似於 componentWillUnmount
。
useEffect()
可以被多次調用,這相當有用以劃分不相關的邏輯。
由於 useEffect()
函數在每次更新後都會執行,我們可以通過添加一個陣列作為第二個參數,這個陣列包含要觀察的狀態變數列表,從而告訴 React 哪些狀態變數發生變化時才重新執行副作用。
只有在此陣列中的變數之一更改時,React 才會重新執行副作用。
1 | useEffect(() => { |
同樣,你可以通過傳遞一個空陣列的方式告訴 React 只在挂載時執行副作用:
1 | useEffect(() => { |
這是我經常使用的技巧。
Codepen 上的範例:
在 CodePen 上查看 React Hooks example #3 side effects,作者是 Flavio Copes (@flaviocopes)。
tags: [“React Hook”, “useEffect”]