Новости и обновления в Telegram
rutube
Полезные видео о фронтенде. Подпишись на Rutube

Методы оптимизации JavaScript для более быстрой загрузки веб-сайта. Подробное руководство

год назад·11 мин. на чтение

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

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

Минимизация размеров файлов

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

Пример кода JavaScript: до и после минификации

Давайте посмотрим на простой пример, чтобы понять влияние минификации на размер файла: Перед минификацией: 
// Функция вычисления суммы двух чисел
function addNumbers(num1, num2) {
    return num1 + num2;
}

// Вызов функции для вычисления суммы 3 и 5
const sum = addNumbers(3, 5);

// Вывод результата в консоль
console.log("The sum is:", sum);
После минификации: 
function addNumbers(n,e){return n+e}const sum=addNumbers(3,5);console.log("The sum is:",sum);
Как вы можете видеть, уменьшенная версия кода значительно меньше, с удаленными ненужными символами и сокращенными именами переменных. Это приводит к меньшему размеру файла и более быстрой загрузке, не влияя на функциональность кода.

Сжатие файлов

Сжатие — это еще один метод, используемый для уменьшения размера файлов, что приводит к сокращению времени загрузки веб-сайта. Он работает, применяя алгоритмы для сжатия данных в файлах, делая их меньше без потери их функциональности. Когда браузер запрашивает сжатый файл, он распаковывается на лету, что позволяет правильно отображать и выполнять содержимое. Существует два широко используемых алгоритма сжатия файлов JavaScript: Gzip и Brotli. Gzip долгое время был стандартом де-факто, но Brotli, новый алгоритм сжатия, разработанный Google, становится все более популярным благодаря превосходной степени сжатия и скорости.

Методы сжатия Gzip и Brotli

Gzip: Gzip — это широко распространенный алгоритм сжатия, который может значительно уменьшить размер файлов JavaScript. Gzip использует алгоритм Deflate, который сочетает в себе кодирование LZ77 и Huffman для эффективного сжатия данных. Brotli: Brotli — это более новый алгоритм сжатия, разработанный Google, обеспечивающий лучшую степень сжатия, чем Gzip. Brotli использует комбинацию LZ77, кодирования Хаффмана и новой техники моделирования контекста для достижения более высоких степеней сжатия. В большинстве случаев Brotli превосходит Gzip как по степени сжатия, так и по скорости, что делает его привлекательным вариантом для современных веб-приложений.

Конфигурация на стороне сервера для сжатия

Для обслуживания сжатых файлов JavaScript необходимо настроить сервер на сжатие файлов с помощью Gzip или Brotli перед их отправкой клиенту. Конкретные шаги настройки различаются в зависимости от типа вашего сервера (например, Apache, Nginx или Node.js). Вот краткий обзор того, как включить сжатие на популярных типах серверов:
  • Apache: Включите модуль mod_deflate для сжатия Gzip или mod_brotli для сжатия Brotli и настройте соответствующие параметры в файле .htaccess или конфигурации виртуального хоста.
  • Nginx: Используйте директивы gzip или brotli в конфигурационном файле Nginx, чтобы включить сжатие и указать настройки.
  • Node.js: Для серверов на базе Node.js вы можете использовать промежуточное программное обеспечение (middleware), такое как compression для Gzip или shrink-ray-current для Brotli в сочетании с Express или аналогичным веб-фреймворком.
Важно отметить, что некоторые браузеры могут не поддерживать сжатие Brotli, поэтому рекомендуется настроить сервер так, чтобы он возвращался к Gzip, когда Brotli не поддерживается. Это обеспечивает оптимальную совместимость и производительность во всех браузерах.

Бандлинг для сокращения сетевых запросов

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

Что такое бандлинг?

Бандлинг — это процесс объединения нескольких файлов JavaScript в один файл. Это уменьшает количество HTTP-запросов, которые необходимо сделать браузеру, тем самым ускоряя процесс загрузки. Объединение может значительно повысить производительность веб-сайта, особенно для веб-сайтов с большим количеством файлов JavaScript меньшего размера.

Инструменты для бандлинга

Существует несколько популярных инструментов для объединения файлов JavaScript, каждый из которых имеет свои уникальные функции и преимущества. Вот несколько широко используемых инструментов для комплектации:
  • Webpack: Webpack — это мощный и гибкий сборщик модулей, который не только объединяет файлы JavaScript, но и обрабатывает другие ресурсы, такие как css и изображения. Он имеет надежную экосистему плагинов, позволяющую расширять его функциональность по мере необходимости.
  • Rollup: Rollup — еще один популярный сборщик модулей JavaScript, ориентированный на простоту и производительность. Он особенно хорошо подходит для объединения библиотек и может выводить несколько форматов, включая модули CommonJS, AMD и ES.

Пример кода JavaScript: объединение нескольких файлов

Чтобы продемонстрировать процесс объединения, предположим, что у вас есть три отдельных файла JavaScript: 
// main.js
import { greet } from './greeting.js';
import { calculate } from './math.js';

