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

const ToTheMoonComponent = React.memo(function MyComponent(props) { // повторно отображается только если изменилось свойство
});

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

import React from 'react'; const MyScotchyComponent = React.memo(function MyComponent(props) { // отображается только, если изменилось свойство!
}); // может также быть функция стрелок es6
const OtherScotchy = React.memo(props => { return <div>my memoized component</div>;
}); // и даже еще короче с неявным возвращением
const ImplicitScotchy = React.memo(props => ( <div>implicit memoized component</div>
));

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

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

const RocketComponent = props => <div>my rocket component. {props.fuel}!</div>; // создаем версию, которая отображается, если изменилось свойство
const MemoizedRocketComponent = React.memo(RocketComponent);

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

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

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

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

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

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

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

Заключение

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

Автор: Chris Sevilleja

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

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