Задать вопрос
@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);
}
  • Вопрос задан
  • 141 просмотр
Подписаться 1 Средний Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Нетология
    Frontend-разработка на React
    10 недель
    Далее
  • Академия Eduson
    React-разработчик
    2 месяца
    Далее
Решения вопроса 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
Первое погружение в исходники хуков
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
от 250 000 до 300 000 ₽
IT ATLAS Москва
от 200 000 до 250 000 ₽