Побочные эффекты в компонентах

Haunted — это лёгкая библиотека для создания веб-компонентов на базе стандартов Web Components и функционального подхода, вдохновлённого React Hooks. Один из ключевых аспектов при работе с Haunted — управление побочными эффектами, которые возникают при изменении состояния компонента или его жизненного цикла. Побочные эффекты могут включать работу с DOM напрямую, подписки на события, асинхронные операции и взаимодействие с внешними API. Для их корректного управления в Haunted используется хук useEffect.

Хук useEffect

useEffect позволяет выполнять код, который должен запускаться после рендера компонента или при изменении определённых зависимостей.

import { useEffect, html } from 'haunted';

function MyComponent({ count }) {
  useEffect(() => {
    console.log(`Текущее значение count: ${count}`);
  }, [count]);

  return html`<p>Count: ${count}</p>`;
}

Особенности useEffect:

  • Первый аргумент — функция, которая выполняет побочный эффект.
  • Второй аргумент — массив зависимостей. Эффект выполняется только если значение хотя бы одной зависимости изменилось.
  • Если массив зависимостей пуст ([]), эффект выполняется только один раз при монтировании компонента.
  • Если массив отсутствует, эффект выполняется каждый раз после рендера.

Очистка эффектов

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

function TimerComponent() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setSeconds(s => s + 1), 1000);

    return () => clearInterval(interval); // Очистка при размонтировании
  }, []);

  return html`<p>Прошло секунд: ${seconds}</p>`;
}

Правила использования функции очистки:

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

Множественные эффекты

В Haunted можно использовать несколько эффектов одновременно. Это особенно полезно, когда побочные эффекты различны по характеру:

function MultiEffectComponent({ count }) {
  useEffect(() => {
    console.log('Эффект только при монтировании');
  }, []);

  useEffect(() => {
    console.log(`Count изменился: ${count}`);
  }, [count]);

  return html`<p>Count: ${count}</p>`;
}

Каждый useEffect независим и имеет собственные зависимости, что упрощает управление сложными компонентами.

Асинхронные эффекты

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

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    let canceled = false;

    async function fetchData() {
      const response = await fetch(url);
      const result = await response.json();
      if (!canceled) setData(result);
    }

    fetchData();

    return () => { canceled = true; };
  }, [url]);

  return html`<pre>${JSON.stringify(data, null, 2)}</pre>`;
}

Ключевые моменты:

  • Использование локальной переменной canceled позволяет предотвратить обновление состояния после размонтирования компонента.
  • Любые подписки или асинхронные операции должны корректно завершаться или отменяться в функции очистки.

Побочные эффекты и производительность

Неправильное использование эффектов может приводить к лишним рендерам и замедлению работы компонентов. Рекомендации:

  • Указывать точные зависимости, чтобы эффект выполнялся только при необходимости.
  • Избегать создания эффектов без массива зависимостей, если это не требуется.
  • Разделять эффекты по функциональности, чтобы каждый отвечал за отдельную задачу.
  • Использовать функции очистки для освобождения ресурсов, особенно при подписках и таймерах.

Жизненный цикл компонента и эффекты

В Haunted жизненный цикл компонента напрямую связан с вызовом useEffect:

  • Монтирование: эффект с пустым массивом зависимостей выполняется один раз.
  • Обновление: эффект выполняется при изменении зависимостей.
  • Размонтирование: функция очистки выполняется, если она определена.

Это делает useEffect универсальным инструментом для управления состоянием вне рендера, синхронизации с внешними ресурсами и управления DOM напрямую.

Практические примеры побочных эффектов

  1. Слушатели событий DOM:
useEffect(() => {
  const onRes ize = () => console.log(window.innerWidth);
  window.addEventListener('resize', onResize);

  return () => window.removeEventListener('resize', onResize);
}, []);
  1. Подписка на веб-сокеты:
useEffect(() => {
  const ws = new WebSocket('wss://example.com/socket');
  ws.onmess age = e => console.log('Новое сообщение:', e.data);

  return () => ws.close();
}, []);
  1. Таймеры и анимации:
useEffect(() => {
  let frame;
  const animate = () => {
    console.log('Анимация кадра');
    frame = requestAnimationFrame(animate);
  };
  frame = requestAnimationFrame(animate);

  return () => cancelAnimationFrame(frame);
}, []);

Эффективное использование побочных эффектов в Haunted позволяет создавать реактивные, производительные и безопасные веб-компоненты, легко управлять внешними ресурсами и асинхронными процессами, минимизируя ошибки и утечки памяти.

Оглавление