React остается самый популярный Фреймворк JavaScript. В этой статье представлены последние советы по максимально эффективному использованию фреймворка React, в том числе: функциональные компоненты и функция Suspense.

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

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

shouldComponentUpdate

При написании компонентов на основе классов вы можете переопределить shouldComponentUpdate() метод жизненного цикла. Цель этого метода – явно объявить, требует ли компонент повторного рендеринга. Повторюсь, рендеринг – это дорогостоящая часть жизненного цикла, когда обновляется фактическая DOM. React выполняет рендеринг только в том случае, если свойства или состояние компонента изменились, но иногда вы можете пропустить даже это, вообще избегая вызова рендеринга.

Подпись и действие shouldComponentUpdate это просто. В листинге 1 приведен базовый пример. Идея здесь в том, что вы знаете свой компонент и можете указать те условия, при которых он должен и не должен обновляться. Метод получает входящие реквизиты и состояние в качестве аргументов. Если метод возвращает значение true, компонент будет отображаться, в противном случае – нет.

Листинг 1. Пример shouldComponentUpdate ()

shouldComponentUpdate(nextProps, nextState) {
    if (this.props.significant !== nextProps.significant) {
      return true;
    }
    return false;
  }

В листинге 1 рассматривается свойство, но та же процедура применяется к состоянию. Мы проверяем, изменилось ли значение свойства или состояния, которое имеет значение, и возвращаем true, если это так. Это может быть более сложным, если задействованное состояние или реквизиты более сложны. Если это простое неглубокое сравнение значений, то вы можете положиться на следующий совет, используя PureComponent как ярлык.

PureComponent

Если вашему компоненту требуется только простое неглубокое сравнение свойств и состояний, чтобы определить, идти / не идти при принятии решения о рендеринге, вы можете расширить PureComponent базовый класс так: class MyComponent extends React.PureComponent. Это будет делать именно это: если не обнаружено изменений в состоянии и реквизитах через поверхностное сравнение тогда render() называться не будут.

Название PureComponent относится к отсутствию побочных эффектов в компоненте, т. е. он чист в отношении изменения его вывода только из-за изменений состояния или свойств.

useEffect

Предыдущие советы работают только для компонентов на основе классов. Чтобы добиться чего-то похожего с функциональными компонентами, вы можете использовать несколько функций функциональных компонентов: useEffect крючок и memo.

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

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

Листинг 2. Пример использования useEffect

const MyComponent = (props) => {
  useEffect(() => {
    console.info("Update Complete: " + props.significantVariable);
  }, [props.significantVariable]);
}

В листинге 2 говорится, что если props.significantVariable изменился, затем запустите код. Таким образом, вы можете избежать запуска эффекта, если он должен произойти только при изменении переменной.

Запоминание с React.memo

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

Чтобы имитировать поведение PureComponent относительно только реквизит, вы можете обернуть свой функциональный компонент, как показано в листинге 3. Это будет проверять изменения в свойствах, но не в состоянии. (Обратите внимание, что это отличается от PureComponent, который сравнивает свойства и состояние.) В листинге 3, если props.quote не изменился, то компонент не будет повторно визуализироваться.

Листинг 3. Пример React.memo (простое использование)

const MyComponent = (props) => {
  return <span>props.quote</span>
}
export default React.memo(SomeComponent)

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

export default React.memo(MyComponent, (oldProps, newProps) => {} );

Эта функция получает старые и новые реквизиты и позволяет вам сравнивать их так, как это имеет смысл для вашего варианта использования. Обратите внимание, что эта функция должна возвращать true если реквизит равен. Обратите внимание, что это обратное shouldComponentUpdate, который возвращает true если компонент должен обновиться.

Окно, также известное как виртуализация списка

Теперь давайте обратим наше внимание на технику, которая применима как к функциональным, так и к классовым компонентам: управление окнами. Если у вас есть большие наборы данных для отображения в списках (таблица или список с тысячами строк), вам следует обратить внимание на «оконную обработку» данных, то есть на загрузку и отображение только части данных за раз. Это предотвратит остановку работы пользовательского интерфейса при больших объемах данных.

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

Кеширование функций

Если у вас есть дорогостоящие вызовы функций, вам следует подумать о их кешировании. Это можно сделать в виде мемоизированного кеша (т. Е. Если аргументы совпадают, результат возвращается из кеша), но возможности кэширования определяются характеристиками функции. Бывают случаи, когда функции кэширования могут избежать вызовов выборки данных.

Ленивая загрузка с разделением кода

Еще один общий прием, который следует держать в запасе трюков, – это отложенная загрузка пакетов кода. Общая идея заключается в том, что вы загружаете данные только тогда, когда они становятся необходимыми. Представлен React 16.6 React.lazy(), что позволяет более идиоматично использовать разделение кода (то есть вы можете использовать обычный синтаксис компонентов и по-прежнему получать семантику отложенной загрузки).

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

Параллельный режим, Suspense и useDeferredValue

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

В добавок к Suspense компонент, который позволяет определять зоны выборки данных, React 16 предоставляет другие гениальные трюки, такие как useDeferredValue, который может улучшить работу таких вещей, как автоматическое предложение, избегая плохого взаимодействия с пользователем, такого как заикание текста.

Избавление от дребезга или дросселирование выборки данных

В большинстве случаев, когда вы использовали бы debounce или же throttle Функции лучше обрабатываются в параллельном режиме React, описанном выше. Если параллельный режим вам недоступен (потому что ваша кодовая база заблокирована для использования устаревшего движка рендеринга), вы можете использовать эти функции, чтобы избежать случаев, когда наивная стратегия вызовет чрезмерную болтовню при выборке данных.

Например, в случае получения данных, когда пользователь вводит текст, если вы просто запускаете запрос при каждом нажатии клавиши, вы столкнетесь с низкой производительностью. С использованием debounce или же throttle может помочь решить эту проблему. Но опять же, параллельный режим открывает улучшенные способы решения этих проблем.

Профилирование

Мы изучили множество конкретных методов повышения производительности приложения React. Теперь важно отметить, что профилирование вашего приложения имеет решающее значение как для понимания ваших узких мест, так и для проверки эффективности вносимых вами изменений.

Вы можете использовать встроенный профилировщик, который поставляется с такими браузерами, как Chrome и Firefox. Режим разработки React (если он включен) позволит вам видеть конкретные используемые компоненты при просмотре профилировщика. Это также полезно для изучения вкладки сети и выявления медленных внутренних вызовов. Эти области не могут быть напрямую исправлены вами в JavaScript, но, возможно, могут быть исправлены в серверной части.

Более новая версия React (16.5 и новее) предлагает DevTools Profiler который предлагает более подробные возможности и интегрируется с новыми функциями параллельного режима. DevTools Profiler предлагает множество способов нарезать и нарезать активность вашего приложения.

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

Реагировать на сборку

В заключение, при развертывании в производственной среде следует использовать производственную сборку. Действия для этого зависят от инструмента сборки, который вы используете. Например, шаги для создания приложения React здесь. Производственная сборка минифицирована и не содержит журналов разработки. То же самое касается вашего пользовательского кода: ведение журнала отладки должно быть отключено при развертывании в производственной среде.

Производительность – критический аспект веб-интерфейса, так как он напрямую влияет на взаимодействие с пользователем и то, как пользователи будут относиться к приложению. В этой статье представлен ряд конкретных методов и общих подходов к повышению производительности React UI.

Авторские права © 2021 IDG Communications, Inc.


#советов #по #настройке #производительности #React

Source link