console.log(greet('John'));
console.log(calculate(5, 3));
// greeting.js
export function greet(name) {
  return `Hello, ${name}!`;
}
// math.js
export function calculate(x, y) {
  return x * y;
}
Используя инструмент бандлинга, такой как Webpack или Rollup, вы можете объединить эти файлы в один связанный файл. Выходные данные могут выглядеть примерно так: 
(function () {
  'use strict';

  function greet(name) {
    return `Hello, ${name}!`;
  }

  function calculate(x, y) {
    return x * y;
  }

  console.log(greet('John'));
  console.log(calculate(5, 3));
})();
Как видите, результирующий файл содержит весь необходимый код из исходных файлов в одном автономном блоке, что сокращает количество сетевых запросов, необходимых для загрузки скриптов. Минимизируя количество запросов, вы можете сократить время, необходимое браузеру для загрузки и обработки необходимых ресурсов, что приведет к более быстрой загрузке и более отзывчивому взаимодействию с пользователем.

Использование спрайтов для изображений и иконок

Использование спрайтов изображений — еще один метод сокращения сетевых запросов и повышения производительности веб-сайта. Спрайты — это, по сути, один файл изображения, содержащий несколько изображений меньшего размера, таких как значки или элементы пользовательского интерфейса.

Что такое спрайт изображения

Спрайт изображения — это большое изображение, содержащее несколько изображений меньшего размера, расположенных в виде сетки. В коде CSS или JavaScript вы можете ссылаться на отдельные изображения в спрайте, указывая их положение и размеры. Этот метод позволяет загружать множество изображений с помощью всего одного HTTP-запроса, уменьшая задержку и сокращая время загрузки.

Создание спрайтов изображений

Для создания спрайта изображения можно использовать различные инструменты, такие как:
  • Инструменты генератора спрайтов: Онлайн-инструменты, такие как SpritePad или Stitches, позволяют загружать несколько изображений и автоматически генерировать спрайт вместе с соответствующим кодом CSS.
  • Программное обеспечение для редактирования изображений: такие программы, как Adobe Photoshop или GIMP, можно использовать для ручного создания спрайтов, упорядочивая меньшие изображения в новом файле и экспортируя результат в виде одного изображения.

Пример кода CSS: использование спрайтов изображений

Предположим, что есть изображение спрайта с именем icons.png, содержащее несколько значков. Вы можете использовать следующий CSS код для отображения отдельных значков в качестве фоновых изображений для разных элементов: 
.icon {
  width: 32px;
  height: 32px;
  background-image: url('icons.png');
}

.icon-search {
  background-position: 0 0;
}

.icon-settings {
  background-position: -32px 0;
}

.icon-user {
  background-position: -64px 0;
}
Каждый класс значков определяет положение соответствующей иконки внутри спрайта, что позволяет отобразить нужное изображение без дополнительных HTTP-запросов. Объединяя эти меньшие изображения в один файл, браузеру нужно запросить только одно изображение, уменьшая количество HTTP-запросов.

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

Ленивая загрузка — это метод, который откладывает загрузку некритических ресурсов до тех пор, пока они действительно не понадобятся. Это означает, что вместо того, чтобы загружать все ресурсы заранее, вы загружаете только те, которые необходимы для немедленного просмотра, в то время как остальные извлекаются по мере их актуальности. Отложенная загрузка может значительно улучшить начальное время загрузки и воспринимаемую производительность веб-сайта, особенно при работе с большими ресурсами, такими как изображения или длинные скрипты.

Пример кода JavaScript: реализация отложенной загрузки

