React Hooks, повторная визуализация и сохранение того же состояния - как это работает под капотом? - PullRequest
Новая
       21

React Hooks, повторная визуализация и сохранение того же состояния - как это работает под капотом?

2 голосов
/ 12 марта 2019

Как это возможно, что следующая функция после перерисовки сохраняет текущее значение? 

const Example = () => {
  const [count, setCount] = useState(0);
  return <button onClick={()=>setCount(count+1)} >{count}</button>
}

Логически выглядит:

  1. initial render = мы вызываем useState с аргументом
  2. rerender = мы снова вызываем useState с аргументом

Если рассматривать компонент как чистую функцию, это должно работать. Но, насколько я понимаю, useState превращает чистый компонент в нечистый.

Но это все еще не объясняет реализацию такого механизма в функции стрелки, которая не имеет своего собственного контекста. useState не должен знать, какое время подряд вызывается, если он не подключен к родительской функции (например, уникальный идентификатор, this, обратный вызов и т. д.)

React Hooks выглядят так, как будто они нарушают многие парадигмы функционального программирования ...

1 Ответ

0 голосов
/ 12 марта 2019

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

Что касается приведенного ниже утверждения 

<button onClick={()=>setCount(count+1)} >{count}</button>

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

Однако установщик из useState hook также указывает метод обратного вызова, которому он передает текущее значение. Например 

<button onClick={()=>setCount(savedCount => savedCount+1)} >{count}</button>

Здесь savedCount передается из setCount в метод обратного вызова и внутренне реагирует, поддерживает текущее состояние ловушки.

...