葛瑞斯肯樂活筆記

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