Перейти к основному содержимому

Пакетная обработка

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

Обзор​

Пакетная обработка позволяет:

  • Уменьшить количество операций записи в IndexedDB
  • Улучшить производительность для форм с множеством полей
  • Контролировать частоту сохранения в соответствии с вашими потребностями
  • Балансировать между безопасностью данных и производительностью

Как это работает​

Когда пакетная обработка включена:

  1. Первое изменение - Сохраняется немедленно (для быстрой обратной связи)
  2. Последующие изменения - Накапливаются и сохраняются пакетами
  3. Интервал пакетов - Настраиваемая задержка между пакетными сохранениями

Базовое использование​

С useFormAutosave​

import { useFormAutosave } from '@form-guardian/react';

function MyForm() {
  const { formRef } = useFormAutosave('my-form', {
    // Сохранять изменения пакетами каждые 5 секунд
    batchSaveInterval: 5000, // миллисекунды
  });

  return <form ref={formRef}>...</form>;
}

С attachFormAutosave​

import { attachFormAutosave } from '@form-guardian/dom';

const autosave = attachFormAutosave({
  formId: 'my-form',
  root: formElement,
  // Сохранять изменения пакетами каждые 3 секунды
  batchSaveInterval: 3000,
});

Поведение​

Без пакетной обработки (по умолчанию)​

// Каждое нажатие клавиши вызывает сохранение (после debounce)
const { formRef } = useFormAutosave('my-form', {
  debounceMs: 500, // Ждать 500мс после того, как пользователь перестал печатать
  // batchSaveInterval: undefined (отключено)
});

Временная шкала:

  • Пользователь печатает "П" → Ждать 500мс → Сохранить
  • Пользователь печатает "р" → Ждать 500мс → Сохранить
  • Пользователь печатает "и" → Ждать 500мс → Сохранить
  • Пользователь печатает "в" → Ждать 500мс → Сохранить
  • Пользователь печатает "е" → Ждать 500мс → Сохранить
  • Пользователь печатает "т" → Ждать 500мс → Сохранить

Результат: 6 операций сохранения

С пакетной обработкой​

const { formRef } = useFormAutosave('my-form', {
  debounceMs: 500,
  batchSaveInterval: 5000, // 5 секунд
});

Временная шкала:

  • Пользователь печатает "П" → Ждать 500мс → Сохранить немедленно (первое изменение)
  • Пользователь печатает "р" → Накопить (ждать пакета)
  • Пользователь печатает "и" → Накопить
  • Пользователь печатает "в" → Накопить
  • Пользователь печатает "е" → Накопить
  • Пользователь печатает "т" → Накопить
  • Через 5 секунд → Сохранить пакет (все накопленные изменения)

Результат: 2 операции сохранения (1 немедленная + 1 пакетная)

Конфигурация​

Отключить пакетную обработку​

// Пакетная обработка отключена по умолчанию
const { formRef } = useFormAutosave('my-form', {
  // batchSaveInterval: undefined (отключено)
});

// Или явно отключить
const { formRef } = useFormAutosave('my-form', {
  batchSaveInterval: 0, // Отключено
});

Короткие интервалы (частые сохранения)​

// Сохранять каждую секунду (чаще, меньший выигрыш в производительности)
const { formRef } = useFormAutosave('my-form', {
  batchSaveInterval: 1000,
});

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

Длинные интервалы (менее частые сохранения)​

// Сохранять каждые 30 секунд (лучшая производительность, выше риск потери данных)
const { formRef } = useFormAutosave('my-form', {
  batchSaveInterval: 30000,
});

Случай использования: Формы с множеством полей, где производительность важнее немедленного сохранения.

Лучшие практики​

1. Баланс между производительностью и безопасностью данных​

// Хорошо: Умеренный интервал для большинства форм
const { formRef } = useFormAutosave('contact-form', {
  batchSaveInterval: 5000, // 5 секунд
});

// Хорошо: Более короткий интервал для критичных форм
const { formRef } = useFormAutosave('payment-form', {
  batchSaveInterval: 2000, // 2 секунды
});

// Хорошо: Более длинный интервал для больших форм
const { formRef } = useFormAutosave('large-form', {
  batchSaveInterval: 10000, // 10 секунд
});

2. Комбинировать с debounce​

// Debounce предотвращает сохранение при каждом нажатии клавиши
// Пакетная обработка группирует несколько изменений вместе
const { formRef } = useFormAutosave('my-form', {
  debounceMs: 500,        // Ждать 500мс после остановки печати
  batchSaveInterval: 5000, // Затем пакетно каждые 5 секунд
});

3. Обработка выгрузки страницы​

Пакетная обработка автоматически сохраняет ожидающие изменения когда:

  • Форма уничтожена
  • Страница выгружается (если возможно)
  • Черновик вручную очищен
const { formRef, clearDraft } = useFormAutosave('my-form', {
  batchSaveInterval: 5000,
});

// При отправке формы, clear сохранит любые ожидающие изменения сначала
const onSubmit = async () => {
  await clearDraft(); // Ожидающие изменения сохраняются перед очисткой
};

Влияние на производительность​

Без пакетной обработки​

Для формы с 20 полями, пользователь делает 50 изменений:

  • Операции сохранения: ~50 (одна на изменение после debounce)
  • Записи в IndexedDB: ~50
  • Производительность: Медленнее, особенно на слабых устройствах

С пакетной обработкой (интервал 5 секунд)​

Для той же формы:

  • Операции сохранения: ~10 (первое изменение + пакеты)
  • Записи в IndexedDB: ~10
  • Производительность: В 5 раз меньше записей, значительно быстрее

Реальный пример​

import { useFormAutosave } from '@form-guardian/react';

function LargeForm() {
  const { formRef } = useFormAutosave('large-form', {
    // Debounce: Ждать 500мс после остановки печати
    debounceMs: 500,
    // Пакетная обработка: Сохранять накопленные изменения каждые 5 секунд
    batchSaveInterval: 5000,
    // Аналитика: Отслеживать пакетные сохранения
    onAfterSave: async (values) => {
      console.log('Пакет сохранен:', Object.keys(values).length, 'полей');
    },
  });

  return (
    <form ref={formRef}>
      {/* 50+ полей формы */}
    </form>
  );
}

Когда использовать пакетную обработку​

✅ Использовать пакетную обработку когда:​

  • Форма имеет много полей (20+)
  • Пользователи делают быстрые изменения
  • Производительность является проблемой
  • Записи в IndexedDB медленные
  • Вы можете допустить небольшую задержку в сохранении

❌ Не использовать пакетную обработку когда:​

  • Форма имеет мало полей (< 5)
  • Потеря данных критична (платежные формы)
  • Вам нужны немедленные сохранения
  • Форма редко используется

Следующие шаги​