Как React реализует хуки, чтобы они полагались на порядок вызовов

Question

React Hooks useState может присоединять локальное состояние к функциональному компоненту без сохранения состояния, например

const [name, setName] = useState('tom')
const [age, setAge] = useState(25)

Мне интересно, как выглядит дерево объектов локального состояния после выполнения двух строк выше? Правила хуков говорит что-то о том, как обрабатывается состояние

Реагирование зависит от порядка, в котором хуки называются

Или локальное состояние неДерево объектов вообще, просто массив?

Заранее спасибо!

Answer 1

Хуки внутренне реализованы в виде очереди, где каждый хук представлен узлом, имеющим ссылку на следующий.

Из документации:

Существует внутренний список «ячеек памяти», связанных с каждым компонентом.Это просто объекты JavaScript, куда мы можем поместить некоторые данные.Когда вы вызываете Hook, например, useState (), он читает текущую ячейку (или инициализирует ее во время первого рендеринга), а затем перемещает указатель на следующий.Таким образом, каждый из нескольких вызовов useState () получает независимое локальное состояние.

Архитектура будет аналогична

{
  memoizedState: 'A',
  next: {
    memoizedState: 'B',
    next: {
      memoizedState: 'C',
      next: null
    }
  }
}

Схема одиночного хука приведена ниже.Его можно найти в реализации

function createHook(): Hook {
  return {
    memoizedState: null,

    baseState: null,
    queue: null,
    baseUpdate: null,

    next: null,
  };
}

Ключевые свойства, которые позволяют хукам вести себя так, как они есть memoizedState и next.

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

После обновления finishHooks() будет вызываться, где ссылка на первый узел в очереди ловушекбудет храниться на визуализированном волокне в свойстве memoizedState