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() это можно делать только для некоторых компонентов.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

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

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

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

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

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

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

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

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

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

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

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

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

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

Заключение

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

Автор: Chris Sevilleja

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

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

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

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree