Кто-нибудь когда-нибудь составлял обширный, состоящий из нескольких абзацев ответ, изливающий душу своему давно потерянному любовнику о том, почему десять лет назад ничего не могло быть (потому что вы в старшей школе смотрели только на Шона Фэрис)?

только для того, чтобы случайно обновить страницу, и теперь все ваши душераздирающие слова исчезли, никогда не будут прочитаны, может быть, к лучшему?

Нет? Да… я тоже… Я имею в виду, кто это делает…

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

Версия, в которой мы теряем письмо при обновлении

Версия, в которой пользователь может сохранить свое письмо при обновлении

Основные отличия в словах:

  1. Импортировать useEffect
  2. Измените инициализацию нашей переменной состояния text с «» на localStorage.getItem(“insert-anything-here-even-potato”)
  3. Добавьте хук useEffect() внутри нашего компонента приложения, который принимает функцию обратного вызова с localStorage.setItem(“insert-anything-here-even-potato”) внутри и массив зависимостей: [text]

Давайте немного разберем хук useEffect.

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

useEffect (функция обратного вызова, зависимости)

Внутри нашего хука useEffect() находится функция обратного вызова, которая содержит код нашего побочного эффекта. В нашем примере выше наша функция обратного вызова имеет localStorage.setItem(‘love-letter’, text), что позволяет нам сохранять наши данные из переменной состояния text в нашу localStorage в виде пары ключ-значение. Таким образом, у нас есть наше ключевое «любовное письмо» и значение, которое пользователь вводит в поле ввода (поскольку переменная состояния text содержит пользовательский ввод через обработчик события onChange).

Зависимости

После нашей функции обратного вызова у нас есть аргумент зависимостей. Зависимости могут содержать массив, на который ссылается хук useEffect, чтобы вызвать побочный эффект. Поскольку в нашем примере в качестве аргумента зависимостей используется [text], это означает, что наш хук useEffect проверяет, был ли обновлен text. После повторного рендеринга компонента хук useEffect снова запускает побочный эффект. Мы можем установить различные аргументы в качестве зависимостей, чтобы мы могли контролировать, когда запускается побочный эффект:

  1. Массив, содержащий значения состояния/реквизита [text, prop1, prop2, …]. При желании мы можем добавить дополнительные значения, чтобы побочный эффект запускался при изменении любого из значений зависимости.
  2. Пустой массив []. Это приведет к тому, что useEffect запустится только один раз после первоначального рендеринга.
  3. Ничего. Побочный эффект будет выполняться после каждого рендеринга.

Советы по использованию эффектов

  • Если вы хотите реализовать несколько побочных эффектов, не бойтесь использовать несколько хуков useEffect.
  • Есть функция async? Бросьте его в useEffect.

TL;DR

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

Обязательно ознакомьтесь с React Docs на Effect Hook!