Чтобы проиллюстрировать отложенную загрузку, давайте воспользуемся примером загрузки изображений только тогда, когда они становятся видимыми в окне просмотра. Это можно сделать с помощью API IntersectionObserver. Вот простая реализация: Во-первых, добавьте data-src к элементам изображения, содержащий фактический источник изображения: 
<img data-src="path/to/image.jpg" class="lazy-load" alt="An example image">
Затем создайте скрипт, который настраивает IntersectionObserver для загрузки изображений по мере их поступления в окно просмотра (viewport): 
document.addEventListener('DOMContentLoaded', function () {
  const lazyImages = [].slice.call(document.querySelectorAll('.lazy-load'));

  if ('IntersectionObserver' in window) {
    const lazyImageObserver = new IntersectionObserver(function (entries, observer) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          const lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove('lazy-load');
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function (lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});
В этом примере IntersectionObserver следит за тем, чтобы изображения .lazy-load попадали в окно просмотра. При обнаружении изображения атрибуту src присваивается атрибут data-src, что приводит к фактической загрузке изображения. После загрузки образа класс .lazy-load удаляется, и наблюдение за изображением останавливается (.unobserve()). Используя эту простую технику отложенной загрузки, вы можете гарантировать, что загружаются только те изображения, которые в данный момент находятся в поле зрения, уменьшая количество сетевых запросов и улучшая начальное время загрузки вашего веб-сайта.

Использование кэширования

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

Кэширование браузера

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

Заголовки Cache-Control и ETag

Двумя важными заголовками для управления кэшированием браузера являются Cache-Control и ETag. Заголовок Cache-Control позволяет задать директивы кэша, такие как максимальный срок службы ресурса в кэше или необходимость его повторной проверки. Например, можно использовать Cache-Control: public, max-age=3600, чтобы указать, что ресурс может кэшироваться в течение одного часа. Заголовок ETag предоставляет уникальный идентификатор (обычно хэш) для определенной версии ресурса. Когда браузер запрашивает ресурс, он отправляет значение ETag, которое находится в его кэше. Если значение ETag сервера совпадает со значением, отправленным браузером, сервер отвечает статусом 304 Not Modified, и браузер использует кэшированную версию. Этот механизм помогает гарантировать, что браузер всегда имеет самую последнюю версию ресурса.

Настройка кэширования на стороне сервера

Чтобы включить кэширование браузера, необходимо настроить сервер на доставку соответствующих заголовков для ресурсов. Этот процесс зависит от программного обеспечения сервера. Например, на сервере Apache вы можете использовать файл .htaccess для установки заголовков кэширования: 
<filesMatch ".(css|js|jpg|png)$">
  Header set Cache-Control "public, max-age=86400"
</filesMatch>
Эта конфигурация задает заголовок Cache-Control для файлов CSS, JS, JPG и PNG, что позволяет кэшировать их в течение 24 часов. Используя кэширование браузера, вы можете значительно сократить объем данных, которые необходимо извлекать при повторном посещении пользователем вашего сайта, ускоряя время загрузки и улучшая общий пользовательский опыт.

Использование асинхронной загрузки

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

Асинхронная загрузка файлов JavaScript

Асинхронная загрузка позволяет браузерам загружать и выполнять файлы JavaScript, не блокируя рендеринг остальной части страницы. Такой подход не только ускоряет первоначальный рендеринг вашего веб-сайта, но и снижает риск того, что медленный или не отвечающий скрипт вызовет задержки. С помощью атрибутов async и defer можно управлять загрузкой и выполнением файлов JavaScript.

Использование атрибутов Async и Defer

Атрибуты async и defer можно добавить в тег <script>, чтобы включить асинхронную загрузку:
  • async: атрибут async указывает браузеру загрузить сценарий, не блокируя рендеринг. Как только скрипт будет загружен, браузер приостановит рендеринг для его выполнения. Это полезно для скриптов, которые не полагаются на другие скрипты или полную загрузку модели DOM.
  • defer: атрибут defer предписывает браузеру загрузить скрипт, не блокируя рендеринг, но откладывает выполнение до тех пор, пока модель DOM не будет полностью проанализирована. Это полезно для скриптов, зависящих от модели DOM или других скриптов.
Важно отметить, что эти атрибуты следует использовать только с внешними файлами скриптов, так как они не влияют на встроенные скрипты.

Пример кода JavaScript: использование async и defer

Рассмотрим пример использования атрибутов async и defer в HTML-файле: 
<!DOCTYPE html>
<html>
<head>
  <!-- Использование атрибута defer -->
  <script src="main.js" defer></script>
</head>
<body>
  <!-- Использование атрибута async -->
  <script src="analytics.js" async></script>
</body>
</html>
В этом примере main.js загружается с атрибутом defer, гарантируя, что он не будет блокировать рендеринг и будет выполнен после полного анализа DOM. Между тем, analytics.js загружается с атрибутом async, что позволяет ему загружаться и выполняться независимо от остальной части страницы. Используя асинхронную загрузку файлов JavaScript, вы можете свести к минимуму ресурсы, блокирующие рендеринг, и повысить производительность и удобство работы вашего веб-сайта.

Использование лучших практик для более быстрой загрузки и улучшения UX

Оптимизация веб-сайта — это непрерывный процесс, и для максимальной производительности важно идти в ногу с последними передовыми методами.

Разделение кода

Разделение кода — это метод, который включает в себя разбиение кода JavaScript на более мелкие, более управляемые фрагменты, которые загружаются только при необходимости. Это уменьшает объем кода, который необходимо загрузить и проанализировать, что приводит к более быстрой начальной загрузке и более плавному взаимодействию. Разделение кода особенно полезно для одностраничных приложений (SPA) и больших веб-сайтов со сложной функциональностью. Несколько инструментов могут помочь вам реализовать разделение кода, например Webpack и React.lazy:
  • Webpack: Этот популярный сборщик предлагает встроенную поддержку разделения кода. Используя функцию динамического импорта import(), вы можете загружать модули JavaScript по запросу, сокращая время первоначальной загрузки.
  • React.lazy: Если вы используете React, функция React.lazy позволяет загружать компоненты лениво по мере необходимости, что еще больше оптимизирует ваше приложение.

Пример кода JavaScript: реализация разделения кода

Ниже приведен пример разделения кода с помощью Webpack и React: 
import React, { lazy, Suspense } from 'react';

// Ленивая загрузка компонента с React.lazy
const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

export default App;
В этом примере MyComponent загружается лениво, когда это необходимо, что не позволяет блокировать начальную отрисовку приложения.

Использование сетей доставки контента (CDN)

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

Оптимизация манипулирования DOM и обработки событий

Эффективное манипулирование DOM имеет решающее значение для повышения производительности веб-сайта. Модель DOM (Document Object Model) представляет структуру веб-страницы, и управление ею может быть ресурсоемким. Оптимизируя код JavaScript для работы с DOM, вы можете свести к минимуму влияние на производительность и создать более плавный пользовательский интерфейс.

Пример кода JavaScript: эффективное манипулирование DOM

Ниже приведен пример оптимизации манипуляций с DOM: 
// Неэффективная работа с DOM
const list = document.querySelector('#list');

for (let i = 0; i < 1000; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  list.appendChild(item);
}
// Эффективная работа с DOM
const list = document.querySelector('#list');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  fragment.appendChild(item);
}

list.appendChild(fragment);
В эффективном примере мы используем DocumentFragment для пакетных операций DOM, уменьшая количество перекомпоновок и перерисовок и повышая производительность.

Инструменты разработчика браузера

Большинство современных браузеров поставляются со встроенными инструментами разработчика, которые помогут вам отслеживать и оптимизировать производительность вашего веб-сайта. Например, Chrome DevTools и Firefox Developer Tools предлагают такие функции, как профилирование производительности, мониторинг сети и отладка JavaScript. С помощью этих средств можно выявить узкие места и области, требующие улучшения в коде.

Онлайн-инструменты

Существуют также онлайн-инструменты, которые помогут вам проанализировать и оптимизировать производительность вашего сайта. Некоторые популярные варианты включают в себя:
  • Google PageSpeed Insights: Этот инструмент анализирует ваш веб-сайт и предоставляет предложения по повышению его производительности. Он учитывает такие факторы, как время отклика сервера, оптимизация изображений и методы загрузки JavaScript.
  • WebPageTest: WebPageTest — это комплексный инструмент тестирования производительности, который предоставляет подробную информацию о времени загрузки вашего веб-сайта, рендеринге и многом другом. Вы также можете сравнить производительность своего веб-сайта с другими сайтами или запустить тесты из разных мест и устройств.
Оставаясь в курсе последних лучших практик и отслеживая показатели производительности вашего веб-сайта, вы можете быть уверены, что ваш сайт останется быстрым, эффективным и удобным для пользователя.

Итоги

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

Какую структуру состояния React выбрать

год назад·12 мин. на чтение

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

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

Принципы структурирования состояния

Когда вы пишете компонент, который содержит какое-то состояние, вам придется выбирать, сколько переменных состояния использовать и какой должна быть форма их данных. Хотя можно писать правильные программы даже с неоптимальной структурой состояний, есть несколько принципов, которые помогут вам сделать правильный выбор:
  1. Состояние, связанное с группой. Если вы всегда одновременно обновляете две или более переменных состояния, рассмотрите возможность их объединения в одну переменную состояния.
  2. Избегайте противоречий в состоянии. Когда состояние структурировано таким образом, что несколько частей состояния могут противоречить и «не согласовываться» друг с другом, вы оставляете место для ошибок. Постарайтесь избежать этого.
  3. Избегайте избыточного состояния. Если вы можете вычислить некоторую информацию из пропсов компонента или его существующих переменных состояния во время рендеринга, вы не должны помещать эту информацию в состояние этого компонента.
  4. Избегайте дублирования состояния. Когда одни и те же данные дублируются между несколькими переменными состояния или внутри вложенных объектов, их сложно синхронизировать. Уменьшайте дублирование, если возможно.
  5. Избегайте глубоко вложенных состояний. Глубоко иерархическое состояние не очень удобно обновлять. По возможности предпочтительнее структурировать состояние в плоском виде.
Цель этих принципов — упростить обновление состояния без внесения ошибок. Удаление избыточных и повторяющихся данных из состояния помогает обеспечить синхронизацию всех его частей. Это похоже на то, как инженер базы данных может захотеть «нормализовать» структуру базы данных, чтобы уменьшить вероятность ошибок. Теперь давайте посмотрим, как эти принципы применяются в действии.

Состояние, связанное с группой

Иногда вы можете быть не уверены, использовать одну или несколько переменных состояния. Должны ли вы это сделать так? 
const [x, setX] = useState(0);
const [y, setY] = useState(0);
Или так? 
const [position, setPosition] = useState({ x: 0, y: 0 });
Технически вы можете использовать любой из этих подходов. Но если какие-то две переменные состояния всегда изменяются вместе, было бы неплохо объединить их в одну переменную состояния. Тогда вы не забудете всегда синхронизировать их, как в этом примере, где перемещение курсора обновляет обе координаты красной точки: 
import { useState } from 'react';

export default function MovingDot() {
  const [position, setPosition] = useState({
    x: 0,
    y: 0,
  });
  return (
    <div
      onPointerMove={(e) => {
        setPosition({
          x: e.clientX,
          y: e.clientY,
        });
      }}
      style={{
        position: 'relative',
        width: '100vw',
        height: '100vh',
      }}
    >
      <div
        style={{
          position: 'absolute',
          backgroundColor: 'red',
          borderRadius: '50%',
          transform: `translate(${position.x}px, ${position.y}px)`,
          left: -10,
          top: -10,
          width: 20,
          height: 20,
        }}
      />
    </div>
  );
}
 Другой случай, когда вы будете группировать данные в объект или массив, — это когда вы не знаете, сколько различных частей состояния вам понадобится. Например, когда у вас есть форма, в которой пользователь может добавлять настраиваемые поля. Если ваша переменная состояния является объектом, помните, что вы не можете обновить в ней только одно поле без явного копирования других полей. Например, вы не можете использовать setPosition({ x: 100 }) в приведенном выше примере, потому что у него вообще не будет свойства y. Вместо этого, если вы хотите установить только x, вы должны либо выполнить setPosition({ ...position, x: 100}), либо разделить их на две переменные состояния и выполнить setX(100).

Избегайте противоречий в состоянии

Вот форма обратной связи отеля с переменными состояния isSending и isSent: 
import { useState } from 'react';

export default function FeedbackForm() {
  const [text, setText] = useState('');
  const [isSending, setIsSending] = useState(false);
  const [isSent, setIsSent] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    setIsSending(true);
    await sendMessage(text);
    setIsSending(false);
    setIsSent(true);
  }

  if (isSent) {
    return <h1>Thanks for feedback!</h1>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <p>How was your stay at The Prancing Pony?</p>
      <textarea
        disabled={isSending}
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <br />
      <button disabled={isSending} type="submit">
        Send
      </button>
      {isSending && <p>Sending...</p>}
    </form>
  );
}

// Имитация отправки сообщения.
function sendMessage(text) {
  return new Promise((resolve) => {
    setTimeout(resolve, 2000);
  });
}
 Хотя этот код работает, в нем могут возникнуть «невозможные» состояний. Например, если вы забудете вызвать setIsSent и setIsSending вместе, вы можете оказаться в ситуации, когда и isSending, и isSent одновременно имеют значение true. Чем сложнее ваш компонент, тем сложнее будет понять, что произошло. Поскольку isSending и isSent никогда не должны принимать значение true одновременно, лучше заменить их одной переменной состояния, которая может принимать одно из трех допустимых состояний: «ввод» (typing), «отправка» (sending) и «отправлено» (sent): 
import { useState } from 'react';

export default function FeedbackForm() {
  const [text, setText] = useState('');
  const [status, setStatus] = useState('typing');

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    await sendMessage(text);
    setStatus('sent');
  }

  const isSending = status === 'sending';
  const isSent = status === 'sent';

  if (isSent) {
    return <h1>Thanks for feedback!</h1>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <p>How was your stay at The Prancing Pony?</p>
      <textarea
        disabled={isSending}
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <br />
      <button disabled={isSending} type="submit">
        Send
      </button>
      {isSending && <p>Sending...</p>}
    </form>
  );
}

