Кэширование данных

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

Атрибуты и свойства компонентов

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

import { Component, h, prop } from 'skatejs';

class UserProfile extends Component {
  static props = {
    userId: prop.number(),
    userData: prop.object()
  };

  render() {
    return h('div', {}, this.userData ? `${this.userData.name}` : 'Загрузка...');
  }
}

customElements.define('user-profile', UserProfile);

Свойство userData может содержать кэшированные данные, полученные с сервера. SkateJS автоматически вызывает render при изменении свойства, что упрощает реактивное обновление интерфейса.

Хранение кэша в компоненте

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

class UserProfile extends Component {
  static props = {
    userId: prop.number()
  };

  _cache = {};

  async connectedCallback() {
    super.connectedCallback();
    await this.fetchUser(this.userId);
  }

  async fetchUser(id) {
    if (this._cache[id]) {
      this.userData = this._cache[id];
      return;
    }
    const response = await fetch(`/api/users/${id}`);
    const data = await response.json();
    this._cache[id] = data;
    this.userData = data;
  }
}

Здесь _cache выступает в роли механизма памяти для уже загруженных данных, предотвращая повторные запросы при смене идентификатора пользователя.

Кэширование с использованием глобального состояния

Для компонентов, которые используют одни и те же данные на разных уровнях приложения, рекомендуется хранить кэш в глобальном объекте или сервисе:

const userCache = {};

export async function getUser(id) {
  if (userCache[id]) return userCache[id];
  const response = await fetch(`/api/users/${id}`);
  const data = await response.json();
  userCache[id] = data;
  return data;
}

Компоненты могут использовать эту функцию вместо прямого запроса к API:

class UserProfile extends Component {
  static props = { userId: prop.number(), userData: prop.object() };

  async connectedCallback() {
    super.connectedCallback();
    this.userData = await getUser(this.userId);
  }
}

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

Мемоизация методов внутри компонентов

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

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

class ExpensiveComponent extends Component {
  static props = { input: prop.string(), result: prop.number() };

  expensiveCalculation = memoize((value) => {
    // Сложная операция
    return value.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  });

  render() {
    return h('div', {}, this.expensiveCalculation(this.input));
  }
}

Мемоизация позволяет значительно ускорять повторные вычисления без изменения архитектуры компонента.

Учет жизненного цикла компонентов

SkateJS предоставляет хуки жизненного цикла: connectedCallback, disconnectedCallback, updated. Для кэширования данных важно учитывать момент очистки или обновления кэша:

  • В connectedCallback — загрузка и установка кэша.
  • В updated — реакция на изменения входных свойств и обновление кэша при необходимости.
  • В disconnectedCallback — освобождение ресурсов, если кэш хранится локально и не нужен после удаления компонента.
class UserProfile extends Component {
  static props = { userId: prop.number() };
  _cache = {};

  connectedCallback() {
    super.connectedCallback();
    this.loadUser();
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    // Опциональная очистка локального кэша
    delete this._cache[this.userId];
  }
}

Асинхронная реактивность и кэширование

SkateJS позволяет связывать асинхронные операции с реактивными свойствами, что делает кэширование данных прозрачным для интерфейса. Использование async/await совместно с обновлением реактивных свойств обеспечивает:

  • Автоматическое обновление UI после загрузки данных.
  • Минимизацию повторных запросов при кэшировании.
  • Возможность комбинировать локальный и глобальный кэш для разных сценариев.

Оптимизация производительности

Основные приемы при кэшировании данных в SkateJS:

  • Локальный кэш компонентов для одноразовых данных.
  • Глобальный кэш для данных, используемых несколькими компонентами.
  • Мемоизация методов для сложных вычислений.
  • Контроль жизненного цикла компонентов для освобождения ресурсов.
  • Асинхронные реактивные свойства для прозрачного обновления интерфейса.

Эти техники позволяют создавать компоненты с минимальной нагрузкой на сеть и CPU, сохраняя реактивность и согласованность данных.

Оглавление