React-Hook中使用useEffect清除定時器的實現方法

Posted on by

useEffect

之前我們學習瞭class組件的聲明周期，那麼我們想在函數式組件中做一些聲明周期有關操作能否實現呢？
函數式組件中是沒有生命周期的,所以就可以使用useEffect來替代。我們可以把useEffect看作組件加載、組件更新、組件卸載的三個生命周期方法的組合。

下面我們一起來通過案例學習useEffect的使用：
1.這裡需求是寫一個點擊事件讓state累加，並且吧state展示在title上
2.首先要導入React, { useState, useEffect }
3.然後使用 useEffect將state渲染給title
4.最後綁定點擊事件

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

export default function App() {
    const [state, setstate] = useState(0)

    useEffect(() => {
        document.title = `你點擊瞭${state}次`
    })
    return (
        <div>
            <h1>{state}</h1>
            <button onClick={e => setstate(state + 1)}>點擊</button>
        </div>
    )
}

查看運行效果：

在這裡插入圖片描述

所以我們可以發現：默認情況下,useEffect會在第一次渲染之後和每次更新之前都會執行

基於它的這個特性，我們再來看一個例子：
1.實現的效果是，點擊按鈕能切換狀態是否顯示page頁面，page頁面的按鈕能夠控制age和money的改變，比較簡單，大傢應該都能看懂

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

function Page() {
    const [age, setage] = useState(18)
    const [money, setmoney] = useState(1000)

    useEffect(() => {
        console.log('我被執行瞭')
    })
    return (
        <div>
            <h1>{age}</h1>
            <h2>{money}</h2>
            <button onClick={e => setage(age + 1)}>長大</button>
            <button onClick={e => setmoney(money + 1000)}>變有錢</button>
        </div>
    )
}

export default function App() {
    const [show, setshow] = useState(true)
    return (
        <div>
            <h1>{show}</h1>
            <button onClick={e => setshow(!show)}>切換狀態</button>
            {show && <Page/>}
        </div>
    )
}

我這裡在useEffect中進行瞭打印，下面我們來看看何時會觸發useEffect

在這裡插入圖片描述

可以看到每次更新的時候都會觸發useEffect，這裡的useEffect還可以傳入參數，例如：
在後面的數組中寫入age和money，實現的效果是一樣的

useEffect(() => {
        console.log('我被執行瞭')
    }, [age, money])

但是如果隻寫一個：

useEffect(() => {
        console.log('我被執行瞭')
    }, [age])

查看結果：

在這裡插入圖片描述

可以看到age狀態發生改變時它會被調用，但是money發生改變，他並不會調用
所以這裡數組傳入是依賴項,隻有數組中的狀態發生瞭變化,才會去觸發useEffect執行

如果我們想在useEffect中進行請求，也就是隻想它觸發一次，應該怎麼做呢：
如下使用空數組即可：

useEffect(() => {
        console.log('我被執行瞭')
    }, [])

useEffect清除定時器

先來回顧一下在class組件中如何清除定時器：
如以下代碼，需要在componentWillUnmount生命周期函數中進行定時器的清除操作

export class App extends Component {
    state = {
        count: 0
    }
    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState({count: this.state.count + 1})
        }, 500)
    }
    componentWillUnmount() {
        clearInterval(this.timer)
    }
    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
            </div>
        )
    }
}

那麼使用useEffect該如何去實現呢？
隻需要return出去就可以瞭，看下面代碼

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

export default function App() {
    const [state, setstate] = useState(0)
    useEffect(() => {
        const timer = setInterval(() => {
            setstate(prev => prev + 1)
        }, 1000)
        // 清除定時器
        return () => clearInterval(timer)
    }, [])
    return (
        <div>{state}</div>
    )
}

最後

本篇文章的講解就到這裡啦，主要介紹瞭useEffect的功能以及使用方法，還有如何使用他清除定時器，如果對你有幫助，點贊關註支持下呀~後續還會給大傢帶來更多優質內容

到此這篇關於React-Hook中useEffect詳解(使用useEffect清除定時器)的文章就介紹到這瞭,更多相關react Hook useEffect清除定時器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：