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。
沒有留言:
張貼留言