React Hook useEffect 簡單範例

React Hook useEffect()簡單範例。

簡介

React的Function Component原本無法利用生命週期方法實作side effect，；不過從React 16.8加入Hook後便能利用useEffect() API實作side effect。

所謂side effect意思為「副作用」，在React中意思是指因component自身的改變而對外造成的影響。例如獲取資料、註冊、異動DOM結構，修改其他component的狀態等。Side effect的程式不應寫在render()中。

useEffect相當於生命週期方法componentDidMount、componentDidUpdate、componentWillUnmount的組合。當component新增到DOM、更新狀態及從DOM移除時useEffect()會被呼叫。

範例

useEffect()接收一個函式參數，此函式用來產生side effect效果。

例如下面利用useState()建立state.count並在點擊時呼叫addCount()累加，利用useEffect()在state.count值為10時更改背景為黃色。

App.js

import React, {useEffect, useState} from 'react';
import './App.css';

function App() {
  return <Hello name="John" />
}

function Hello(props) {

  const [count, setCount] = useState(0)

  useEffect(() => {
    if (count === 10) {
      document.body.style.backgroundColor = "yellow";
    }
  })

  const addCount = () => {
    setCount(count + 1)
  }

  return <h1 onClick={addCount}>Hello, {props.name}! {`count: ${count}`}</h1>
}

export default App;

參考github。

• React - 使用 Effect Hook
• React 自訂Hook 簡單範例