Первое погружение в исходники хуков (задел на будущее)

Самая лучшая документация - это исходники. Поэтому в этом выпуске будет первое погружение в исходники React-а. Здесь мы познакомимся
с тем как реализован хук useCallback и заложим задел на будущее, чтобы было проще ссылаться на исходники
Поддержать Айти Синяка можно здесь:
KZbin: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
00:24 Структура репозитория
00:55 Поиск исходников хуков
03:15 Один хук - много функций. Dispatcher
05:16 mountCallback
06:18 updateCallback
07:54 Как сравниваются зависимости areHookInputsEqual
09:26 Выводы из изучения areHookInputsEqual
10:12 Изучаем mountWorkInProgressHook()
12:18 Изучение updateWorkInProgressHook() в вакууме не имеет смысла
13:04 Голос сообщества
13:30 Подписывайтесь!
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

[@xandmore]

8:23, вообще говоря, количество зависимостей не должно совпадать. Там бы стояло OR. А это означает, что количество итераций цикла определяется по наименьшему из массивов, что довольно странно, не находите? Да, мы увидим console.error о разном количестве аргументов шагом выше, конечно. Но, коли мы уж копаем до сути, то давайте на это обратим внимание :) Пример, показанный в видео: [apartment, user, null] будет равен [apartment, user] Спасибо большое за труды!

[@it-sin9k]

ч0рд) и действительно) все вплоть до наоборот) если отсечь какую-то зависимость при новом рендере, то зависимости могут быть равны между собой) Запиню комментарий!

[@olezhonnv3215]

Меня там contiinue особо радует! В том блоке кода. Сразу видно крутых девелоперов из ФААНГ!

[@olezhonnv3215]

Чтобы понять про continue, надо идти дальше - в исходники V8. Это я глупость написал, наверное. А может и нет. Прсто, насколько я помню, continue под капотом у V8 реализовано так, что затормаживает цикл. Но может и путаю.

[@maria-kuznetsova-s]

Отличный комментарий, спасибо! Сейчас протестировала и это реально так работает. Последовательное изменение deps таким образом: ['Hello', 3] -> ['Hello'] -> ['Hello', 5] -> ['Hello'] -> ['Hello', 7] bообще не вызывает callback useEffect'а

[@taras.batura]

Хорошее видео. В тему про: "зачем программистам с опытом, если и сами могут глянуть", у меня мнение, что всего не глянешь. У тебя может из-за ежедневной рутины никогда не дойдет дело до того, как же там реализовано в исходнике, а вот такие видео помогают с идеями как можно свои знания прокачать.

[@it-sin9k]

У меня самого много лет руки не доходили многие исходники глубоко поковырять, до старта этого канала) теперь наслаждаюсь)

[@sergeysibara4346]

Пожалуй это самые запутанные исходники из тех, в которых я лазил) При их изучении по ходу разбора явно надо как минимум денек-другой рисовать схемы, чтобы разобраться, как все эти части взаимодействуют друг с другом. Иначе в голове все эти переходы не соберешь в единое целое. Было бы очень здорово, если бы вы нарисовали подробную схему внутреннего устройства механизма хуков и рассказывали по ней о составлявших деталях этого механизма.

[@it-sin9k]

Это видео было скорее ознакомительное) чтобы было вообще представление о том где можно найти исходники. Что под одним хуков кроется несколько функций. И насколько некоторые имплементации хуков (useCallback) могут быть примитивными (за исключение методов mountWorkInProgressHook() и updateWorkInProgressHook(), их можно пока воспринимать как черные ящики, которые возвращают один и тот же объект хука). Поэтому в след видео будем чаще ссылаться на исходники и раскрывать чуть шире этот вопрос. Поэтому оставайтесь на канале и возможно мы сможем хорошо раскрыть вопрос на протяжении N видео)

[@Ramosok]

Ролики можно пересматривать бесконечно и каждый раз ты видишь что то новое) это просто шикарно!

[@it-sin9k]

Спасибо) хотя я думаю, что этот ролик не самое лучшее творение))

[@ilnurryazhapov]

я вот не новичок но не ковырялся в исходниках, с вашей помощью все становится понятно

[@it-sin9k]

Да я сам несколько лет, мне кажется, хотел поковыряться в исходниках и вот целый канал завел, чтобы это сделать)

[@lomeat]

о, видос с утречка, кайф

[@НикитаГончаров-е8ш]

Топ🔥🔥🔥

[@kirillcherkalov]

Спасибо за видео

[@alexanderpodlesnyi8096]

Я любитель перерыть исходники и очень классно когда есть такие видосы, которые подтверждают мысли которые сделал сам исходя из кода.

[@starwalker.musician]

Возьми конфетку с полочки! Старательный ты наш ))))))))))

[@maria-kuznetsova-s]

@it-sin9k , я немного запуталась) linked list на 12:10 хранит в себе хуки всего приложения или только одного компонента? Из этого видео я поняла, что один linked list это место хранения для всего приложения. Но в каком-то другом вашем видео, была схема дерева и linked list располагался в одной node (кажется так)