// Имитация отправки сообщения.
function sendMessage(text) {
  return new Promise((resolve) => {
    setTimeout(resolve, 2000);
  });
}
Вы также можете объявить некоторые константы для удобства чтения: 
const isSending = status === 'sending';
const isSent = status === 'sent';
Но они не являются переменными состояния, поэтому вам не нужно беспокоиться об их рассинхронизации друг с другом.

Избегайте избыточного состояния

Если вы можете вычислить некоторую информацию из пропсов компонента или его существующих переменных состояния во время рендеринга, вы не должны помещать эту информацию в состояние этого компонента. Например, рассмотрим такую форму. Он работает, но можете ли вы найти в нем какое-либо избыточное состояние? 
import { useState } from 'react';

export default function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [fullName, setFullName] = useState('');

  function handleFirstNameChange(e) {
    setFirstName(e.target.value);
    setFullName(e.target.value + ' ' + lastName);
  }

  function handleLastNameChange(e) {
    setLastName(e.target.value);
    setFullName(firstName + ' ' + e.target.value);
  }

  return (
    <>
      <h2>Let’s check you in</h2>
      <label>
        First name: <input value={firstName} onChange={handleFirstNameChange} />
      </label>
      <label>
        Last name: <input value={lastName} onChange={handleLastNameChange} />
      </label>
      <p>
        Your ticket will be issued to: <b>{fullName}</b>
      </p>
    </>
  );
}
 Эта форма имеет три переменные состояния: firstName, lastName и fullName. Однако fullName является избыточным. Вы всегда можете вычислить fullName из firstName и lastName во время рендеринга, поэтому удалите его из состояния. Вот как вы можете это сделать: 
