React於2019年後新增了React Hook的功能,大大提升了 React 的易用性與維護性。
以下描述 react hook 中 useEffect 的使用方式,力求簡易表達。
useEffect是一個在網頁第一次進行 render 後會執行的程式,如果要強制控制它務必在滿足特定條件才執行,需要在 useEffect 中加入 if 判斷式。
useEffect是一個函數,共需兩個參數:
- 第一個參數為函數,並且回傳值也會是函數
- 第二個參數為控制useEffect觸發的變數,也可以是空值,空值代表除了第一次渲染(render)畫面後會執行之外,任何時刻渲染畫面都會觸發 useEffect 函式。
實作一個點擊後更新數值並且才會呼叫useEffect的範例,如下:
第一次render後畫面
按下按鈕後
[Reference]
1. React官網: https://zh-hant.reactjs.org/docs/hooks-effect.html
2. 個人部落格: https://medium.com/hannah-lin/react-hook-%E7%AD%86%E8%A8%98-useref-c628cbf0d7fb
全站熱搜