Форсированная перерисовка функционального компонента React

Быстрый ответ

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

import React, { useState } from 'react';

function ForceRenderComponent() {
  // Создаем переменную состояния для принудительного рендера
  const [, setTick] = useState(0);

  // Функция для вызова рендера обновляет состояние
  const forceUpdate = () => setTick(tick => tick + 1);

  return <button onClick={forceUpdate}>Обновить компонент</button>;
};

Вызывая функцию forceUpdate, мы инкрементируем состояние tick, что в свою очередь приводит к повторному рендеру со стороны React.

Путь джедая через UseState

"Igor, you could say "Мы иногда используем useState не для оперирования значение состояния, а в качестве способа пометить компонент на повторную отрисовку.

const [rerender, setRerender] = useState(false);
const forceUpdate = () => setRerender(!rerender);

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

Исследования силы React

Использование useReducer – шаг к прозрению

Расширение возможностей управления состоянием в React предлагает использование useReducer:

const [, forceUpdate] = useReducer(x => x + 1, 0);

Это напоминает this.forceUpdate() в классовых компонентах. Такое изменение состояния эквивалентно хорошо знакомому подходу в области React и работает эффективнее, чем безостановочное переключение булевых значений.

Подробнее об этом расскажет наш спикер на видео

React: Новая версия (без состояния)

Появление версии React 16.8, получившей название 'Hooks', открыло новые горизонты для функциональных компонентов, приравнив их по функциональности к классовым компонентам.

С великой силой…

Принудительный рендеринг в контексте React должен быть редким исключением, а не правилом. Частое использование forceUpdate может указывать на недостатки в структуре ваших компонентов. Важно следить за тем, чтобы архитектура ваших компонентов и поток данных были четкими и последовательными.

Случаи, когда стоит использовать 'Силу'

Иногда возникает необходимость в принудительной перерисовке. Вот примеры обоснованных сценариев:

Работа со сторонними библиотеками

В ряде случаев для взаимодействия со сторонними библиотеками или системами может понадобиться принудительный рендер.

Управление анимациями

При создании анимаций или переходов может возникнуть необходимость в немедленном обновлении DOM. В таком случае принудительный рендер может быть полезным.

Нужна срочная помощь?

Библиотека use-force-update предлагает готовый хук useForceUpdate для подобных случаев.

Визуализация

Представьте часы, которые возвращаются к исходному состоянию:

• Начальное состояние: [⚙️, 🕒, 🕓, 🕔]
• Механизм наводки: useState() или useReducer
• Ручное управление: forceUpdate()

При вызове forceUpdate, как и при заводке часов, происходит перерисовка компонентов.

Полезные материалы

1. API-справочник по хукам – React – руководство по использованию useState для перерисовки.
2. Часто задаваемые вопросы о хуках – React – ответы на вопросы по обновлению функциональных компонентов.
3. Оптимизируйте медленный рендер, прежде чем исправлять повторный рендер – советы по оптимизации процесса рендеринга.
4. Понимание свойства key в React – советы по принудительной перерисовке компонентов.
5. Быстрое обновление – React Native – функция hot reload.
6. Паттерны React – примеры работы с состоянием в React.
7. Только минуту... – советы с StackOverflow о принудительной перерисовке.