iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

用Jest和Enzyme來寫React測試吧!!系列 第 26

【Day26】Function Component 生命週期 & Hook (´・∀・`)

講到Function Component 一定是會講到Hook的!

Hook 讓我們可以不用改變Component的階層就可以重用stateful的邏輯。

Hook 是在React版本16.8所增加的功能,雖然說相較Class Component,
Function Component的生命週期比較單純,但目前React沒有計畫要移除Class Component,
所以我們也許會碰到只使用Class Component的專案、只使用Function Component的專案又或是兩種並存的專案(因為Hook是可以和既有的程式碼一起運作)。

前面在繪製我們的簡單計數器時,有稍稍的使用到Hook來去建立我們在function裡的state,
還記得前面用到的useState嗎 !? 對! 那就是Hook用來建立state的方式。

useState的概念類似Class Component裡的 this.setState,
但它不會把舊的和新的state併在一起。

傳入的參數是state的初始狀態 (不像this.state一樣一定要是物件)

function App() {
  	const [count, setCount] = React.useState(0);
  }

Function Component的生命週期 是使用 useEffect來執行,
useEffect會在每次render後執行,包含第一次的render,
且useEffect跟useState一樣可以同時使用很多個!

useEffect的第一個參數傳入的是要執行的程式碼,第二個參數傳入的是一個陣列,
陣列裡可以放入上層的props,可以去偵測props是否變動,來去執行effect。

Hook的規則

  • 只在最上層呼叫Hook,不能在迴圈、判斷式、或是Function內的變數function使用
  • 只在Function Component呼叫Hook,不要在一般的JS Function裡呼叫Hook (除了刻製化的Hook)
  • 自己刻製化的Hook 可以在function內使用
  • Hook是重複使用stateful邏輯的方式,不是state本身,其實,每次呼叫一個Hook都會有個完全獨立而且隔離的state,甚至可以在一個Component裡使用同一個刻製化Hook多次

咦!? 各位看官可能覺得上述提到的好像只有類似Class Component裡面的componentDidMount和componentDidUpdate 呀 , 那我如果要在Hook裡用componentWillUnMount怎麼辦 !?

在useEffect裡,我們可以透過回傳一個function的方式來代替componentWillUnMount

  useEffect(() => {
   
   //要執行的程式碼
   
      //在這個effect之後進行清除
    return function cleanup() {
     
    };
  });

以上是 Function Component裡會用到的Hook及生命週期(Effect),

小菜鳥已經竭盡所能地用最短的文字去敘述了,希望還算簡潔清楚 இдஇ

下一篇,要前往保管全局states的Redux了 (稍稍難一些些) ,快了!快結束了,撐住R ~~


上一篇
【Day25】React Class Component 生命週期簡單介紹
下一篇
【Day27】React Redux 原理及應用方法簡介 ╰(°ㅂ°)╯
系列文
用Jest和Enzyme來寫React測試吧!!30

尚未有邦友留言

立即登入留言