iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 29
0
自我挑戰組

為自己而寫,前端工程師之 30 天心得分享系列 第 29

[Day - 29] React Hooks useEffect 學習筆記

useEffect - 副作用處理

useEffect:資料獲取、訂閱或手動方式修改 React Component DOM 都可以稱為副作用 (side effect)。useEffect正是用來處理這些副作用的。同時 useEffect也是 componentDidMount,componentDidUpdate和componentWillUnmount這幾個生命週期方法的統一。

基本使用

基本結構用法:useEffect(callback, array)
callback:回調函式,用於處理副作用邏輯。
array (可選):一個陣列,用於控制與執行。

import React, { useState, useEffect } from 'react'

const Example = (props) => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 更新頁面標題
    document.title = `You clicked ${count} times`
  })
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

callback 副作用邏輯

useEffect(callback, array)
callback (回調函式)是useEffect的第一個參數,我們所有的副作用邏輯都應該在這裡處理。另外,我們可以在 callback 中返回一個函式,用於清理工作。


上一篇
[Day - 28] React Hooks useState 學習筆記
下一篇
[Day - 30] 不完美的結束
系列文
為自己而寫,前端工程師之 30 天心得分享30

尚未有邦友留言

立即登入留言