@MishaXXL

Откуда React берет объект для инициализации хуков без пути к нему?

Пойдя по пути import { useState } from 'react', чтобы понять логику его работы, я забрел в тупик
Подскажите, каким образом тут происходит инициализация хука и как дойти до места реализации непосредственно самого хука?

У нас есть ReactCurrentDispatcher, который возвращает объект со свойством current значение которого null
var ReactCurrentDispatcher = {
  current: null
};


Здесь мы dispatcherприсваиваем значение null
function resolveDispatcher() {
  var dispatcher = ReactCurrentDispatcher.current;

  {
    if (dispatcher === null) {
      error('Invalid hook call. problem.');
    }
  } 

  return dispatcher;
}


Каким образом у нас тогда проходится проверка if (dispatcher === null) и в useStateмы передаем уже якобы какой-то мифический объект?
function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}
  • Вопрос задан
  • 80 просмотров
Решения вопроса 1
Mike_Ro
@Mike_Ro
Python, JS, WordPress, SEO, Bots, Adversting
Реакт использует контекст, чтобы управлять хуками и их состоянием. Когда компонент реакта рендерится, реакт устанавливает ReactCurrentDispatcher (текущий диспетчер хуков) в соответствующий объект диспетчера для этого рендера. Это позволяет хукам (например, useState) обращаться к текущему состоянию и методам жизненного цикла компонента без необходимости явно передавать какие либо ссылки на компоненты или их состояние.

https://github.com/facebook/react/issues/14022#iss...
Переменная ReactCurrentDispatcher.current по умолчанию имеет значение null, потому что вне контекста рендера компонента использование хуков не имеет смысла. Если Вы попытаетесь использовать хук вне компонента (в обычной функции JavaScript), ReactCurrentDispatcher.current будет null, что приведет к ошибке, указывающей на неверный вызов хука.

Реализация хуков находится в исходном коде реакта. Там же можно посмотреть, как реакт реализует useState и прочие хуки.

How hooks work | How React Works
Заметка о том, как работают хуки в React
Первое погружение в исходники хуков
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы