React.jpg

React於2019年後新增了React Hook的功能,大大提升了 React 的易用性與維護性。

以下描述 react hook 中 useEffect 的使用方式,力求簡易表達。

 

useEffect是一個在網頁第一次進行 render 後會執行的程式,如果要強制控制它務必在滿足特定條件才執行,需要在 useEffect 中加入 if 判斷式。

useEffect是一個函數,共需兩個參數:

  • 第一個參數為函數,並且回傳值也會是函數
  • 第二個參數為控制useEffect觸發的變數,也可以是空值,空值代表除了第一次渲染(render)畫面後會執行之外,任何時刻渲染畫面都會觸發 useEffect 函式。

實作一個點擊後更新數值並且才會呼叫useEffect的範例,如下:

 

 

第一次render後畫面

1.JPG

 

按下按鈕後

2.JPG

[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

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 葛瑞斯肯 的頭像
    葛瑞斯肯

    葛瑞斯肯樂活筆記

    葛瑞斯肯 發表在 痞客邦 留言(0) 人氣()