React组件正在重新渲染无限次
React组件无限次重新渲染通常是由于以下几种原因：
- 状态更新：如果你在组件的
render方法或者useEffect钩子函数中更新状态，那么这可能会导致组件无限次重新渲染。因为每次状态更新都会触发组件的重新渲染，如果你在渲染过程中又更新了状态，那么就会形成一个无限循环。 - 父组件的重新渲染：如果父组件重新渲染，那么它的所有子组件也会重新渲染。如果父组件因为某种原因在无限次重新渲染，那么子组件也会跟着无限次重新渲染。
- Props改变：如果你的组件依赖于props，并且这些props在每次渲染时都在改变，那么这也可能会导致组件无限次重新渲染。
相关·内容
当我从父组件(Post)使用usePost hook调用setPost时，为什么这会导致无限的重新渲染器？是什么导致了这个错误？ function Post({ activePostId }) {
const { status, post, setPost, error, refetch } = usePost(activePostId)
const [savePost, savePostStatus] = useSavePost()
setPost('SetPost')
const onSubmit = async (values) => {
浏览 23提问于2021-05-08得票数 0
回答已采纳
3回答
我刚开始反应...
此代码仅在3秒后使用布尔值呈现。
但是下面的代码一直在渲染..渲染..正在渲染...几乎每三秒一次。
import React, { useState } from "react";
const App = () => {
const [isLoading, setIsLoading] = useState(true);
setTimeout(() => {
setIsLoading(!isLoading);
}, 3000);
return <h1>{isLoading ? "Loading&#
浏览 32提问于2021-02-19得票数 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
4回答
我正在使用Expo + React导航。
在我的React Native应用程序中有很多使用组件Map的屏幕。我不希望这个组件在切换屏幕时被重新渲染。有没有办法将我的组件Map保存到某种类型的存储中，这样每次我需要Map时，我的应用程序就不必重新渲染它？
浏览 2提问于2018-04-02得票数 5
正如我在下面展示的，react子渲染每次它的父渲染时都会渲染。这是为什么，这是一个问题吗？另外，我怎样才能避免它，以致于只有当它的优点改变时，子对象才会重新渲染。 import React, {useEffect, useState} from 'react';
function App() {
return (
<div>
<Main></Main>
</div>
);
}
export default App;
function Main() {
const [count
浏览 38提问于2020-04-29得票数 1
例如，我有一个名为List的React Hook组件，它具有任意数量的子项Entry (可以添加或删除)。如果条目的数据发生变化，我如何才能在不重新渲染父条目的情况下更新它，这将重新渲染其所有兄弟项，这可能是巨大的。我希望避免使用useRef和useImperativeHandle，首先是因为我的代码变得更加复杂，而使用react-sortable-hoc使得使用它们变得不可能。
浏览 32提问于2020-03-06得票数 0
3回答
我正在做一些事情，我的一段代码有点慢，我认为发生的情况是组件无缘无故地重新渲染了太多次。有没有办法检查一个组件在react(或react-native )中重新渲染了多少次？我尝试做的是在render方法后放置一个console.log，并计算有多少个，但我不确定这是否有效。提前感谢！
浏览 6提问于2019-02-07得票数 9
回答已采纳
我正在对TypeScript使用react。我在react中映射了一个JSON文件。在浏览器中渲染所有数据只需要一秒钟。我使用的是函数组件。下面是代码。请帮我在浏览器中优化渲染时间。
import users from "../data/users.json";
const Users:React.FC=() => {
const displayUsers=users.map((item){
return(
<p> {item.username} </p>
<p> {item.location} </
浏览 0提问于2021-03-14得票数 0
我一直在使用react.js创建一个小应用程序。
所以我有一个简单的名为“微调”的子组件。我的目标是确保这个组件永远不会重新渲染。
下面是我的组件：
import React, {PureComponent} from 'react';
export default class Spinner extends PureComponent {
render() {
return (
<div className="spinner">
<div className="bounce1"
浏览 2提问于2016-12-10得票数 6
我对以下虚拟组件进行了一些测试，在执行过程中(在控制台中)，我得到了以下结果：
Rendering: 0
Triggered: 0
Rendering: 4
Triggered: 4
Rendering: 4
我很难理解为什么。
首次渲染：
将index设置为0。
运行useEffect，因为undefined不是0
useEffect请求将index设置为4
第二次渲染：
index是4
为什么useEffect身体会再次被执行？
第三次渲染：
为什么要重新渲染？
我期望的是：
Rendering: 0
Triggered: 0
浏览 1提问于2022-01-19得票数 2
回答已采纳
2回答
我不能从子组件重新渲染父组件-我将componentDidMount作为道具传递给子类，然后在那里调用它，并期望父组件重新渲染。render函数被调用，但内容保持不变。怎么了？
var Parent = React.createClass({
getInitialState: function () { return {content: 'clean'}; },
componentDidMount: function () {
this.setState({content: 'changed!'});
},
render: f
浏览 13提问于2016-08-23得票数 0
我在互联网上发现了这一点："React组件在其状态或道具发生变化时自动重新渲染“，但如果我在道具中传递了一些不同于状态的东西，即使道具在时间上发生了变化，它也不会引发渲染。
在这段代码中，我传递了一个属性，但没有使用state
父级
import React from "react";
import Child from "./child";
export default function Parent() {
let count = 0;
setInterval(() => {
count++;
console.log
浏览 1提问于2020-05-03得票数 2
React说纯渲染可以优化性能。现在React有了PureComponent。我应该在任何地方使用React.PureComponent吗？或者什么时候使用React.PureComponent，在哪里使用React.PureComponent最合适？
浏览 3提问于2017-03-13得票数 52
回答已采纳
目前我的组件渲染了4次。看起来它正在为每个道具渲染。如果我删除了除网络之外的道具，那么它只渲染一次，但是我确实需要其他道具。我在componentDidUpdate中使用了if语句，因为我需要检测更改，但是我渲染了4次，并且我的网络属性是相同的 export class Camera extends Component {
componentDidUpdate(prevProps, prevState){
if (prevProps.network !== this.props.network){
this.connect(this.props.network)
浏览 135提问于2021-11-08得票数 3
回答已采纳
在这个例子中，我使用memo来防止组件重新渲染，但是，即使项目属性没有改变，它也会在每次单击按钮时重新渲染。根据react文档，只有当道具被更改时，带有备忘录的组件才不会重新呈现。
import React, { memo, useContext } from "react";
import { BasketContext } from "./Context";
const ItemCard = React.memo(({ item }) => {
const [basket, setBasket] = useContext(BasketContex
浏览 6提问于2021-06-01得票数 0
1回答
react组件组合，但令人困惑
、、、、
所以我有一个代码片段here，基本上呈现了丹提到的idea，它是在react中提升内容，以自然地提高性能并编写更干净的代码。在InputField组件中，按钮总是渲染，这不是我想要的行为，它应该跳过渲染按钮组件.so它应该做的是跳过渲染，因为按钮是输入域的子道具，如果子道具没有改变，react将跳过渲染。 丹解释了类似的概念示例：“当颜色改变时，ColorPicker会重新渲染。但它仍然有上次从应用程序中获得的相同的子道具，所以React不会访问那个子树。” 所以我很困惑，多个子道具的问题是不是因为InputField有值，onChange，子道具，其中一个改变了，react决定更新其他的？
浏览 21提问于2021-11-03得票数 0
回答已采纳
这个问题严重影响了我的表现。每次状态改变时，我的孩子的状态都会被重新渲染。有什么方法可以摆脱它吗？如何防止我的子组件不受这种类型的重新渲染的影响。请帮帮忙。
import React from "react";
const Content = ({children}) => {
console.log("I am rendering multiple times on each update");
return children;
};
export default function App() {
const [open, setOpe
浏览 3提问于2020-06-12得票数 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
回答已采纳
我正在尝试弄清楚为什么当我单击一个特定的组件时，它的同级组件也会呈现出来
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
当用户发表评论时，我正在尝试触发重新渲染。所以我使用了setState。似乎不会重新渲染。我想在每次处理提交时重新渲染。
我只是对它进行了编辑，所以它不是一个承诺；这是我的错误。但是它似乎不能重新渲染。
这是this.state.comments所在的容器。它只是预先写好的。这样我就不用在构造函数中做了。
import React from 'react';
class CreateForm extends React.Component {
constructor(props) {
super(props);
this.state
浏览 1提问于2020-01-18得票数 0
我试着用下面的代码一次只执行urql useQuery。但由于某些原因，每次重新渲染时都会调用它。 根据文档https://formidable.com/open-source/urql/docs/basics/queries/#pausing-usequery，这个查询最初应该在渲染时暂停，并且只有在挂载时从React.useEffect调用时才会执行。 const [{ fetching, data, error }, reExecute] = useQuery({
query: INITIAL_CONFIG_QUERY,
pause: true
});
React.useEf
浏览 38提问于2020-07-22得票数 8
回答已采纳
这是我的代码。我想在列表的顶部添加一个新的费用项目。我希望得到一些帮助，告诉我如何在列表的顶端创建新的费用。我一直得到相同的错误:太多的重新渲染。React限制渲染的次数，以防止无限循环。我该如何解决这个问题呢？
import React, { useState } from "react";
import { Text, View, ScrollView } from "react-native";
import NewExpense from "../NewExpense";
import {
selectTitle,
selectP
浏览 1提问于2021-09-06得票数 0
2回答
我想要一些帮助，请理解为什么下面的代码导致inf呈现循环。在我看来，这应该是一个循环：
渲染容器。
渲染子StrRow。
第一次运行效果并调用update()。
更改容器状态。
重新渲染容器。
重新渲染StrRow.
由于依赖项没有更改，不会再次运行。
然而，这种效果似乎是在StrRow的每次呈现之后运行的。
function Container() {
const [count, setCount] = React.useState(0);
const update = React.useCallback(() => {
浏览 3提问于2020-05-06得票数 0
回答已采纳
如果一个组件因为属性更改而需要在一秒内渲染几次，那么这个组件是否应该扩展React.PureComponent？
该组件没有子组件，但是，它本身是深度嵌套的...因此，道具正在通过其他几个组件进行传递。
通常，在决定是否应该使用React.PureComponent时，需要考虑哪些关键问题。在哪些场景下使用它是不好的？
浏览 1提问于2017-02-10得票数 1
我有一个React应用程序，它当前重新渲染的频率比我想要的要高。我正在使用React DevTools事件探查器来记录我的会话，并且我选中了该选项来记录组件重新呈现的原因。 对于有问题的组件，在“为什么呈现此组件？”下。上面写着“渲染的父组件”。然而，在devtools的组件树中，没有一个父组件正在呈现。他们都说“在这个分析会话期间没有渲染”。我正在排除故障的组件基本上是实际项目中最高级别的组件。 它的上方是以下组件： 应用程序 BrowserRouter 路由器 Context.Provider 交换机 Context.Consumer 路由 Context.Consumer Contex
浏览 17提问于2020-01-07得票数 2
2回答
我编写了一个简单的React来测试React如何呈现
import ReactDOM from 'react-dom';
import React, { useState, useEffect } from 'react';
const App = (props) => {
// State
const [trackIndex, setTrackIndex] = useState(1);
const [trackProgress, setTrackProgress] = useState(0);
const clickHandler =
浏览 7提问于2021-11-24得票数 0
1回答
当我初始化const时，它是这样的
-lat和leg只在函数内部可用，当我将它们发送到地图(我正在使用传单)时，它没有显示它们，它给了我这个错误：
错误:重新渲染过多。React限制渲染的次数，以防止无限循环。
import {Component,useState,useEffect,useRef, ReactNode, CSSProperties, Link} from 'react';
import { MapContainer, TileLayer, Marker, Popup,useLeaflet,leafletElement} from 'react-leaf
浏览 37提问于2021-11-13得票数 1
在任何地方都找不到有关此问题的文档。这会导致useEffect再次运行吗？我不想让它获取两次，这会在我的代码中引起一些问题。
import React, { useEffect } from 'react'
import { useHistory } from 'react-router-dom'
const myComponent = () => {
const { push } = useHistory();
useEffect( () => {
console.log(" THIS SHOULD RUN ONLY O
浏览 0提问于2020-08-07得票数 7
一天半以来，我一直在移动一个函数，试图转换组件的样式，将每一张牌放在旋转的卡片组中。卡片正在旋转，但以前渲染的卡片的旋转值在每次重新渲染时都会更改。有谁能给我指个方向吗？谢谢，如果你看了沙盒，请原谅你会发现一碗意大利面。 My Code Sandbox import React, {useState} from "react";
import "./Card.css";
function Card(props) {
function animateCard(){
let angle = Math.random() * 90 - 45;
浏览 23提问于2020-11-21得票数 0
回答已采纳
假设我在一个组件的render方法中有一个console.log：
class MyComp extends React{
render(){
console.log('rendering')
return <div>Hello</div>
}
}
每当呈现此组件时，我都会在控制台中看到它。这是否总是意味着虚拟Dom正在重新渲染？
换句话说，记录render方法是否是了解非虚拟DOM是否正在重新呈现的好方法？
浏览 0提问于2019-02-10得票数 1
所以我有一个使用Next.js的SSR应用程序。我使用的是一个使用WEB API的第三方组件，所以它需要加载到客户端而不是服务器上。我正在使用'two-pass‘渲染，我在这里读到了：
我试图弄清楚为什么当next.js页面状态中的'ssrDone‘状态改变时，整个<Layout>组件不必要地重新呈现，包括页面的页眉、页脚等。
我读过关于React.memo()以及利用shouldComponentUpdate()的文章，但我似乎无法阻止它重新呈现<Layout>组件。
我的<Layout> console.log消息触发两次，但<Th
浏览 154提问于2019-11-22得票数 4
回答已采纳
我不想在某些路径上重新渲染我的组件，尝试使用React.memo并使用withRouter HOC检查当前路径。
不会调用React.memo中的compare函数。
function compare(prevProps, nextProps) {
console.log(prevProps,nextProps)
return (prevProps.location.pathname !== '/' && nextProps.location.pathname !== '/')
}
export default React.memo( w
浏览 8提问于2020-03-28得票数 2
我正在读一个很棒的博客，发现了一些我不太清楚的地方。https://kentcdodds.com/blog/optimize-react-re-renders这里是我很难理解的代码片段。 https://codesandbox.io/s/react-performance-1-fast-sgz8f?file=/src/index.js import * as React from 'react'
import ReactDOM from 'react-dom'
function Logger(props) {
console.log(`${props.la
浏览 6提问于2021-08-26得票数 1
我认为react-spring会导致组件重新渲染很多次，所以如果它是一个已经有大量useSpring()工作要做的组件，那么react-spring不是最适合这个任务的。
在他们的示例中，我可以看到它重新渲染了很多次：
(通过查看console.log输出，其中包含大量的renderCount打印输出。当我们将持续时间更改为5000 (即5秒)时，打印输出要多得多。
同样，如果它是一个类似于react-spring的组件，它会呈现很多内容：
但是，以下代码：
let renderCount = 0
export default function App() {
const style
浏览 4提问于2021-04-21得票数 1
1回答
当UI事件发生时，我的顶级React组件接收来自外部对象的数据作为道具使用。我想知道更新组件的道具以用于下一次渲染的正确方法。
似乎其中一个组件生命周期方法应该处理这个问题，但情况似乎并非如此。
下面的代码显示了我尝试过的内容：
·一旦数据准备就绪，Root.update**:**自定义方法就会被外部调用。这两种技术都能发挥作用。
·Root.getDefaultProps**:**用于检索道具以进行第一次渲染。
·Root.render**:**也能工作，但在第一次渲染时是多余的。
·Root.componentWillUpdate**:**不起作用，但似乎应该起作用。
·Root.comp
浏览 0提问于2015-07-20得票数 1
回答已采纳
我已经使用react了一段时间，并阅读了文档，我发现了一些对我来说很奇怪的东西，为什么react重新渲染组件的子元素在父组件的每个状态更改上，即使子道具是相同的?？为什么我要把我的组件包装在Memo()中以防止这种重现呢？将Memo设置为每个react组件的默认设置，或者我是否应该对所有组件都使用它，并不是更好。
浏览 4提问于2021-04-22得票数 2
1回答
我是React Router的新手。 我有一个菜单栏，可以使用React Router 4切换页面。 我发现如果我点击当前路径的菜单项，页面将不会触发重新渲染。 (例如，当前路径为/person，然后单击将切换到/person的菜单项) 我有下面的React路由器。 <Switch>
<Route path={"/home"} component={Home} />
<Route path={"/person"} component={Person} />
<Route path={"/
浏览 22提问于2019-02-28得票数 2
我正在尝试使用history.push()，使用react路由器v5。我的网站是嵌入到另一个主要网站作为一个iframe。当history.push()被使用时，我观察到了一个奇怪的行为，我的网站在iframe里面一直在重新加载。
注意:这发生在所有浏览器中。
浏览 1提问于2022-07-29得票数 1
对于我的主页，我尝试使用带有交叉点观察器的可加载组件。当我的redux存储更新时，整个页面都会被重新渲染。我怎样才能避免这种情况？
import React from "react"
import loadable from "@loadable/component"
import { useSelector } from "react-redux"
const Index = () => {
const intersectState = useSelector(state => state.intersectState)
con
浏览 2提问于2021-08-06得票数 0
因此，我目前正在使用React Hooks，我正在尝试使用useEffect。它假设每当依赖关系发生变化时，useEffect都会重新呈现，对吗？但它对我不起作用。下面是我的代码： const [slidesPerView, setSlidesPerView] = React.useState(0)
React.useEffect(() => {
setSlidesPerView(() => (window.innerWidth <= 375 ? 1 : 2))
console.log("rerender?", slidesPerVie
浏览 25提问于2019-09-01得票数 8
回答已采纳
以下是代码：
import React, { useState } from 'react'
function App() {
const [a, setA] = useState(1)
setA(2)
return (
<div>
<h1>{a}</h1>
</div>
);
}
误差太多的重新渲染。React限制呈现的数量，以防止无限循环。
为什么它会导致无限循环？
我认为原因是函数组件就像呈现函数一样，所以当setState在render函数中时会导致无限循环。
有官方解释吗？
浏览 10提问于2020-02-20得票数 5
回答已采纳
我们有一个组件需要访问Redux的存储。
import React from 'react'
import { connect } from 'react-redux'
const Component = (props) => {
... code ...
}
我们已经使用connect将此组件连接到存储。
export default connect(mapStateToProps)(Component)
现在我们需要定义作为第一个参数传递给connect的mapStateToProps。
const mapStateToProps = stat
浏览 1提问于2019-06-18得票数 7
我的App组件定义如下：
function App() {
return (
<Router>
<Navbar/>
<Switch>
<Route path="/howitworks">
<HowItWorks/>
</Route>
<Route path="/aboutus"&g
浏览 3提问于2021-01-06得票数 0
我从React学到的一件事是，如果组件的道具没有改变，那么React就不会费心重新渲染组件。对于无状态组件也是这样吗？或者它们的行为更像是“愚蠢的”函数，并且每次都会被执行？
例如，如果我有：
import StatelessComponent from '../StatelessComponent';
export default class DocumentsTable extends React.Component {
state = {
something: 'foobar',
};
render() {
return (
浏览 1提问于2017-10-14得票数 51
回答已采纳
1回答
物料UI开关不更改UI
、、、、
我正在使用Material UI的开关来改变多页应用程序的主题。发生的唯一错误是交换机不能从左向右移动(ui功能不会出现)，但onChange功能工作正常。我尝试了一下，结果是当我移除forceUpdate()时，material ui开关将会工作，但是组件将不会被重新渲染。forceUpdate中有什么原因导致交换机功能无法正常工作？
App.tsx：
import React from "react"
import {Switch, Route, BrowserRouter, Redirect} from "react-router-dom"
import
浏览 2提问于2020-11-24得票数 1
1回答
我刚开始对React中的渲染过程感到困惑。
假设我有一个高阶组件，如下所示：
const withHOC = () => WrapperComponent => {
return class WithHOC extends React.Component {
render() {
//someProps => what will change...
//...rest => won't change
const { someProps, ...rest } = th
浏览 0提问于2018-08-28得票数 0
回答已采纳
我有以下样例react代码 const A = () => {
const [value1, setValue1] = React.useState(true);
const [value2, setValue2] = React.useState(true);
return (
<div>
<div class="first-comp">
<FirstComponent data1={value1} data2={value2} />
<
浏览 283提问于2021-09-14得票数 0
回答已采纳
我正在使用react本机和redux实现android应用程序。我的容器组件经常更新，但是我传递给子级无状态组件的道具没有改变，但是它仍然一直在重新呈现。我怎么才能阻止这个重渲染？我知道我可以使用shouldComponentUpdate，但是我需要检查所有的属性。
浏览 4提问于2016-11-07得票数 0
回答已采纳
我试图更好地理解为什么我的所有组件在Router v5中的路由更改时都会重新呈现。注意，这些组件只是重新呈现，而不是重新安装。当我在dev tools中打开react扩展并选择Highlight Updates复选框时，我可以看到所有组件在更改路由时都会被概述，甚至那些位于比路由匹配级别更高的组件：
<Router>
<MyHeader />
<ComponentWithRoutes />
</Router>
在这个简单的示例中，我希望更改路由不会重新呈现MyHeader组件，因为没有什么变化。不过，我仍然会看到开发工具的亮点。我认为这是
浏览 3提问于2018-06-05得票数 5
回答已采纳
我有一个连接到父容器的react组件。容器有mapStateToProps。我在容器中有一个控制台日志。道具正在更新。我可以在组件/子组件中看到属性更新。
未调用componentDidUpdate。我不知道在不调用componentDidUpdate的情况下怎么可能调用渲染。但这种情况正在发生。我在我的屏幕上看到组件更新，我有道具console.logged，他们正在更新。但componentDidUpdate并非如此。我觉得我疯了。
以前有没有人经历过这种情况？？
浏览 6提问于2018-08-02得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
