Есть ли разница между хранением значения const в переменной и в состоянии?

Question

Я заметил несколько способов добиться, казалось бы, того же самого внутри функционального компонента React. Когда у вас есть то, что по сути является значением конфигурации, которое требуется только внутри этого компонента (просто постоянное значение, никогда не передаваемое и не изменяемое), вы можете просто использовать обычный const или сохранить его в состоянии компонента.

Стандартная переменная:

function Example1() {
  const a = 1
  return <div>{ a }</div>
}

Хранится в состоянии:

function Example2() {
  const [a] = useState(1)
  return <div>{ a }</div>
}

Создается впечатление, что за кулисами это приведет к тому, что Example1 создаст переменную для каждого рендера, а затем утилизирует из этого, в то время как Example2 создаст переменную один раз и будет поддерживать ее до выгрузки компонента. Это точно? И является ли один из этих методов предпочтительным с точки зрения производительности / передовой практики?

Answer 1

Это точно?

Да, как вы сказали, Example1 создает переменную на каждом рендере (помечая ее как "одноразовую" в конце scope - не относится к React, но Javascript), Example2 создает переменную один раз и поддерживает ее, пока компонент не будет размонтирован (или состояние этой переменной не изменится с помощью setState).

И является ли один из этих методов предпочтительным с точки зрения производительности / хорошей практики?

Как хорошая практика - Пример1 .

Что касается производительности , это должно быть Example1 . Example2 запускает useState и сравнивает значение a с предыдущим состоянием на каждом рендере, который "намного дороже", чем объявление переменной.

Лучшим примером будет сравнение ссылка на компонент / запоминается переменная против переменной ( Example1 ):

function Example2() {
  const a = useRef(1);
  const b = useMemo(() => 1, []);
  return <div>{a.current} , {b}</div>
}

Но ответ остается почти таким же.

Вид такого кода означает, что ref a может измениться . Использование useMemo означает, что b - это переменная "тяжелых вычислений" , если нет, то это просто издержки (то же самое объяснение, что и выше), и лучше использовать Пример 1 .

Answer 2

Сосредоточение этого ответа на том, когда и что использовать.

Базовая c концепция,

• Если вам нужно наблюдать за значением и реагировать на него, сохраняя его в состоянии имеет смысл.
• Если вы просто хотите сохранить значение для отображения / вычисления, более подходящим является использование const/let.

---

Теперь в вашем втором пример

const [a] = useState(1)

Эта строка кода неверна. Это потому, что вы добавляете наблюдателя, но не принимаете обратный вызов установщика.

---

Example1, создающий переменную для каждого рендера

Да, это правильно. В примере 2 создается 1 переменная, однако состояние в React является неизменным. Это означает, что при каждом рендеринге весь объект копируется во временную переменную, уничтожается и создается заново. В связи с этим рекомендуется не хранить крупные объекты в состоянии, поскольку это отрицательно скажется на вашей производительности.

Answer 3

Ваше предположение почти верно, с useState переменная создается один раз и повторно используется при каждом рендеринге.

Однако основное отличие состоит в том, что изменение переменной, созданной с помощью useState (с помощью метода setter), вызывает компонент refre sh.

Если вам просто нужно сохранить значение между визуализациями, следует использовать другие хуки, например, useRef, useCallback или useMemo