React Hook — UseEffect
UseEffect 的語法
1
| useEffect(() => { }, [depandancy])
|
- useEffect 有兩個參數
- 第一個參數 : Effect function
- 第二個參數 : Depandancy array
- 根據不同 depandancy 決定何時要執行 Effect function
UseEffect 在不同情境的使用方式
Once
只會在第一次 Render 的時候執行 UseEffect
1
2
3
4
| useEffect(() => {
console.log(`進入 ${count} useEffect`);
document.title = `點擊次數 ${count}`
}, [])
|
after every render
在每次 render 之後執行 UseEffect
1
2
3
4
| useEffect(() => {
console.log(`進入 ${count} useEffect`);
document.title = `點擊次數 ${count}`
})
|
state/props change
- 依照第二個參數 [dependency]，若狀態有改變時才會執行 useEffect
- 可放入許多的值，包括 state/props
- 注意:
若我們的 Component，因為別的 State 改變而進行渲染時，都會執行它
1
2
3
4
| useEffect(() => {
console.log(`進入 ${count} useEffect`);
document.title = `點擊次數 ${count}`
}, [count])
|
Component Unmount => 需要清除的 Effect
在執行下次 effect 之前清除前一個 render 的 effect
1
2
3
4
| useEffect(() => {
return () => {
}
}, [])
|
🔎 參考資料