React 16.6: React.memo() для управление рендерингом функциональных компонентов

React 16.6: React.memo() для управление рендерингом функциональных компонентов

От автора: React 16.6.0 вышел! В нем появилось множество новых функций, включая две основных: React memo () и React.lazy(). Разделение кода и отложенная загрузка с помощью React Suspense. В этой статье мы рассмотрим React.memo(), а React.lazy() и Suspense в следующей крупной статье.

Что такое React.memo()?

React.memo() похож на PureComponent в том, что он помогает контролировать, когда наши компоненты будут перезагружаться.

Компоненты будут перезагружаться, только если их свойства изменились! Обычно все компоненты React в дереве проходят через рендеринг, когда были внесены изменения. С помощью PureComponent и React.memo() это можно делать только для некоторых компонентов.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Это повышение производительности, поскольку повторно отображается только то, что нужно. PureComponent работает с классами. React.memo() работает с функциональными компонентами.

Оборачивание существующего компонента

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

Простая демонстрация

Я попытался создать демо-версию, чтобы показать выполнение рендеринга, а также то, что рендеринг не произойдет, если компонент не изменился. К сожалению, React Developer Tools еще не полностью реализовали React.memo(). Если вы посмотрите на компонент, он показывает TODO_NOT_IMPLEMENTED_YET:

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

После обновления DevTools мы сможем увидеть, какие компоненты визуализируются. Мемоизованный компонент не должен запускать рендеринг, если его свойство не изменилось!

И вот демо-приложение:

имеет счетчик только для запуска рендеринга приложения

имеет элемент ввода для показа сообщений

имеет нормальную и мемоизированную версии компонента для отображения сообщений

Почему это называется memo?

Согласно Википедии: В вычислениях мемоизация — это метод оптимизации, используемый прежде всего для ускорения компьютерных программ путем хранения результатов ресурсоемких вызовов функций и возврата кэшированного результата при повторных вводах данных.

Это имеет смысл, поскольку это именно то, что делает React.memo()! Проверьте, будет ли предстоящий рендеринг отличаться от предыдущего. Если они совпадают, сохраните предыдущий.

Заключение

Это отличное дополнение к React, поскольку я всегда писал что-то в форме класса, чтобы воспользоваться преимуществами PureComponent. Теперь с помощью React.memo() у нас могут быть функциональные компоненты, и они отображаются, только если были внесены изменения!

Автор: Chris Sevilleja

Источник: //scotch.io/

Редакция: Команда webformyself.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте: