如何在使用setInterval时防止React重新呈现整个组件
在使用setInterval时防止React重新呈现整个组件，可以采取以下方法：
- 使用React的useEffect钩子函数：在组件中使用useEffect钩子函数来处理setInterval的逻辑。通过在useEffect中设置一个空数组作为第二个参数，可以确保useEffect只在组件挂载时运行一次，并且不会在组件重新渲染时重新运行。这样可以避免setInterval被重复调用，从而防止React重新呈现整个组件。
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const interval = setInterval(() => {
// 执行你的逻辑代码
}, 1000);
return () => {
clearInterval(interval);
};
}, []);
return (
// 组件的 JSX
);
}- 使用React的类组件生命周期方法：如果你使用的是类组件，可以在componentDidMount生命周期方法中设置setInterval，并在componentWillUnmount生命周期方法中清除interval。这样可以确保setInterval只在组件挂载时运行一次，并在组件卸载时清除interval。
import React from 'react';
class MyComponent extends React.Component {
componentDidMount() {
this.interval = setInterval(() => {
// 执行你的逻辑代码
}, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
// 组件的 JSX
);
}
}以上方法都可以有效地防止React重新呈现整个组件，同时保持setInterval的正常运行。
相关·内容
1回答
我正在创建一个简单的倒计时应用程序React，我很难理解setInterval是如何工作的，同时React重新呈现组件。例如，下面的代码让计时器继续运行，即使我使用了clearInterval onPause()。
let startTimer;
const onStart = () => {
startTimer = setInterval( ()=>{
if ( timeRemaining === 0 ) {
clearInterval(startTimer);
s
浏览 16提问于2022-10-12得票数 1
回答已采纳
我使用React渲染我的web应用程序所需的一些组件，我有一个带有播放和停止按钮的计时器。我从get请求中检索所有的时间记录，并且我想在组件每次更改时重新修改它，我如何做到这一点？
除了使用一个简单的setInterval来调用this.forceUpdate()函数之外，一切都可以正常工作，但这给了我一个警告：
警告:forceUpdate(.)：只能更新安装或安装组件。这通常意味着在未挂载的组件上调用forceUpdate()。这是禁止行动。请检查TimerBox组件的代码。
我的组成部分：
var TimerBox = React.createClass({
displa
浏览 3提问于2017-03-09得票数 0
回答已采纳
2回答
import React, { useState, useEffect } from 'react';
const Test = () => {
const [ count, setCount ] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count up!</button>
<ChildComponent />
浏览 11提问于2019-12-19得票数 0
2回答
反应本机PanResponder可被setState中断
我有一个状态变量来跟踪秒
const [seconds, setSeconds] = useState(0)
useEffect(() => {
const interval = setInterval(() => {
if (seconds > 59) {
setSeconds(0)
} else {
setSeconds((seconds) => seconds + 1)
}
}, 1000)
浏览 4提问于2021-05-24得票数 0
1回答
我的第一个问题是..。我一直在寻找，却找不到最佳的方法。
我的解决方案(可能很愚蠢)：我有一个具有子选择的父表单。
const [periodo, setPeriodo] = useState('0')
const cambiarPeriodo=(e)=> { setPeriodo(e) }
<NewSelect value ={periodo} onchange={(e) => { cambiarPeriodo(e) }} />
子函数组件选择：
const periodosChange=(e)=> {
props.onch
浏览 0提问于2020-10-10得票数 0
关于新的api，我有两个问题：
React有下面的示例。在构造函数(而不是类方法)中声明toggleTheme函数有什么具体原因吗？
import {ThemeContext, themes} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';
class App extends React.Component {
constructor(props) {
super(props);
this.toggleThem
浏览 0提问于2018-09-29得票数 2
回答已采纳
2回答
我想清除间隔，当点击停止按钮时，似乎clearInterval没有像预期的那样在那里工作。当handleStop函数被触发或handleReset id被触发时，计时器不会停止
我想做的是：
import React from "react"
import useApp from "../App"
import Interact from "./Interact";
const Timer = () => {
let timer;
const {millisec , setMillisec , sec , set
浏览 4提问于2021-04-23得票数 0
回答已采纳
2回答
我试着用React和我的Express后端。目前，我使用React作为我的模板语言。
我的视图是.jsx文件。
/* Express */
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const session = require('express-session');
...
/* Express application parameters */
app
.set
浏览 3提问于2017-07-23得票数 1
回答已采纳
2回答
我正试图在我正在构建的一个反应性项目中，将一个虚拟日历嵌入到一个组件中。我应该注意，我使用的是一个名为react-script-tag的库，它允许我在组件中使用<script/>标记。无论如何，日历是渲染-但然后继续重新渲染，好像它是卡在某种循环中。我有一种感觉，我需要实现某种生命周期方法。有什么建议吗？守则如下：
import React from 'react'
import Nav from './Nav'
import ScriptTag from 'react-script-tag'
class Events extend
浏览 1提问于2020-08-02得票数 2
回答已采纳
我创建了一个应用程序，在该应用程序中，我使用了FieldArray component作为react final-form。我的数组组件有性能问题。每个组件还包含大约8个字段(每个字段都包含验证规则)(也来自react final-form)，当我添加50+元素应用程序的滞后(同时将所有组件呈现为虚拟DOM并将其与当前DOM进行比较时)。有人有这种麻烦吗？
我怎么才能避免这种情况？
浏览 0提问于2018-12-01得票数 4
回答已采纳
如果我有一个组件树，
//App.js
const App = () => (
<React.Fragment>
<A />
<B />
<C />
</React.Fragment>
)
//A.js
const A = () => (
<React.Fragment>
<ChildA />
</React.Fragment>
)
现在，假设所有三个组件-- A、B
浏览 1提问于2020-02-14得票数 2
回答已采纳
我有一个策略问题。
我想使用signalR更改我网站中的数据，并使用react显示更改后的数据。我的问题是:如何在signalR和react之间执行数据绑定？
我的第一条线索如下：
signalR：
chat.client.addMessage = function (name, message) {
chatHistory.push({ Author: name, Text: message }); //here I change global variable chatHistory
};
react：
var CommentList = React.createClass({so
浏览 1提问于2014-07-30得票数 6
1回答
在下面的程序中，当我单击任何按钮时，另一个按钮也会重新呈现，即使我已经使用了React.memo()。此外，只有其他按钮得到重新呈现，而不是其他计数。为什么？我有这样一个父组件：
import React, { useState } from 'react'
import Count from './Count'
import Button from './Button'
import Title from './Title'
function ParentComponent() {
const [age, setAge
浏览 2提问于2021-01-25得票数 1
如果我使用setInterval(第15行)而不使用useEffect，则结果2^n-1(0，1，3，7，15，31，63.)而不是(0，1，2，3，4，.)。所以我有个问题
(1)当我直接调用setInterval而没有useeffect 2时，我为什么要获得这个输出)如果我更改setCount(第9行)并通过直接使用没有useEffect的setInterval (如我所做的) 3)给出正确的输出，那么如果没有useEffcet setInterval的使用是不可能的，那么为什么不可能呢？
如果我把setInterval放在useEffect中，并且最初渲染一次(第12、13、14行)，它
浏览 2提问于2020-10-09得票数 0
回答已采纳
当我想改变数组状态时，FlatList中的所有元素都会被重新呈现。我用同样的问题检查了其他的问题，但没有，我无法解决它。首先，问题在我的主要项目，但因为我无法解决它，我创建了一个明确的项目，我在下面给出的例子，但仍然，问题仍然存在。在主项目上，KeyExtractor返回一个唯一的id。
import React, { useEffect, useState, memo } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
export default
浏览 1提问于2021-10-23得票数 0
回答已采纳
1回答
我想防止组件重新呈现使用React。我读过一些指南，但我仍然很难让代码正常工作。CreateItem组件从json对象创建一个输入表单。当输入状态改变时，应重新呈现所有组件.我会避免这种情况，因为它会引起一些问题。
我使用过React.memo，但我的代码仍然不能工作。这是实现这段代码的好方法吗？我怎样才能纠正我的代码？谢谢
function MyComponent() {
return(
<div className="row">
{Array.from(new Map(Object.entries(js
浏览 6提问于2022-06-13得票数 0
回答已采纳
class Clock extends React.Component {
state = { time: new Date().toLocaleTimeString() };
componentDidMount() {
setInterval(() => {
this.setState = ({ time: new Date().toLocaleTimeString()})
}, 1000)
}
render() {
return (
<div className="time">
浏览 2提问于2020-01-13得票数 0
回答已采纳
在中构建一个速度型游戏--在我的应用程序中使用react，使用setinterval function me的倒计时功能，希望在它达到0时停止倒计时。
我这里的代码
const countdownValue = 15
const [sec , setSec ] = useState(countdownValue)
let timer
function start(){
timer = setInterval( () => {
setSec( sec => sec - 1)
},1000)
}
if(sec <= 0){
clearInterv
浏览 3提问于2022-09-29得票数 -1
回答已采纳
我创造了一个非常基本的反应间隔。
import React, {useState, useEffect} from 'react';
const Loading2 = () => {
const [percentage, setPercentage] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setPercentage((prevPerc) => {
if(percenta
浏览 10提问于2021-08-31得票数 1
回答已采纳
2回答
const Greeting = () => {
console.log("Greeting is called");
return <h2> Hello World </h2>;
}
class Counter extends React.Component{
constructor(props){
console.log("Counter is called");
super(props);
this.state = {
coun
浏览 1提问于2018-08-23得票数 1
回答已采纳
让我带你去看看我的问题。我正在制作一个timer函数组件，我将startValue传递给组件，然后该组件将使用通过props传递的startValue启动timer(每秒减少一次)。
const FunctionalComponent = (props: any) => {
const [timerValue, setTimerValue] = useState(props.initialValue)
console.log('Set State')
useEffect(() => {
console.log('UseEffects calle
浏览 2提问于2020-07-12得票数 3
每当我尝试呈现一个新组件时，整个页面都会刷新，而不仅仅是组件会重新呈现。
页面加载，我单击标题中的下拉菜单，这将呈现一个新组件，而不需要刷新。但当我单击"Create Account“的链接时，它会向"/create”页面发出GET请求。这是React刷新整个浏览器并重新呈现页眉、正文和页脚的时候。
我试图让它在浏览器中更改Href，但不是刷新整个页面。我希望它只是重新渲染正在更新的组件。
下面是更改组件和webpack.config的代码。
import React, { Component } from 'react';
import Body from &
浏览 5提问于2018-09-01得票数 1
1回答
我有一个非常小的应用程序。它由一个输入元素和一个表组成。当按下表中的单元格时，输入元素将显示在表中按下的单元格。但是，我注意到，在输入元素中显示选定的单元格需要花费惊人的时间(0.3s)。然后我做了一些分析，并进行了console.logging，这是输出：
我仍然是一个反应的初学者，并想知道我正在监督什么样的设计模式这样的功能。我不明白为什么会重新呈现整个应用程序(至少在虚拟DOM中是这样)，尽管只有一小部分( <ShowSelectedCell/>)应该改变。
最小示例: Index.js
import React from 'react';
imp
浏览 13提问于2021-12-28得票数 2
如果我的思维过程与React.js的正统思想不同，请纠正我。
我有一个父< MainViewController />，它有一个<View />子。
如果在我的<View />中发生滚动事件，那么我想在我的父< MainViewController />中显示/隐藏一个按钮。
不幸的是，现在，我正在做setState来切换，但是它改变了它的父母，以及相应地，它所有的孩子。基本上，它重置了我的整个应用程序。是否有一种更简单的方式来切换隐藏/显示而不重新显示？
我的相关代码：
var MainViewController = React.create
浏览 1提问于2016-05-06得票数 3
回答已采纳
我在编码方面是新手，在谷歌上搜索了很多次之后，我无法解决这个问题。问题是我有一个布局组件，其中包含4个不同的组件。当我在函数组件中调用一个函数时，它会影响其他函数和其他函数的重呈现。但我不会把新的道具传给他们。我只将道具传递给一个包含单击事件的组件。我希望我事先说清楚了，谢谢。下面是我的代码示例：
这是我的布局组件.
import React, { useState } from "react";
import Header from "./Header";
import MenuTitle from "./MenuTitle";
import
浏览 1提问于2021-03-03得票数 0
回答已采纳
这是我完整的React代码。我在"const，setName =useState“(‘Micheal’)中使用const。当我使用setName函数更改名称时，它不会显示错误。因为javascript中的const意味着它不能保持不变，所以它没有显示任何错误。
import React,{useState} from "react"
import ReactDOM from 'react-dom'
function Emp(){
const [name,setName]=useState("Micheal");
const [id
浏览 3提问于2021-03-02得票数 1
回答已采纳
1回答
我从改编了以下组件定义，如下所示。但是，与示例不同的是，我的组件每次移动鼠标时都会重新呈现。
重新渲染非常值得注意：
有谁知道为什么会发生这种事吗？
import React, { Component } from 'react';
import { PieChart, Pie, Sector } from 'recharts';
import { Segment, Header, Dimmer, Loader, Grid } from 'semantic-ui-react';
const renderActiveShape = (p
浏览 2提问于2017-01-20得票数 27
回答已采纳
我试图连续运行一个函数，直到满足条件，但在这个测试用例中，直到按下“关闭”按钮。我的第一个问题是，当我按下“关闭”按钮时，函数不会停止。
let intervalId
function on(){
intervalId = window.setInterval(function(){
setnum(num=>num+1)
//setnum(num + 1)
//Line 11 results in the number going up once and if i keep pressing the button it goes up by one but
浏览 3提问于2022-06-14得票数 0
回答已采纳
我正在尝试创建一个Quiz组件，每次呈现一个Question，并在用户选择其中一个时更改它。 但是，每次它呈现下一个问题时，它已经从上一个问题中设置了chosenOption变量。这是因为在我更改问题之前，我用该chosenOption设置了当前问题的新状态，奇怪的是(对我来说)这在呈现下一个问题组件时就已经设置好了。 对我来说，setChosenOption将只为当前问题设置，当测验呈现下一个问题时，其chosenOption最初将为空。我可能遗漏了一些功能组件如何呈现的东西...那么为什么会发生这种情况呢？ 提前感谢！ const Quiz = () => {
const
浏览 10提问于2021-01-30得票数 0
回答已采纳
我是React的初学者，我正在从udemy课程中学习。最初，我认为在状态更新之后，函数组件中的所有代码都会重新呈现/重新运行。但后来我在重定向之前看到了倒计时的实现，并感到困惑。
import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
const LoadingToRedirect = () => {
const [count, setCount] = useState(5);
let history =
浏览 0提问于2021-10-10得票数 0
下面是使用useState()的反应钩子实验。它可以正常工作，除非单击了+按钮，然后这个数字可以从7001和7000交替，然后在一些数字之间快速闪烁。
实际上，如果不点击+，这个数字表现得很好，但是高达8000或9000左右，然后它可能会在一些数字之间闪现。为什么是这样，怎么才能解决呢？
P.S.最初的调试发现是:似乎Counter()被多次调用，每次都设置一个间隔计时器。所以“神奇地”，似乎useState()只运行了一次--出于某种未知和神奇的原因--或者它运行了不止一次，但每次只返回完全相同的内容，为了某种神奇的机制。0的初始值确实是第一次如此。当它是未来时代的useState(0)时，
浏览 4提问于2020-02-13得票数 0
回答已采纳
这个照片传送带作品fine.It每5秒更换一次照片。我的问题是，setInterval(this.nextGP, 5000);如何在不调用` componentDidMount‘的情况下调用自己？以下是：
componentDidMount: function () {
this.interval = setInterval(this.nextGP, 5000);
},
在javascript中:在另一个函数中调用的函数在我们调用外部函数之前不会调用。
function outer(){
anotherFunction();
};
浏览 4提问于2016-11-24得票数 1
2回答
我在尝试使用setInterval更改react中的状态时遇到问题。为什么函数"alert“总是显示"null”消息？
import React, { useEffect, useState } from 'react';
const Playlist = (props) => {
const [test, setTest] = useState("");
useEffect(() => {
setInterval(load, 3000)
}, []);
const load = async () =&
浏览 1提问于2020-06-07得票数 0
import React,{useState} from "react"
const Pagination = ()=>{
const [pageCount, setPageCount] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(10);
const [itemOffset, setItemOffset] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [data, se
浏览 6提问于2022-09-03得票数 0
我在用react做计算器。每次我按数字按钮时，整个应用程序都会重新呈现，而不是<Display />。
为了防止这种情况，我尝试了两种不同的应用程序方法，但它们都不起作用。
任何帮助都将不胜感激。
将clickHandler放在useCallback()中
const App = () => {
const [screen, setScreen] = useState("0");
console.log("render");
const clickHandler = useCallback(
(val) =&g
浏览 3提问于2022-03-03得票数 0
在我的React应用程序中，我遇到了一些奇怪的行为，其中setEffect的状态(比如state1)作为第二个参数，在没有调用setState1的情况下改变了另一个变量(而不是状态)。因此，我编写了以下代码，以查看是否会发生相同的情况，并做到了：
import React, { useState, useEffect } from 'react';
function App() {
let [state1, setState1] = useState('');
let count = 0;
useEffect(() => {
co
浏览 1提问于2020-09-25得票数 2
回答已采纳
我想提高组件的性能，但是在对许多组件进行分析之后，我知道每个组件都在进行大量的重呈现，有什么方法可以减少组件在React中的重呈现吗？
浏览 5提问于2022-02-18得票数 0
回答已采纳
背景
在发布React v16.8之后，现在我们可以使用钩子来响应本机了。
我正在做一些简单的测试来查看呈现时间和
钩式功能组件和类组件。这是我的样本：
@Components/Button.js
import React, { memo } from 'react';
import { TouchableOpacity, Text } from 'react-native';
const Button = memo(({ title, onPress }) => {
console.log("Button render"); //
浏览 2提问于2020-05-26得票数 4
回答已采纳
我正在使用react+redux。我在父组件中有100000(示例) ImageComponent，比方说，ImageGrid。每个ImageComponent上的功能是，用户可以喜欢，删除和选择。
问题是，当我喜欢删除或选择任何单个ImageComponent时，我会在redux中更新它的状态，并且在每次状态更改时，它都会呈现整个100000 ImageComponent。
如何避免对那些没有改变的ImageComponent进行不必要的重呈现？
浏览 0提问于2018-05-11得票数 1
回答已采纳
1回答
将变量设置为相同值时的无限重呈现
、、、、
我使用了一个React本机功能组件，如下所示：
export const Component1 = () => {
const [var1, setVar1] = useState(false);
setVar1(false);
return (
<View...>
)
}
这是一个无限循环，但是当我移除setVar1(false)时，它就没有了。我假设如果我继续将var1重新设置为相同的false值，组件就不会重新呈现。我该怎么防止这个重渲染？
浏览 6提问于2022-10-11得票数 3
我需要让React每隔几秒钟运行一次函数，但是不应该在重新呈现DOM时重新启动倒计时。因此，基本上我想在应用程序启动时运行此函数，并且每30秒重新运行一次相同的函数，但如果当DOM重新呈现时，我不想让倒计时30秒从0重新启动。我正在检查这个答案How to call a function every minute in a React component?，但每次DOM呈现时，倒计时都被重置为0。有没有办法只使用React就能做到这一点呢？
浏览 118提问于2021-09-19得票数 1
5回答
我有以下简单的组件：
const Dashboard = () => {
const [{ data, loading, hasError, errors }] = useApiCall(true)
if (hasError) {
return null
}
return (
<Fragment>
<ActivityFeedTitle>
<ActivityFeed data={data} isLoading={loading} />
</Fragment>
)
}
e
浏览 1提问于2019-10-22得票数 4
我还没有找到一个明确的答案，希望这不是重复。
我正在使用React + Redux作为一个简单的聊天应用程序。该应用程序由InputBar、MessageList和Container组件组成。容器(如您想象的那样)封装了另外两个组件，并连接到存储区。我的消息以及当前消息(用户当前正在键入的消息)的状态保存在Redux存储中。简化结构：
class ContainerComponent extends Component {
...
render() {
return (
<div id="message-container">
浏览 5提问于2016-11-26得票数 105
回答已采纳
1回答
我有一个带有prop的react组件，这个prop是通过redux connect方法传递的。有一个专门链接到该属性的useEffect，它应该在该属性发生变化时执行异步调用。问题是，每当我在该应用程序的其他任何地方更改redux状态时，useEffect都会触发，尽管我将useEffect附加到了不更改的属性。
useEffect方法如下所示
useEffect(() => {
if (userPhoneNumber) {
myAsyncFunction()
.then(() => {
showData()
浏览 0提问于2020-06-06得票数 0
我正在尝试弄清楚为什么当我单击一个特定的组件时，它的同级组件也会呈现出来
function CountButton({increment, count, number}) {
console.log(`Render CountButton ${number}`)
return <button onClick={() => increment(count + 1)}>{count}</button>
}
function DualCounter() {
const [count1, setCount1] = React.useState(0)
c
浏览 14提问于2021-02-22得票数 0
几天前，我在考虑在我的案例中使用react。情况很简单:我有一个对象列表，它处理快速更新，如上面的示例所示：
var ListItem = React.createClass({
render: function() {
return (
<tr>
<td>{this.props.data.sign}</td>
<td>{this.props.data.a}</td>
<td>{t
浏览 0提问于2015-08-16得票数 3
1回答
API请求不刷新数据。
、、、、
今天我想测试axios.all，所以我制作了脚本，您可以看到下面只有一个小问题。脚本允许我在运行API时从API中检索数据，但是有些东西我不明白。函数setInterval按请求每30秒执行一次操作，但它显示的值完全相同，当我手动重新加载页面时，会出现一个新的console.log，但数据完全相同。当然，我的目标是，一旦完成了第一个请求，就可以执行其他请求来更新数据，我的印象是数据存储在缓存中，而且它永远不会过期。
谢谢你的帮忙
这是我的剧本：
import logo from "./logo.svg";
import "./App.css";
import a
浏览 3提问于2022-07-30得票数 0
我正在React中创建一个游戏。基本描述:绵羊图像是从屏幕的中心“发射”的，它们被动画移动到边界。如果他们做到了，你就输了。如果你之前点击了它们，它们就会消失，你就可以继续了。我已经做好了所有的东西，除了计数器，它计算你点击了多少只羊。描述代码： <MainComponent // everything else inside it
renders <Component creating background/>
<Component creating sheep images
renders array of she
浏览 15提问于2019-01-28得票数 0
回答已采纳
1回答
我的同事指出了一个可能与反应背景有关的问题。他善意地在CodeSandBox中创建了两组代码来演示这个问题。
Redux版本(工作没有任何问题)
使用Chrome，请打开此链接：Open在另一个选项卡中的独立链接：In独立选项卡，打开Chrome DevTools并单击React Components选项卡。配置中的，确保textbox中的“当组件呈现时突出显示更新”是checked.Type，并注意到颜色矩形仅出现在组件1和2周围。是我们的基本案例，说明了我们希望用每个键重新呈现的内容。。
上下文版本(说明问题)
使用Chrome的Open ，请打开此链接:在另一个选项卡中打开独立链接：In
浏览 4提问于2019-11-15得票数 0
回答已采纳
我使用了react-router-redux并嵌套了connect()组件。这似乎工作得很好，除了我的嵌套组件会在状态改变时重新呈现。
Probs: Root有5个子组件:如果任何一个子组件中有任何状态变化，所有组件都会重新呈现，因为所有组件都是connect()。
如何才能仅渲染所需的子项？
(有没有办法使用connectAdvanced生命周期方法来解决这个问题？
浏览 4提问于2017-12-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