import { useState } from 'react';

export default function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const fullName = firstName + ' ' + lastName;

  function handleFirstNameChange(e) {
    setFirstName(e.target.value);
  }

  function handleLastNameChange(e) {
    setLastName(e.target.value);
  }

  return (
    <>
      <h2>Let’s check you in</h2>
      <label>
        First name: <input value={firstName} onChange={handleFirstNameChange} />
      </label>
      <label>
        Last name: <input value={lastName} onChange={handleLastNameChange} />
      </label>
      <p>
        Your ticket will be issued to: <b>{fullName}</b>
      </p>
    </>
  );
}
Здесь fullName не является переменной состояния. Вместо этого он вычисляется во время рендеринга: 
const fullName = firstName + ' ' + lastName;
В результате обработчикам изменений не нужно делать ничего особенного для его обновления. Когда вы вызываете setFirstName или setLastName, вы запускаете повторный рендеринг, а затем следующее значение fullName будет вычислено из свежих данных.

Не отзеркаливайте пропсы в состоянии

Типичным примером избыточного состояния является такой код: 
function Message({ messageColor }) {
  const [color, setColor] = useState(messageColor);
Здесь переменная состояния color инициализируется пропсом messageColor. Проблема в том, что если родительский компонент позже передаст другое значение messageColor (например, «красный» вместо «синий»), переменная состояния цвета не будет обновлена. Состояние инициализируется только во время первого рендеринга. Вот почему «отзеркаливание» некоторых пропсов в переменной состояния может привести к путанице. Вместо этого используйте проп messageColor непосредственно в коде. Если вы хотите дать ему более короткое имя, используйте константу: 
function Message({ messageColor }) {
  const color = messageColor;
Таким образом, он не будет рассинхронизирован с пропсом, переданным от родительского компонента. «Зеркалирование» пропсов в состояние имеет смысл только в том случае, если вы хотите игнорировать все обновления для определенного пропса. По соглашению начинайте имя пропса с initial или default, чтобы уточнить, что его новые значения игнорируются: 
function Message({ initialColor }) {
  // Переменная состояния `color` содержит начальное значение `initialColor`.
  // Последующие изменения пропса `initialColor` игнорируются.
  const [color, setColor] = useState(initialColor);

Избегайте дублирования состояния

Этот компонент меню позволяет выбрать один перекус из нескольких: 
import { useState } from 'react';

const initialItems = [
  { title: 'pretzels', id: 0 },
  { title: 'crispy seaweed', id: 1 },
  { title: 'granola bar', id: 2 },
];

export default function Menu() {
  const [items, setItems] = useState(initialItems);
  const [selectedItem, setSelectedItem] = useState(items[0]);

  return (
    <>
      <h2>What's your travel snack?</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.title}{' '}
            <button
              onClick={() => {
                setSelectedItem(item);
              }}
            >
              Choose
            </button>
          </li>
        ))}
      </ul>
      <p>You picked {selectedItem.title}.</p>
    </>
  );
}
 В настоящее время он сохраняет выбранный элемент как объект в переменной состояния selectedItem. Однако это не очень хорошо: содержимое selectedItem — это тот же объект, что и один из элементов в списке элементов. Это означает, что информация о самом предмете дублируется в двух местах. Почему это проблема? Давайте сделаем каждый элемент редактируемым: 
import { useState } from 'react';

const initialItems = [
  { title: 'pretzels', id: 0 },
  { title: 'crispy seaweed', id: 1 },
  { title: 'granola bar', id: 2 },
];

export default function Menu() {
  const [items, setItems] = useState(initialItems);
  const [selectedItem, setSelectedItem] = useState(items[0]);

  function handleItemChange(id, e) {
    setItems(
      items.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            title: e.target.value,
          };
        } else {
          return item;
        }
      })
    );
  }

  return (
    <>
      <h2>What's your travel snack?</h2>
      <ul>
        {items.map((item, index) => (
          <li key={item.id}>
            <input
              value={item.title}
              onChange={(e) => {
                handleItemChange(item.id, e);
              }}
            />{' '}
            <button
              onClick={() => {
                setSelectedItem(item);
              }}
            >
              Choose
            </button>
          </li>
        ))}
      </ul>
      <p>You picked {selectedItem.title}.</p>
    </>
  );
}
 Обратите внимание, что если вы сначала нажмете «Выбрать» на элементе, а затем отредактируете его, ввод обновится, но метка внизу не отразит изменения. Это потому, что вы дублировали состояние и забыли обновить selectedItem. Хотя вы также можете обновить selectedItem, более простое решение — удалить дублирование. В этом примере вместо объекта selectedItem (который создает дублирование объектов внутри элементов) вы сохраняете selectedId в состоянии, а затем получаете selectedItem путем поиска в массиве элементов элемента с этим идентификатором: 
import { useState } from 'react';

const initialItems = [
  { title: 'pretzels', id: 0 },
  { title: 'crispy seaweed', id: 1 },
  { title: 'granola bar', id: 2 },
];

export default function Menu() {
  const [items, setItems] = useState(initialItems);
  const [selectedId, setSelectedId] = useState(0);

  const selectedItem = items.find((item) => item.id === selectedId);

  function handleItemChange(id, e) {
    setItems(
      items.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            title: e.target.value,
          };
        } else {
          return item;
        }
      })
    );
  }

  return (
    <>
      <h2>What's your travel snack?</h2>
      <ul>
        {items.map((item, index) => (
          <li key={item.id}>
            <input
              value={item.title}
              onChange={(e) => {
                handleItemChange(item.id, e);
              }}
            />{' '}
            <button
              onClick={() => {
                setSelectedId(item.id);
              }}
            >
              Choose
            </button>
          </li>
        ))}
      </ul>
      <p>You picked {selectedItem.title}.</p>
    </>
  );
}
 В качестве альтернативы вы можете хранить выбранный индекс в состоянии. Раньше состояние дублировалось так:
  • items = [{ id: 0, title: 'pretzels'}, ...]
  • selectedItem = {id: 0, title: 'pretzels'}
А вот после замены состояние выглядит так:
  • items = [{ id: 0, title: 'pretzels'}, ...]
  • selectedId = 0
Дублирование исчезло, и вы сохранили только основное состояние. Теперь, если вы отредактируете выбранный элемент, сообщение ниже будет немедленно обновлено. Это связано с тем, что setItems вызывает повторный рендеринг, а items.find(...) найдет элемент с обновленным заголовком. Вам не нужно было удерживать выбранный элемент в состоянии, потому что важен только выбранный идентификатор. Остальное можно рассчитать во время рендера.

Избегайте глубоко вложенных состояний

Представьте план путешествия, состоящий из планет, континентов и стран. У вас может возникнуть соблазн структурировать его состояние с помощью вложенных объектов и массивов, как в этом примере: 
// App.jsx

import { useState } from 'react';
import { initialTravelPlan } from './places.js';

function PlaceTree({ place }) {
  const childPlaces = place.childPlaces;
  return (
    <li>
      {place.title}
      {childPlaces.length > 0 && (
        <ol>
          {childPlaces.map((place) => (
            <PlaceTree key={place.id} place={place} />
          ))}
        </ol>
      )}
    </li>
  );
}

export default function TravelPlan() {
  const [plan, setPlan] = useState(initialTravelPlan);
  const planets = plan.childPlaces;
  return (
    <>
      <h2>Places to visit</h2>
      <ol>
        {planets.map((place) => (
          <PlaceTree key={place.id} place={place} />
        ))}
      </ol>
    </>
  );
}
 
// places.js

export const initialTravelPlan = {
  id: 0,
  title: '(Root)',
  childPlaces: [
    {
      id: 1,
      title: 'Earth',
      childPlaces: [
        {
          id: 2,
          title: 'Africa',
          childPlaces: [
            {
              id: 3,
              title: 'Botswana',
              childPlaces: [],
            },
            {
              id: 4,
              title: 'Egypt',
              childPlaces: [],
            },
          ],
        },
        {
          id: 5,
          title: 'Asia',
          childPlaces: [
            {
              id: 6,
              title: 'China',
              childPlaces: [],
            },
            {
              id: 7,
              title: 'Hong Kong',
              childPlaces: [],
            },
          ],
        },
      ],
    },
    {
      id: 8,
      title: 'Mars',
      childPlaces: [
        {
          id: 9,
          title: 'Corn Town',
          childPlaces: [],
        },
        {
          id: 10,
          title: 'Green Hill',
          childPlaces: [],
        },
      ],
    },
  ],
};
 Теперь предположим, что вы хотите добавить кнопку для удаления места, которое вы уже посетили. Как бы вы это сделали? Обновление вложенного состояния включает в себя создание копий объектов от той части, которая была изменена. Удаление глубоко вложенного места потребует копирования всей его родительской цепочки мест. Такой код может быть очень многословным. Если состояние слишком вложенное, чтобы его можно было легко обновить, подумайте о том, чтобы сделать его «плоским». Вот один из способов реструктуризации этих данных. Вместо древовидной структуры, в которой каждое место имеет массив своих дочерних мест, вы можете сделать так, чтобы каждое место содержало массив идентификаторов своих дочерних мест. Затем вы можете сохранить сопоставление каждого идентификатора места с соответствующим местом. Эта реструктуризация данных может напомнить вам таблицу базы данных: 
// App.jsx

import { useState } from 'react';
import { initialTravelPlan } from './places.js';

function PlaceTree({ id, placesById }) {
  const place = placesById[id];
  const childIds = place.childIds;
  return (
    <li>
      {place.title}
      {childIds.length > 0 && (
        <ol>
          {childIds.map((childId) => (
            <PlaceTree key={childId} id={childId} placesById={placesById} />
          ))}
        </ol>
      )}
    </li>
  );
}

export default function TravelPlan() {
  const [plan, setPlan] = useState(initialTravelPlan);
  const root = plan[0];
  const planetIds = root.childIds;
  return (
    <>
      <h2>Places to visit</h2>
      <ol>
        {planetIds.map((id) => (
          <PlaceTree key={id} id={id} placesById={plan} />
        ))}
      </ol>
    </>
  );
}
 
// places.js

export const initialTravelPlan = {
  0: {
    id: 0,
    title: '(Root)',
    childIds: [1, 8],
  },
  1: {
    id: 1,
    title: 'Earth',
    childIds: [2, 5],
  },
  2: {
    id: 2,
    title: 'Africa',
    childIds: [3, 4],
  },
  3: {
    id: 3,
    title: 'Botswana',
    childIds: [],
  },
  4: {
    id: 4,
    title: 'Egypt',
    childIds: [],
  },
  5: {
    id: 5,
    title: 'Asia',
    childIds: [6, 7],
  },
  6: {
    id: 6,
    title: 'China',
    childIds: [],
  },
  7: {
    id: 7,
    title: 'Hong Kong',
    childIds: [],
  },
  8: {
    id: 8,
    title: 'Mars',
    childIds: [9, 10],
  },
  9: {
    id: 9,
    title: 'Corn Town',
    childIds: [],
  },
  10: {
    id: 10,
    title: 'Green Hill',
    childIds: [],
  },
};
 Теперь, когда состояние «плоское» (также известное как «нормализованное»), обновление вложенных элементов становится проще. Чтобы удалить место сейчас, вам нужно всего лишь обновить два уровня состояния:
  • Обновленная версия родительского места должна исключить удаленный идентификатор из массива childIds.
  • Обновленная версия корневого объекта должна включать обновленную версию родительского места.
