快捷導(dǎo)航

React-Hook中使用useEffect清除定時(shí)器的實(shí)現(xiàn)方法

更新時(shí)間：2022年11月03日 11:25:41 作者：北海的大魚(yú)

這篇文章主要介紹了React-Hook中useEffect詳解(使用useEffect清除定時(shí)器),主要介紹了useEffect的功能以及使用方法，還有如何使用他清除定時(shí)器，需要的朋友可以參考下

useEffect

之前我們學(xué)習(xí)了class組件的聲明周期，那么我們想在函數(shù)式組件中做一些聲明周期有關(guān)操作能否實(shí)現(xiàn)呢？
函數(shù)式組件中是沒(méi)有生命周期的,所以就可以使用useEffect來(lái)替代。我們可以把useEffect看作組件加載、組件更新、組件卸載的三個(gè)生命周期方法的組合。

下面我們一起來(lái)通過(guò)案例學(xué)習(xí)useEffect的使用：
1.這里需求是寫(xiě)一個(gè)點(diǎn)擊事件讓state累加，并且吧state展示在title上
2.首先要導(dǎo)入React, { useState, useEffect }
3.然后使用 useEffect將state渲染給title
4.最后綁定點(diǎn)擊事件

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

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

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

查看運(yùn)行效果：

在這里插入圖片描述

所以我們可以發(fā)現(xiàn)：默認(rèn)情況下,useEffect會(huì)在第一次渲染之后和每次更新之前都會(huì)執(zhí)行

基于它的這個(gè)特性，我們?cè)賮?lái)看一個(gè)例子：
1.實(shí)現(xiàn)的效果是，點(diǎn)擊按鈕能切換狀態(tài)是否顯示page頁(yè)面，page頁(yè)面的按鈕能夠控制age和money的改變，比較簡(jiǎn)單，大家應(yīng)該都能看懂

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

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

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

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

我這里在useEffect中進(jìn)行了打印，下面我們來(lái)看看何時(shí)會(huì)觸發(fā)useEffect

在這里插入圖片描述

可以看到每次更新的時(shí)候都會(huì)觸發(fā)useEffect，這里的useEffect還可以傳入?yún)?shù)，例如：
在后面的數(shù)組中寫(xiě)入age和money，實(shí)現(xiàn)的效果是一樣的

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

但是如果只寫(xiě)一個(gè)：

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

查看結(jié)果：

在這里插入圖片描述

可以看到age狀態(tài)發(fā)生改變時(shí)它會(huì)被調(diào)用，但是money發(fā)生改變，他并不會(huì)調(diào)用
所以這里數(shù)組傳入是依賴(lài)項(xiàng),只有數(shù)組中的狀態(tài)發(fā)生了變化,才會(huì)去觸發(fā)useEffect執(zhí)行

如果我們想在useEffect中進(jìn)行請(qǐng)求，也就是只想它觸發(fā)一次，應(yīng)該怎么做呢：
如下使用空數(shù)組即可：

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

useEffect清除定時(shí)器

先來(lái)回顧一下在class組件中如何清除定時(shí)器：
如以下代碼，需要在componentWillUnmount生命周期函數(shù)中進(jìn)行定時(shí)器的清除操作

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該如何去實(shí)現(xiàn)呢？
只需要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)
        // 清除定時(shí)器
        return () => clearInterval(timer)
    }, [])
    return (
        <div>{state}</div>
    )
}

最后

本篇文章的講解就到這里啦，主要介紹了useEffect的功能以及使用方法，還有如何使用他清除定時(shí)器，如果對(duì)你有幫助，點(diǎn)贊關(guān)注支持下呀~后續(xù)還會(huì)給大家?guī)?lái)更多優(yōu)質(zhì)內(nèi)容

到此這篇關(guān)于React-Hook中useEffect詳解(使用useEffect清除定時(shí)器)的文章就介紹到這了,更多相關(guān)react Hook useEffect清除定時(shí)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: