第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何在沒有useEffect的情況下使用setInterval

如何在沒有useEffect的情況下使用setInterval

寶慕林4294392 2023-04-27 10:13:09
如果我在沒有 useEffect 的情況下使用 setInterval(line 15) 而不是它給出的結(jié)果 2^n-1(0,1,3,7,15,31,63...) 而不是 (0,1,2,3,4, ..)。所以我有一些問題1)為什么我在不使用 useEffect 的情況下直接調(diào)用 setInterval 時(shí)得到那個(gè)輸出 2)如果我更改 setCount(第 9 行)并且它通過直接使用 setInterval 而不使用 useEffect(就像我所做的那樣)給出正確的輸出,有什么辦法嗎3) 如果沒有 useEffcet 就不能使用 setInterval 那么為什么不能呢?如果我將 setInterval 放在 useEffect 中并最初渲染一次(第 12、13、14 行)而不是它給出正確的輸出......但是當(dāng)我直接使用 setInterval 時(shí)我沒有得到正確的輸出。什么是差異賭注?在這兩種情況下,我都調(diào)用了一次 setInterval,但輸出是不同的。import React, {useEffect, useState } from 'react'        export default function IncorrectDependency() {        const [count,setCount]=useState(0)        const inc=()=>{        // console.log(count)        setCount(preVal=>preVal+1)    //    setCount(count+1)    }    // useEffect(()=>{    //     setInterval(inc,1000)},[]    // )    setInterval(inc,1000)            return (            <div>                <h1>{count}</h1>                           </div>        )    }
查看完整描述

3 回答

?
手掌心

TA貢獻(xiàn)1942條經(jīng)驗(yàn) 獲得超3個(gè)贊

當(dāng)我們設(shè)置狀態(tài)時(shí),功能組件會(huì)從上到下重新執(zhí)行,但是當(dāng)我們使用 useState、useCallbacks 等時(shí),它們不會(huì)重新初始化為變量、函數(shù)、

所以在這種情況下,setInterval將重新初始化每個(gè)setCount,因?yàn)闋顟B(tài)發(fā)生了變化,

一步步

  • 在第 1 秒會(huì)有一個(gè) setInterval,調(diào)用 setCount 組件準(zhǔn)備好重新渲染

  • 重新渲染時(shí),開始從上到下執(zhí)行它再次看到的功能組件,setInterval它會(huì)觸發(fā)它,所以現(xiàn)在我們有兩個(gè)setIntervals

  • 所以它會(huì)在每一秒添加多個(gè)setIntervals,因?yàn)槲覀儧]有清除它,所以你應(yīng)該看到瀏覽器中打印的數(shù)字不會(huì)花費(fèi)一秒鐘,但隨著時(shí)間的推移會(huì)不到一秒鐘。

您可以在不清除每次重新渲染的先前間隔的情況下獲得預(yù)期結(jié)果,useEffect這是由于setCount

創(chuàng)建一個(gè)變量來保存設(shè)置的間隔,代碼

const interval = null;

//this should be declare out side the component,

//because if we declare it inside the component it will redeclare,

//and the reference to the previous setInterval will be lost in that case no-way to clear the setInterval.

export default function IncorrectDependency() {

? ? ....

? ? if (interval) {

? ? ? ? clearInterval(interval);

? ? }


? ? interval = setInterval(inc, 1000);

? ? ....

?}

或者 React 有一個(gè)鉤子,它可以保存相同的變量而無需在每個(gè)渲染上重新初始化,


const intvl = useRef(null);

....


if (intvl?.current) {

? ? clearInterval(intvl.current);

}


intvl.current = setInterval(inc, 1000);

.....


查看完整回答
反對 回復(fù) 2023-04-27
?
幕布斯6054654

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊

當(dāng)您直接使用 setInterval 時(shí)發(fā)生了什么,因?yàn)檫@是一個(gè)函數(shù),它將在狀態(tài)更改時(shí)被調(diào)用,因此將再次觸發(fā) setInterval 等等,這實(shí)際上會(huì)給您不正確的結(jié)果,因此您不應(yīng)該在沒有使用效果的情況下使用 setInterval,也在卸載時(shí)你應(yīng)該清除間隔



查看完整回答
反對 回復(fù) 2023-04-27
?
慕碼人2483693

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊

Dan Abramov 解釋了為什么這不是一個(gè)好主意:

“這不是慣用的方法。例如,如果您有同一組件的多個(gè)實(shí)例,它將無法正常工作。它違反了規(guī)則——它在渲染過程中產(chǎn)生了副作用(setInterval),頁面上說你不應(yīng)該這樣做做 :) 一旦你違反了規(guī)則,所有的賭注都取消了”

查看完整回答
反對 回復(fù) 2023-04-27
  • 3 回答
  • 0 關(guān)注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)