Как устранить ошибку слишком большого количества повторных рендеров в ReactJS?

Опубликовано: 7 Августа, 2021

«Слишком много повторных отрисовок» - это ошибка React, которая возникает после достижения бесконечного цикла отрисовки, обычно вызванная кодом, который в хуке useEffect или в основном теле самого компонента безоговорочно вызывает установщики состояния.

Когда React решает повторно отрендерить компонент?

Первый рендеринг будет запущен после жизненного цикла componentWillMount.
После жизненного цикла React ComponentWillUpdate он активируется.
После монтирования компонента React он будет прослушивать любые измененные свойства или состояние React.
По умолчанию он повторно визуализирует весь компонент React и его дочерние компоненты, когда обнаруживает, что что-то изменилось.

Вот несколько советов, как избежать слишком большого количества ошибок повторного рендеринга в React:

Не меняйте состояние в основной части компонента.
Используйте крючок useEffect очень осторожно. Второй параметр useEffect - это массив состояний, основанный на вызове useEffect. Так что не обновляйте эти состояния в useEffect, иначе компонент будет повторно визуализироваться снова и снова.
Используйте React shouldComponentUpdate: React shouldComponentUpdate - это метод оптимизации производительности, который сообщает React прекратить повторный рендеринг компонента, даже если он мог изменить состояние или значения свойств. Используйте этот подход только в том случае, если деталь остается неизменной или чистой во время использования. Ожидается, что вы вернете логическое значение с помощью метода React shouldComponentUpdate. Верните true, если требуется повторный рендеринг, или false, чтобы избежать повторного рендеринга.

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:

 cd имя папки

Структура проекта: это будет выглядеть следующим образом.

Имя файла - App.js: Ниже приведен пример использования React shouldComponentUpdate. В этом коде я построил 2 компонента React. Один является частью приветствия, а другой - компонентом приложения. Во время жизненного цикла рендеринга каждый компонент React представляет собой консоль, регистрирующую сообщение.

Javascript

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

Выход:

Имя файла - App.js: Затем в жизненном цикле componentDidMount React я добавлю состояние React и обновлю значение состояния.

Javascript

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

Выходные данные: в выходных данных можно увидеть, что жизненный цикл рендеринга запускался более одного раза как в приложении, так и в компонентах приветствия. Это связано с тем, что компонент приложения React был повторно отрисован после обновления значений состояния, а его дочерние компоненты также были повторно отрисованы. Мы должны предположить, что часть приветствия не изменилась и никогда не изменится.

Имя файла - 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 <h1>Geeksforgeeks</h1>;
  }
 }
 
class App extends React.Component {
  state = {
    greeted: false ,
  };
 
  componentDidMount() {
    this .setState({ greeted: true });
  }
 
  render() {
    console.log( "App - Render lifecycle" );
 
    return <Greeting />;
  }
 }
 
export App; default 

Результат: вы можете видеть, что приложение и компонент приветствия прошли цикл жизненного цикла отрисовки. После изменения значений состояния компонент приложения снова прошел жизненный цикл отрисовки. Но компонент приветствия не заносил в консоль сообщение о жизненном цикле визуализации.

Как устранить ошибку слишком большого количества повторных рендеров в ReactJS?

Javascript

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