網頁

2021/7/28

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相當於生命週期方法componentDidMountcomponentDidUpdatecomponentWillUnmount的組合。當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


沒有留言:

張貼留言