如何解决 ReactJS 中过多的重新渲染错误？

“Too many re-renderers”是一个 React 错误，在你到达无限渲染循环后发生，通常是由 useEffect 钩子中的代码或组件本身无条件调用状态设置器的代码引起的。

React 什么时候决定重新渲染一个组件？

• 第一次渲染将在 componentWillMount 生命周期之后触发。
• 在 React ComponentWillUpdate 生命周期之后，它会被激活。
• 挂载 React 组件后，它将监听任何已更改的 React 道具或状态。
• 默认情况下，它会在检测到某些内容发生更改时重新渲染整个 React 组件及其子组件。

这些是避免 React 中出现过多重新渲染错误的一些技巧：

• 不要更改组件主体中的状态。
• 非常谨慎地使用 useEffect 挂钩。 useEffect 的第二个参数是基于将调用的 useEffect 的状态数组。所以不要更新 useEffect 中的那些状态，否则它会一次又一次地重新渲染组件。
• 使用 React shouldComponentUpdate： React shouldComponentUpdate 是一种优化性能的方法，它告诉 React 停止重新渲染组件，即使它可能已经更改了 state 或 prop 值。仅当零件在使用时保持不变或纯净时才使用此方法。你应该使用 React shouldComponentUpdate 方法返回一个布尔值。如果需要重新渲染，则返回 true，否则返回 false 以避免重新渲染。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

Filename-App.js：下面是一个如何使用 React shouldComponentUpdate 的例子。我在这段代码中构建了 2 个 React 组件。一个是问候语的一部分，另一个是应用程序组件。在渲染生命周期中，每个 React 组件都是一个记录消息的控制台。

Javascript

import React from "react";
class Greeting extends React.Component {
  render() {
    console.log("Greeting - Render lifecycle");
  
    return 
Geeksforgeeks
;
  }
}
  
class App extends React.Component {
  render() {
    console.log("App - Render lifecycle");
  
    return ;
  }
}
  
export default App;

输出：

Filename-App.js：接下来，在 componentDidMount React 生命周期中，我将添加 React 状态，并更新状态值。

Javascript

import React from "react";
  
class Greeting extends React.Component {
  render() {
    console.log("Greeting - Render lifecycle");
  
    return 
Geeksforgeeks
;
  }
}
  
class App extends React.Component {
  state = {
    greeted: false,
  };
  
  componentDidMount() {
    this.setState({ greeted: true });
  }
  
  render() {
    console.log("App - Render lifecycle");
  
    return ;
  }
}
  
export default App;

输出：您可以在输出中看到渲染生命周期在应用程序和问候语组件上多次触发。这是因为 React 应用程序组件在更新状态值之后被重新渲染，并且它的子组件也被重新渲染。我们应该假设问候部分没有改变，并且永远不会改变。

Filename- App.js：当我们创建的组件在任何时候都是静态的时，使用 shouldComponentUpdate 钩子。

Javascript

import React from "react";
class Greeting extends React.Component {
  shouldComponentUpdate() {
    console.log("Greeting - shouldComponentUpdate lifecycle");
  
    return false;
  }
  
  render() {
    console.log("Greeting - Render lifecycle");
  
    return 
Geeksforgeeks
;
  }
}
  
class App extends React.Component {
  state = {
    greeted: false,
  };
  
  componentDidMount() {
    this.setState({ greeted: true });
  }
  
  render() {
    console.log("App - Render lifecycle");
  
    return ;
  }
}
  
export default App;

输出：您可以看到应用程序和问候组件经历了一轮渲染生命周期。状态值更改后，App 组件再次经历渲染生命周期。但是 Greeting 组件没有控制台记录 Lifecycle Render 消息。