iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

我不會測試,所以寫Jest與React Testing Library系列 第 6

Day 6 hook的前奏useEffect

useEffect

在class component時,分別有三個生命週期componentDidUpdate、componentDidMount、componentWillUnmount這三個階段都可以在一個effect完成

來我們看一段code

import { useEffect } from 'react';

useEffect(() => {
	...someting code
	
	return () => {
		...clear something
	}
} , [dependency])

那如何用useEffect呈現三個生命週期呢!

  1. 如何實作DidMount
useEffect(() => {}, []);

假如把dependency設為一個空的陣列(array)這樣就會跟class component裡的componentDidMount一樣只會在dom mount後執行一次

  1. 如何實作WillUnmount
useEffect(() => {
	...subscrption something

	return () => {
		...unSubscription something
	}
}, [特殊的ID]);

假如我們在effect裏面return 一個function 他就會在下次DidUpdate時進行清除的動作

以這段程式來說,說訂閱一個特殊Id(叫ID: 9527),如果下一次要訂閱(ID: 0001)他就會進行清除ID:9527的訂閱.

  1. 如何實作DidUpdate
useEffect(() => {}, [depandency]);

這部分重點是dependency,如果依賴值做更改的話,整個effect會重新執行一次來達到componentDidUpdate的功能

再補上useEffect的優化....我再想想有啥例子


上一篇
Day 5 hook的前奏 useState
下一篇
Day 7 寫一下context
系列文
我不會測試,所以寫Jest與React Testing Library30

尚未有邦友留言

立即登入留言