如何解决React“重新渲染过多”错误
React的“重新渲染过多”错误通常是由于组件的不必要重新渲染引起的。解决这个错误的方法有以下几种：
- 使用React.memo()或PureComponent：React.memo()是一个高阶组件，用于对组件进行浅层比较，只有在组件的props发生变化时才会重新渲染。PureComponent是React提供的一个基于浅层比较的纯组件，它会自动进行props和state的浅层比较，只有在发生变化时才会重新渲染。使用React.memo()或PureComponent可以避免不必要的重新渲染。
- 使用shouldComponentUpdate生命周期方法：shouldComponentUpdate是React提供的一个生命周期方法，用于控制组件是否重新渲染。在shouldComponentUpdate方法中，可以根据组件的props和state的变化情况，返回一个布尔值来决定是否重新渲染组件。通过在shouldComponentUpdate方法中进行优化判断，可以避免不必要的重新渲染。
- 使用React的Context API：React的Context API可以用于在组件树中共享数据。通过将需要共享的数据放在Context中，可以避免将数据通过props一层层传递给子组件，从而减少组件的重新渲染。
- 使用React的useCallback和useMemo钩子函数：useCallback和useMemo是React提供的两个钩子函数，用于优化函数和计算结果的缓存。useCallback可以缓存函数，避免在每次渲染时都创建新的函数实例，useMemo可以缓存计算结果，避免在每次渲染时都重新计算结果。通过使用useCallback和useMemo，可以减少不必要的重新渲染。
- 使用React的虚拟化组件：如果组件中包含大量的列表或表格数据，可以考虑使用React的虚拟化组件，如react-virtualized或react-window。虚拟化组件可以只渲染可见区域的内容，从而减少组件的重新渲染。
腾讯云相关产品和产品介绍链接地址：
- React.memo()：https://reactjs.org/docs/react-api.html#reactmemo
- PureComponent：https://reactjs.org/docs/react-api.html#reactpurecomponent
- Context API：https://reactjs.org/docs/context.html
- useCallback和useMemo：https://reactjs.org/docs/hooks-reference.html#usecallback
- react-virtualized：https://github.com/bvaughn/react-virtualized
- react-window：https://github.com/bvaughn/react-window
相关·内容
3回答
我正在做一些事情，我的一段代码有点慢，我认为发生的情况是组件无缘无故地重新渲染了太多次。有没有办法检查一个组件在react(或react-native )中重新渲染了多少次？我尝试做的是在render方法后放置一个console.log，并计算有多少个，但我不确定这是否有效。提前感谢！
浏览 6提问于2019-02-07得票数 9
回答已采纳
1回答
我是javascript和react钩子的新手，并且我一直收到以下代码的“重新渲染次数太多”的错误
const [showReminder, setShowReminder] = useState(
lastDismissedDate.diff(overrideDate, 'days') >= 0,
);
if (latestIndexScore && !hasCompletedIndexRecently(latestIndexScore.date)) {
setShowReminder(true);
}
有没有办法把这两句话
浏览 7提问于2019-11-30得票数 0
有人能帮帮我吗？基本上，我正在为学校的一个项目使用React和Typescript，突然，这个错误发生了，我不明白为什么……我试着用一个布尔状态和一个简单的Work[]来解决这个问题，这两个状态总是会出现相同的错误:太多的重新渲染，我不知道为什么。感谢救了我的仁慈的灵魂，我感谢你 这是我的组件 export default function WorkList(props :any) {
const id = props.id
const [works, setWorks] = useState<Work[]>()
useEffect(()=> {
浏览 34提问于2021-08-20得票数 0
我尝试使用react钩子而不是基于类的组件，但在性能方面遇到了一些问题。 代码： import React, { memo, useCallback, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
let counter = -1;
function useToggle(initialValue) {
const [toggleValue, setToggleValue] = useState(initialValue
浏览 34提问于2019-02-14得票数 1
回答已采纳
我不知道这是怎么发生的，我无意中在一个包中添加了一个错误，当我删除它时，就发生了这种情况。我相信这和我的package.json有关。
这是我的package.json：
{
"name": "student-management",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "expo start --dev-client",
浏览 6提问于2022-01-10得票数 -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
这是我的代码。我想在列表的顶部添加一个新的费用项目。我希望得到一些帮助，告诉我如何在列表的顶端创建新的费用。我一直得到相同的错误:太多的重新渲染。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
我正在尝试通过react@16.5.2在我的create-react-app中使用lazy loading，我这样做了：
import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
const Header = React.lazy(() => import('./_header'));
class SomeFile extends Component {
render() {
return
浏览 33提问于2018-12-15得票数 2
回答已采纳
3回答
我有一个react-bootstrap模式，里面有两个输入。当状态中的showModal属性更改为true时，将显示Modal。当输入值发生变化时，我会更新fieldOne属性(也在状态中)。所以，每当我在输入中输入一些东西时，模式也会闪烁(重新渲染)。
如何在更新状态时防止Modal重新渲染？
浏览 17提问于2020-02-03得票数 0
回答已采纳
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
我想从myComponent外部调用setProps，以便能够动态更改myComponent的数据。
我希望在更改组件的道具后，它会重新渲染自己。
我尝试了以下几种方法：
var myComponent = React.createClass({
render: function () {
return (
React.DOM.div(null, this.props.data)
);
}
});
React.renderComponent(
myComponent({ data: someData }),
document.getElementB
浏览 0提问于2014-08-05得票数 14
回答已采纳
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
在我的主要函数App()中，在useEffect()中，我成功地使用了一些API获得数据(变量名为document)。我的数据是带有一些字段( title和text )的对象。
我通过函数传递这些数据，并希望不同的函数使用文档的不同部分。后来，我成功地把标题写成：
import React from 'react'
import "./Title.css"
function Title({document}) {
return (
<div className="title">
{do
浏览 2提问于2021-04-13得票数 0
回答已采纳
我认为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
例如，我有一个名为List的React Hook组件，它具有任意数量的子项Entry (可以添加或删除)。如果条目的数据发生变化，我如何才能在不重新渲染父条目的情况下更新它，这将重新渲染其所有兄弟项，这可能是巨大的。我希望避免使用useRef和useImperativeHandle，首先是因为我的代码变得更加复杂，而使用react-sortable-hoc使得使用它们变得不可能。
浏览 32提问于2020-03-06得票数 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
我一直在使用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
2回答
假设您有一个简单的react应用程序(请参阅我的)：
import React from 'react';
import { render } from 'react-dom';
class RenderPropComponent extends React.Component {
render() {
console.log(this.example.test());
return this.props.render();
}
}
class Example extends React.Component {
test = ()
浏览 36提问于2018-01-02得票数 4
回答已采纳
1回答
react组件组合，但令人困惑
、、、、
所以我有一个代码片段here，基本上呈现了丹提到的idea，它是在react中提升内容，以自然地提高性能并编写更干净的代码。在InputField组件中，按钮总是渲染，这不是我想要的行为，它应该跳过渲染按钮组件.so它应该做的是跳过渲染，因为按钮是输入域的子道具，如果子道具没有改变，react将跳过渲染。 丹解释了类似的概念示例：“当颜色改变时，ColorPicker会重新渲染。但它仍然有上次从应用程序中获得的相同的子道具，所以React不会访问那个子树。” 所以我很困惑，多个子道具的问题是不是因为InputField有值，onChange，子道具，其中一个改变了，react决定更新其他的？
浏览 21提问于2021-11-03得票数 0
回答已采纳
我一直在开发一个魔方程序，渲染效果在我的macbook pro/google chrome浏览器上运行得很好。然而，对于GPU较慢的计算机，我的立方体会破裂，因为渲染速度比动画慢。我尝试过寻找优化渲染的方法，但还没有成功。
我使用react，componentDidMount函数在1463行，生成立方体网格，动画函数在1539行。感谢您的帮助，谢谢！
浏览 29提问于2019-11-08得票数 0
回答已采纳
我有一个映射函数，它映射一个具有fullname和points属性的用户数组对象。有没有一种方法，我可以添加每个用户的分数，而它映射并存储在一个变量中。我尝试了几种方法使用useState (在react中)，但我一直收到重新渲染错误。 {users.map((user, index) => { return (
<tr key={index}>
<td>{user.fullname}</td>
<td>{user.points}</td>
</tr>
); })} 如有任何帮助，将不胜感激..
浏览 5提问于2021-10-25得票数 2
回答已采纳
这个问题严重影响了我的表现。每次状态改变时，我的孩子的状态都会被重新渲染。有什么方法可以摆脱它吗？如何防止我的子组件不受这种类型的重新渲染的影响。请帮帮忙。
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
我在react中使用gsap制作了一个自定义光标。我不能理解为什么当光标移动时会发生渲染，尽管我没有改变状态？
谢谢。
浏览 32提问于2020-02-08得票数 0
4回答
我正在使用Expo + React导航。
在我的React Native应用程序中有很多使用组件Map的屏幕。我不希望这个组件在切换屏幕时被重新渲染。有没有办法将我的组件Map保存到某种类型的存储中，这样每次我需要Map时，我的应用程序就不必重新渲染它？
浏览 2提问于2018-04-02得票数 5
1回答
我使用MERN - (MERN，redux，webpack，nodejs，express)和组件react 。
当我包括组件时
import Sound from 'react-sound';
并试着启动服务器，我有来自webpack服务器渲染的"window is not defined"错误。
但是如果我评论这一行并启动服务器，一切都会好起来的。在此之后，我可以取消注释这一行和组件将工作，因为当服务器运行时，更改不会触发服务器呈现(仅前端呈现)。
如果我试着
if (typeof window !== 'undefined') {
浏览 4提问于2017-04-25得票数 2
假设我在React中有以下父组件和子组件的配对：
var ChildComponent = React.createClass({
getDefaultProps: function(){
return {
a: 'a',
b: 'b',
c: 'c'
}
},
render: function() {
return (
/* jshint ignore:start */
浏览 0提问于2015-02-06得票数 11
回答已采纳
我仍然在学习React，并且发现它比我预期的更难学习，我也仍然在学习web开发。
如果我们的应用程序中只有一个视图，并且我们只有一个div，如下所示：
<body>
<div id="react-app"></div>
</body>
这是否意味着我们所有的React组件都将被追溯到一个React父组件？
这是否意味着当我们呈现页面时，我们只在顶层父组件上调用render()，然后React将负责其余的工作？如果我们在等待数据，我们如何异步渲染子元素呢？
浏览 1提问于2015-12-27得票数 2
我的错误越来越严重了。太多的重新渲染。
我想做什么？
单击按钮时，调用开始函数并打开模式弹出。一旦开始功能完成，我必须关闭模式弹出。
下面是密码，
enum CheckStatus {
INITIAL,
STARTING,
STARTED,
FINISHED,
FAILED,
}
const useSomeHook = (id) => {
const [status, setStatus] = React.useState(CheckStatus.INITIAL);
const start = React.useCall
浏览 9提问于2021-12-31得票数 0
5回答
我正在学习本教程：
试图学习“浅渲染”是如何工作的。
我有一个高阶组件：
import React from 'react';
function withMUI(ComposedComponent) {
return class withMUI {
render() {
return <ComposedComponent {...this.props}/>;
}
};
}
还有一个组成部分：
@withMUI
class PlayerProfile extends React.Component {
render() {
浏览 6提问于2015-07-16得票数 20
回答已采纳
如果React在重新渲染之前比较(浅)前一个状态和下一个状态，它将减少许多渲染，这有助于优化性能。
根据的说法，当setState方法被调用时，React总是呈现组件及其子组件。React应该巧妙地处理组件及其子组件的不必要的重新呈现。
浏览 8提问于2018-07-21得票数 5
1回答
我有一个react组件，它每隔4秒从数据库中提取数据，导致状态更改和重新呈现。然而，我有一些文本，我希望能够点击和编辑，而不是重新渲染中断它。我目前有这个用于文本更改...
const [name, setName] = useState("name")
handleChange(event) {
setName(event.target.value);
}
render() {
return (
<form>
<input type="text" value={name} onChange={handl
浏览 0提问于2020-12-22得票数 1
我正在制作一个React仪表板，它每分钟都会调用一个API来进行更新。下面是这么多的答案，我现在有这样的答案：
const Dashboard = (props) => {
const [stockData, setStockData] = useState([]);
useEffect(() => {
//running the api call on first render/refresh
getAPIData();
//running the api call every one minute
const interval = s
浏览 0提问于2021-05-10得票数 1
回答已采纳
我在React中渲染路由时遇到问题。我所看到的就是React对其进行渲染之前的页面，以及下面的错误。
主要是，我很难找出是哪个组件/行导致了错误，如果有人能提供一些见解，我会很感激的。谢谢。
浏览 1提问于2015-08-14得票数 5
在React应用程序中，我有一个带有多个手风琴的侧面板，用户必须向下滚动才能看到所有的手风琴。当我单击面板下方的按钮时，面板显示为重新渲染(刷新，看起来就像用户滚动回面板顶部一样)。有没有办法防止这种重新渲染，以便当用户单击按钮时，面板不会移动/滚动/重新渲染(以便用户正在查看的按钮和折叠面板仍然可见)？
我希望当用户单击面板下部的按钮时，面板不会重新呈现或滚动回顶部。
浏览 14提问于2019-10-25得票数 0
当我从父组件(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
回答已采纳
1回答
我已经创建了一个React应用程序，它使用了谷歌的Material Design Polymer components和react-polymer。当通过webpack-dev-server运行我的应用程序时，所有的聚合物组件都可以正常渲染。
但是一旦我将其上传到digitalocean上的Apache2服务器，所有的组件都不会被渲染。我没有收到任何网络错误，也没有资产未被获取。起初，我认为是mod_pagespeed剥离了我的样式和聚合物导入，但禁用它并没有帮助。
我尝试使用基本的node.js服务器在本地为我的站点提供服务，但聚合物组件再次无法呈现。
我还创建了html文件，将导入内容直接
浏览 1提问于2016-12-22得票数 0
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
我正在尝试使用react设置服务器端渲染。每当我访问希望服务器端渲染工作的路由时，我都会收到错误TypeError: Cannot set property 'props' of undefined。
我的路由器如下所示：
import DetailsPage from './DetailsPage.jsx';
import Home from './Home.jsx';
const routes = (
<Route name="app" path="/" handler={App}>
浏览 0提问于2015-11-16得票数 3
我想初始化一个组件，但它一直在渲染。
根据的说法，我使用React.memo，但这并不能阻止组件重新呈现:console.log(“重新呈现”)打印不止一次。无论树中发生了什么，我如何使该组件完全静态？
const Canvas = React.memo((props) => {
const context = useContext(Context);
const width = "500%";
const height = "500%";
const count = useRef(0);
useEffect((
浏览 1提问于2020-02-20得票数 1
我正在尝试重写React代码，以便主要使用服务器端渲染，但我在使用React-Bootstrap时遇到了问题。从import Grid from 'react-bootstrap/lib/Grid';切换到var Grid = require('react-bootstrap/lib/Grid');会在render方法中出现错误：
那么应该如何导入React-Bootstrap组件呢？对于React-Bootstrap来说，这是完全可能的吗？任何建议都将不胜感激。
浏览 2提问于2018-02-06得票数 1
我在类型记录中编写了一个简单的treeview，使用react来呈现DOM。
每个节点都必须遵循简单的接口。
interface INode {
label: string;
children: INode[];
}
然后用以下方法描述这棵树：
var tree = {
label: "root",
children: [
{
label: "node 1",
children: [
{
labe
浏览 1提问于2016-03-14得票数 6
回答已采纳
2回答
我想知道如何在React中管理复杂的状态，限制那些内容没有改变的组件的渲染调用的数量。
举个例子：
我有简单的连接到redux存储容器组件与“项目”道具(这是数组)。
const Component = ({ items }) => (
<>{items.map(item => <ItemComponent key={item.id} {...item} />}</>
);
const mapStateToProps = state => ({
items: $$data.select.items(state),
});
浏览 39提问于2019-06-18得票数 4
正如我在下面展示的，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
1回答
我有以下内容，其中Posts是Meteor中的mongo集合：
//Tracker.autorun(function() {
// only return 25 most recent metadata
var data = Posts.find({}, {
"limit": 25,
"sort": {
"date": -1
},
"fields": {
"metadata": 1
浏览 1提问于2014-11-26得票数 0
1回答
我正在尝试首先更新状态，然后在函数组件中呈现组件。我已经得到了使用useEffect钩子的答案。然而，来自react官网的文档有点令人困惑，因为它声明，“传递给useEffect的函数将在渲染提交到屏幕之后运行。”()据我所知，它说它首先渲染，然后运行回调函数。这不是我想要的。我想先更新状态，然后再渲染。我该如何实现它呢？
浏览 0提问于2020-07-26得票数 0
我想随机显示两个不同的DIVs :一个或另一个。因此，我尝试保留一个随机的布尔状态变量，并根据它进行渲染。 为了简单起见，我们试着在蓝色框中显示蓝色标志，在红色框中显示红色标志。 import React, {useState} from 'react';
const Loader = () => {
const [redLoader, setRedLoader] = useState(Math.random() < 0.5);
const loader = redLoader ?
<div style={{ backgroundCol
浏览 19提问于2021-09-02得票数 0
回答已采纳
1回答
在使用安装不同的软件包时，我得到了这种类型的错误。我不想通过强制或其他方式安装这些软件包。这是至关重要的，因为我在我的项目开发之间。有人帮我解决这个问题吗？
节点-版本-16.0 npm -版本- 8.11.0
npm错误！代码ERESOLVE npm错误！ERESOLVE无法解析依赖树npm！npm错误！同时解析: nims@0.1.0 npm错误！发现: react@18.2.0 npm错误！节点_模块/反应npm错误！反应@“^18.2.0”从根项目npm错误！npm错误！无法解决依赖: npm错误！对等反应@“^16\x\x\17”来自react顶层加载-bar@2.1.0NPM错误！
浏览 1提问于2022-08-03得票数 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
回答已采纳
我对渲染组件有问题。我在我的控制台中得到了一个“无效的钩子调用”错误。根据，我试着检查了三个主要的“原因”，但我似乎找不到它是什么。我正在使用React路由器，并试图为我的网站设置骨架。。(在安装(和安装) React路由器之前，一切正常工作.)
据我所知，没有重复的反应：
这是我的Header.js
import React, { useState } from "react";
import { Routes, Route, Link } from "react-router-dom";
import { Over } from "../../
浏览 10提问于2022-05-11得票数 2
回答已采纳
我已经在react中创建了一个带有标签的Slider。当用户移动Slider时，下面的数字会突出显示，我通过给出number类实现了这一点。 <span
className={scaleHighlightClass[index]}
key={index}
ref={scaleElement}
onClick={() => handleClickOnScale(index)}
> scaleHighlightClass数组使用钩子，如下所示： const [scaleHighlightClass, setScaleHighlightClass] = u
浏览 23提问于2021-09-17得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