[@it-sin9k]

а я помню, где то с ошибкой записал) Каждый компонент, хранит в себе linked list его хуков :)

[@maria-kuznetsova-s]

@@it-sin9k отлично, благодарю!

[@ДаниярКаби]

большое спасибо, ты крут !

[@ИванИванов-у3ч4м]

Отлично видео! Ещё бы чего-то подобного...

[@it-sin9k]

Так там еще видео 5-10 с разбором исходников хуков :)

[@АлексейШишкин-ф9п]

Привет, расскажи про компоненты высшего порядка

[@it-sin9k]

А что именно хотелось бы услышать?

[@АлексейШишкин-ф9п]

@@it-sin9k Уже разобрался)

[@Programarium_academy]

спасибо

[@olezhonnv3215]

Во накрутили. Что они там курят, в фейсбуке, что такую дичь наворачиваают? Я колупаллся в исходниках реакта. Там у них дичь, в том смысле, что изначально придумали чепуху, потом подперли костылем то, что болит. Потом очередным костылем подперли тот костыль, который решал предыдущую боль. Но снабдили это неплохим интерфейсом, более-менее удобным для юзера, которому под капот лезнь не обязательно. И каким-то чудом хайпанули! То же думаю и про редакс. Но редакс - еще большая дичь, потому что интерфейс неудобный.

[@olezhonnv3215]

Там костылей на костылях - вложенный список. Но чтобы это осознать - надо думать на особом уровне абстракции. Сениор Реакт девелоперы до такого дойдут лет через 8 - 10 в профессии. Когда просто сениорами станут, без реакт.

[@it-sin9k]

@@olezhonnv3215 А есть какой-то пример годно написаного фреймворка? я просто к тому, что не скатываются ли все фреймворки к такой же дичи)

[@dedarm9837]

«Не пишите на ДжаваСкрипт»?

[@it-sin9k]

Какую запись прислал подписчик, такую и опубликовали)

[@dedarm9837]

@@it-sin9k Понял. Просто странно прозвучало. ЖВ Спасибо Вам за видео и за ответ! ^^

[@cikada3398]

Может имелось в виду юзайте TS

[@d0paminer]

+

[@vladimirpolyakov4382]

Ооох слажна =)

[@vibius6385]

Интересная задумка, но не думаю, что новички что-то поймут, а программисты с опытом сами в состоянии покопаться в исходном коде. Имхо, если и ковырять исходный код, то было бы интереснее получить более целостное описание архитектуры, а не "здесь такая функция, она берётся из такого файла, а там ещё одна функция etc".

[@it-sin9k]

Я думаю этот комментарий можно отнести к многим моим видосам) Новичкам сложно, а опытные и сами разберутся) Поэтому при создании канала мы решили не ориентироваться на новичков, т.к. для них контента и так пруд пруди, а скорее сделать для опытных. А про опытных я бе не сказал так однозначно. Очень многие программисты из моего окружения или те, кого я собеседовал, не открывали ни разу исходники. Поэтому, у этого выпуска было 2 цели: первая - это таким людям приоткрыть как это работает изнутри и нет там каких-то супер сложностей разобраться, а вторая - сделать задел на следующие видео, чтобы потом не рассказывать где что лежит и что такое mountWorkInProgressHook :)

[@apanchuk]

Мир не черно-белый, где ты сначала новичок, а один прекрасный момент становишься опытным и легко разбираешься в исходниках библиотек. Посередине есть еще много итераций, когда ты открываешь исходники и пытаешься понять. И подобные видео в этом помогают хотя бы тем, что делятся подходом.

[@it-sin9k]

хорошо сказано!)

[@vibius6385]

@@apanchuk здесь уместнее сказать о недетерминированности, тейк про чёрное и белое не для этого. Если человек не дошёл до исходников, значит и смысла ему про них рассказывать нет, значит он ещё не умеет пользоваться абстракцией, следовательно, он не может до конца прочитать документацию и подобные видеоролики с повествованием о цепочке функций ничем ему не помогут, даже подходом.

[@it-sin9k]

Думаю причина следственная связь немного нарушается в моменте "значит он ещё не умеет пользоваться абстракцией". Из того что человек не лазит в исходники не значит, что он не умеет пользоваться либой или то что он не прочитал внимательно документацию. Вообще я думаю никто не знает идеально документацию реакта, так она вечно зеленая и огромная кодовая база. У всех можно найти какие то дыры иногда даже в простых местах. Лично я у себя находил много таких и по сей день нахожу, особенно когда начал заниматься этим каналом, хотя казалось, все просто и понятно, но нюансы вылазят очень часто.

[@mzpizote]

Нимчего не помняв, почиму так все сложно там?

[@dm.hol.3624]

Вообще необходимость открывать исходники, чтобы понять работу программы, - признак плохого дизайна API. Публичные методы должны давать полное подробное представление о своей работе, выдавать ожидаемые результаты.

[@it-sin9k]

либо у библиотеки плохая документация) тогда без исходников не разберешься)