首頁(yè) 猿問 React 組件發(fā)生意外反應(yīng)

React 組件發(fā)生意外反應(yīng)

JavaScript

莫回?zé)o 2023-07-14 16:51:22

以下是一個(gè)簡(jiǎn)單的反應(yīng)組件：import React from "react";import { useState } from "react";export default function Comp() { let [count, setCount] = useState(1); function countUp(){ setCount(count + 1); } setInterval(countUp, 1000); return <h2>{count}</h2>}我預(yù)計(jì)計(jì)數(shù)器每秒都會(huì)上升但由于某種原因，十 - 二十秒后開始出現(xiàn)問題請(qǐng)參閱此處： https ://stackblitz.com/edit/react-az7qgn?file=src/comp.jsx誰能解釋一下嗎？

查看完整描述

2 回答

慕俠2389804

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

您應(yīng)該使用useEffect鉤子來正確設(shè)置它。我可以舉個(gè)例子。

import React, { useState, useEffect } from "react";

export default function Comp() {

? const [count, setCount] = useState(1);

? useEffect(() => {

? ? const interval = setInterval(() => {

? ? ? setCount(state => state + 1);

? ? }, 1000);

? ? return () => clearInterval(interval);

? }, []);

? return <h2>{count}</h2>

}

一些注釋。

一般來說，你會(huì)const更喜歡let，但在解構(gòu)來自 React 的東西時(shí)這是強(qiáng)制性的。

基本上，useEffect允許您實(shí)現(xiàn)與類組件類似的結(jié)果componentDidMount和生命周期方法。componentDidUpdate此外，在這種特定情況下，通過在回調(diào)中返回一個(gè)函數(shù)useEffect，我們確保在需要清理時(shí)（這意味著每次運(yùn)行后）清除計(jì)劃的回調(diào)。這實(shí)際上避免了將許多東西堆疊在一起的混亂setInterval。

另外，當(dāng)您setCount最好使用回調(diào)形式獲取先前的狀態(tài)時(shí)，因?yàn)樗冀K是最新的。

反對(duì) 回復(fù) 2023-07-14

隔江千里

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

當(dāng)調(diào)用 setInterval() 時(shí)，它返回一個(gè)間隔 id。您的代碼沒有保存變量，因此您無法重置它。在較小的迭代中，您不會(huì)看到每次迭代的更改。但是，隨著 setInterval() 被調(diào)用的次數(shù)從 0 增加到 N，更多的計(jì)時(shí)器被啟動(dòng)，并且您將很快看到數(shù)字隨著它們的增加而閃爍，因?yàn)槊總€(gè)間隔都在改變的狀態(tài)count。

換句話說，隨著時(shí)間的推移，您將創(chuàng)建越來越多的計(jì)時(shí)器，而不是創(chuàng)建一次性使用的計(jì)時(shí)器。您需要打電話clearInterval(timer_id_goes_here)來清除計(jì)時(shí)器。

反對(duì) 回復(fù) 2023-07-14