Вот пример того, как вы можете это сделать: 
// App.jsx

import { useState } from 'react';
import { initialTravelPlan } from './places.js';

export default function TravelPlan() {
  const [plan, setPlan] = useState(initialTravelPlan);

  function handleComplete(parentId, childId) {
    const parent = plan[parentId];
    // Создаем новую версию родительского места,
    // которая не включает этот дочерний ID.
    const nextParent = {
      ...parent,
      childIds: parent.childIds.filter((id) => id !== childId),
    };
    // Обновляем состояние корневого объекта...
    setPlan({
      ...plan,
      // ...чтобы он содержал обновленный объект родителя.
      [parentId]: nextParent,
    });
  }

  const root = plan[0];
  const planetIds = root.childIds;
  return (
    <>
      <h2>Places to visit</h2>
      <ol>
        {planetIds.map((id) => (
          <PlaceTree
            key={id}
            id={id}
            parentId={0}
            placesById={plan}
            onComplete={handleComplete}
          />
        ))}
      </ol>
    </>
  );
}

function PlaceTree({ id, parentId, placesById, onComplete }) {
  const place = placesById[id];
  const childIds = place.childIds;
  return (
    <li>
      {place.title}
      <button
        onClick={() => {
          onComplete(parentId, id);
        }}
      >
        Complete
      </button>
      {childIds.length > 0 && (
        <ol>
          {childIds.map((childId) => (
            <PlaceTree
              key={childId}
              id={childId}
              parentId={id}
              placesById={placesById}
              onComplete={onComplete}
            />
          ))}
        </ol>
      )}
    </li>
  );
}
Вы можете сколько угодно вкладывать состояния, но если сделать их «плоскими», это может решить множество проблем. Это упрощает обновление состояния и помогает избежать дублирования в разных частях вложенного объекта.

Улучшение использования памяти

В идеале вы также должны удалить удаленные элементы (и их дочерние элементы) из объекта-таблицы, чтобы оптимизировать использование памяти. Реализация ниже содержит эту логику. Он также использует Immer, чтобы сделать логику обновления более лаконичной. 
import { useImmer } from 'use-immer';
import { initialTravelPlan } from './places.js';

export default function TravelPlan() {
  const [plan, updatePlan] = useImmer(initialTravelPlan);

  function handleComplete(parentId, childId) {
    updatePlan((draft) => {
      // Удлаим дочерние ID из родительского `place`.
      const parent = draft[parentId];
      parent.childIds = parent.childIds.filter((id) => id !== childId);

      // Удалим это место и все его поддерево.
      deleteAllChildren(childId);
      function deleteAllChildren(id) {
        const place = draft[id];
        place.childIds.forEach(deleteAllChildren);
        delete draft[id];
      }
    });
  }

  const root = plan[0];
  const planetIds = root.childIds;
  return (
    <>
      <h2>Places to visit</h2>
      <ol>
        {planetIds.map((id) => (
          <PlaceTree
            key={id}
            id={id}
            parentId={0}
            placesById={plan}
            onComplete={handleComplete}
          />
        ))}
      </ol>
    </>
  );
}

function PlaceTree({ id, parentId, placesById, onComplete }) {
  const place = placesById[id];
  const childIds = place.childIds;
  return (
    <li>
      {place.title}
      <button
        onClick={() => {
          onComplete(parentId, id);
        }}
      >
        Complete
      </button>
      {childIds.length > 0 && (
        <ol>
          {childIds.map((childId) => (
            <PlaceTree
              key={childId}
              id={childId}
              parentId={id}
              placesById={placesById}
              onComplete={onComplete}
            />
          ))}
        </ol>
      )}
    </li>
  );
}
 Иногда вы также можете уменьшить вложенность состояний, переместив часть вложенных состояний в дочерние компоненты. Это хорошо работает для временного состояния пользовательского интерфейса, которое не нужно сохранять, например, наведен ли элемент.

Резюме

  • Если две переменные состояния всегда обновляются вместе, рассмотрите возможность их объединения в одну.
  • Тщательно выбирайте переменные состояния, чтобы избежать создания «невозможных» состояний.
  • Структурируйте свое состояние таким образом, чтобы уменьшить вероятность того, что вы совершите ошибку при его обновлении.
  • Избегайте избыточного и дублирующего состояния, чтобы вам не нужно было синхронизировать его.
  • Не помещайте пропсы в состояние, если вы специально не хотите предотвратить обновления.
  • Для шаблонов пользовательского интерфейса, таких как выбор, сохраняйте в состоянии не сам объект, а его идентификатор или индекс.
  • Если обновление глубоко вложенного состояния затруднено, попробуйте сделать его плоским.
FrontendReactТуториал по React
logo

itdevjournal