Когда мы создаем приложения в React, мы часто сталкиваемся с терминами рендеринг и повторный рендеринг компонентов. Хотя на первый взгляд это может показаться простым, все становится интереснее, когда задействуются различные системы управления состоянием, такие как useState, Redux, или когда мы вставляем перехватчики жизненного цикла, такие как useEffect. Если вы хотите, чтобы ваше приложение работало быстро и эффективно, понимание этих процессов является ключевым моментом.

Что такое рендеринг?

Рендеринг — это процесс, с помощью которого React отображает ваш пользовательский интерфейс (UI) на экране на основе состояния или реквизитов. Когда ваш компонент визуализируется в первый раз, это называется первым рендерингом.

Как работает первоначальный рендеринг?

Когда компонент впервые «монтируется» в DOM, происходит вот что:

1. Инициализация состояния:
Независимо от того, используете ли вы useState, props или Redux, создается начальное состояние компонента.

2. Функция рендеринга:
React просматривает код JSX и генерирует виртуальный DOM на основе текущего состояния.

3. Создает виртуальный DOM (Виртуальный DOM) для текущего состояния компонента.

4. Сравнение (различание):
Виртуальный DOM сравнивается с реальным DOM (поскольку это первый рендеринг, все элементы будут полностью визуализированы).

5. Показаны:
Компонент отображается на экране.
После рендеринга компонента следующей задачей является повторный рендеринг.

Ререндеринг: когда и почему?

Рендеринг происходит каждый раз, когда изменяется состояние или реквизит. Вы нажали кнопку, которая меняет число на экране? Изменено значение в магазине Redux? Все эти действия могут привести к тому, что React снова отрисует компонент, и именно здесь на помощь приходит повторный рендеринг.

Как работает ререндеринг?

Обнаружение изменения состояния:

• При использовании useState, когда вы вызываете setState, React знает, что ему необходимо обновить компонент.

• В Redux при изменении значения в хранилище каждый компонент, связанный с этой частью состояния, перерисовывается.

Триггер рендеринга:

Когда состояние меняется, React создает новый виртуальный DOM на основе этого изменения.

Сравнение (различие):

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

Просмотреть изменения:

• После расчета изменений React применяет их к фактическому DOM. Таким образом, снова отображаются только измененные части страницы.

Какие компоненты перерисовываются?

Не каждое изменение затрагивает все компоненты. React перерисовывает только те компоненты, которые:

Использовать местные штаты:
Если вы используете useState, компонент перерисовывается каждый раз, когда вызывается setState.

Использовать состояние Redux:
Если ваш компонент зависит от состояния Redux (через useSelector или Connect), он будет перерисован при изменении этой части состояния.

Используйте реквизит:
Если значение реквизита изменяется, компонент повторно отображается с новыми значениями.

Оптимизация рендеринга

Конечно, не всегда идеально без необходимости перерисовывать все компоненты. Если мы хотим, чтобы приложение работало быстро и эффективно, вот несколько приемов оптимизации:

1. Компоненты мемоизации
React предлагает функциональность для запоминания компонентов через React.memo. Если ваш компонент не зависит от реквизитов или изменений состояния, вы можете «запомнить» его, поэтому он будет повторно отображаться только при изменении соответствующих значений.

Пример:

const MemoizedComponent = React.memo(MyComponent);

2. Запоминание функций и значений

Чтобы избежать повторного создания функций или значений при каждом рендеринге, используйте useCallback для запоминания функций и useMemo для запоминания значений.

• useCallback позволяет запомнить функцию и предотвратить ее повторное создание до тех пор, пока не изменятся зависимости.

• useMemo запоминает результат функции, поэтому он не пересчитывается при каждом рендеринге.

Пример:

const increment = useCallback(() => {
  setCount(prevCount => prevCount   1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. Оптимизация Redux

Если вы используете Redux, вы можете дополнительно оптимизировать приложение с помощью запоминаемых селекторов, таких как повторный выбор. Это позволяет избежать повторного рендеринга компонентов, на которые не влияет изменение состояния.

Хуки жизненного цикла и рендеринг

В классических классах React мы использовали mustComponentUpdate, чтобы контролировать, когда компонент будет перерисовываться. В функциональных компонентах эту концепцию можно смоделировать с помощью useEffect и мемоизации.

Заключение

Рендеринг и повторный рендеринг имеют решающее значение для отображения пользовательского интерфейса в приложениях React, но правильное понимание и оптимизация этих процессов может иметь значение между медленным и сверхбыстрым приложением. Правильное использование мемоизации, useCallback, useMemo, а также осторожное обращение с Redux помогает избежать ненужного повторного рендеринга и обеспечить быстроту и отзывчивость наших приложений.

Пример кода: рендеринг и повторный рендеринг в действии
Вот пример компонента, который использует useState, Redux и мемоизацию для оптимизации рендеринга:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount   1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    

      
Count: {count}
      
Expensive Calculation: {expensiveCalculation}
      Increment
       dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      
    
  );
};

Как мы видим, здесь используется комбинация локального состояния, Redux, мемоизации и хука useEffect, чтобы сделать приложение максимально эффективным.