Тёмный

ИЗМЕНЕНИЕ В REACT 18 О КОТОРОМ Я НЕ ЗНАЛ 

Ayub Begimkulov
Подписаться 11 тыс.
Просмотров 7 тыс.
50% 1

Опубликовано:

 

30 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 52   
@ayub_begimkulov
@ayub_begimkulov Год назад
Друзя, в данном видео я совершил ошибку, сказав то, что в React 18 useEffect вызывается асинхронно через micro-таску. На самом деле он вызывается синхронно. Подробнее все разобрал вот в этом видео -- ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UbQJWpwensk.html.
@VZava
@VZava Год назад
Аюб, подскажи, пожалуйста, что у тебя за кресло? :D Очень долго ищу хорошее, т.к. очень долго за компом сижу
@ayub_begimkulov
@ayub_begimkulov Год назад
А я сам не знаю, какой-то ноунейм) взял его на местном рынке техники.
@МарияЧерешня-у2й
🎉
@BohdanZots
@BohdanZots Год назад
Привет . Можешь подсказать где ты читал или как гуглил про useEffect и как он работает ( в смысле это микро или макро таска )
@mercury_2379
@mercury_2379 Год назад
комментарий в поддержку канала
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@AlexanderOsnovnoi
@AlexanderOsnovnoi Год назад
Я думаю, что рано или поздно, старый способ рендера реакта в root вообще выпилят. Нет смысла держать несколько методов рендера
@ayub_begimkulov
@ayub_begimkulov Год назад
Это да, конечно. Сейчас просто для лучшей совместимости с прошлыми версиями его не убрали.
@Максим-д1у4щ
@Максим-д1у4щ Год назад
Увидел в проекте vite. Было бы очень интересно (хотя бы как пост в тлг) услышать твое мнение о вите и стоит ли его юзать в проде/деве с реактом или даже некстом, имеет ли смысл переносить старые проекты на вит (наслышан о проблеме с env переменными). Спасибо за видео!
@baileysli6235
@baileysli6235 Год назад
Я не Ayub, но тоже отвечу. Использовать стоит. Он в дев очень быстрый из-за того, что под капотом esbuild. А в проде хорошие дефолтные настройки, которые сильно менять не нужно. С переменными проблема да. В next'е использовать vite спорно как по мне. Они свой же сборщик делают и явно на него все силы будут брошены. Стоит ли переносить старые проекты? Ну смотря насколько они большие. Если малые средние, то больше дня не займёт по идее. Большие наверное не стоит. Особенно если надо переводить и просто сборку, и сторибук, и много плагинов
@rustamakhmetyanov4404
@rustamakhmetyanov4404 Год назад
@@baileysli6235 а что за проблема с переменными, я его использую в проекте.
@Максим-д1у4щ
@Максим-д1у4щ Год назад
@@baileysli6235 Да, некст пилят свой сборщик, но он сейчас в альфе и двигается не особо быстро. У нас проект на нексте, и он порядка нескольких секунд билдится между изменениями. становится очень тяжело (
@F4k13
@F4k13 Год назад
@@Максим-д1у4щ недавно вышел апдейт, уже бета
@baileysli6235
@baileysli6235 Год назад
@@rustamakhmetyanov4404 что к переменным из .env нужно обращаться не из процесса, а по import.meta как в видео. И по дефолту нужен префикс VITE_
@mrsuhrob1334
@mrsuhrob1334 Год назад
Аюб, я очень благодарен тебя за предоставленный контент! Было бы возможность, чтобы ты сделал видео о том как настроить сборщики спс
@ayub_begimkulov
@ayub_begimkulov Год назад
Рад, что понравилось! Про настройку ты имеешь в виду именно обзор конфигурации? Я планировал по оптимизациям сделать видео либо плейлист. А по конфигурации можно в интернете поискать. Касательно вебпак - у них очень хорошая документация, советую.
@baileysli6235
@baileysli6235 Год назад
Кстати тоже была такая же проблема. Не с твоим хуком, а самописным. Но я не помню как решил. Помню только что пару часиков дебажить пришлось
@ayub_begimkulov
@ayub_begimkulov Год назад
Главное, что отдебажил!
@svgaryaev
@svgaryaev Год назад
Аюб, привет, спасибо за погружение в реакт если мне не изменяет память в новых версиях react synthetic event не погружается до уровня document и останавливается на root элементе приложения, поэтому если слушать события клика на root элементе, то все будет работать
@АнатолийГорбов-о1ь
Поддержу автора и канал комментарием! Спасибо за контент)
@ayub_begimkulov
@ayub_begimkulov Год назад
не за что!
@jamjam3337
@jamjam3337 Год назад
👏👍
@ivanp7697
@ivanp7697 Год назад
Спасибо за материал! Годнота!
@ayub_begimkulov
@ayub_begimkulov Год назад
не за что!
@alexGerasimov73
@alexGerasimov73 Год назад
Хорошее видео. Спасибо)))
@ayub_begimkulov
@ayub_begimkulov Год назад
Не за что!
@ruslanlobarev3991
@ruslanlobarev3991 Год назад
А самое интересное, что если вешать outside листенер не на document, а например на document.getElementById("root"), то все будет работать как надо и без stopPropagation. Думаю тут дело не во всплытии, а в том, что реакт сам эмулирует механизм всплытия для "своих" элементов (при чем микротасками), и только после этого эмитит событие выше по "нативному" дому (макротаской).
@ayub_begimkulov
@ayub_begimkulov Год назад
Да, ты прав. Если навесить обработчик на рут - то все будет работать, как нужно. Однако то, как ты описываешь работу ивентов в реакт - не совсем верно. У самого реакта в целом нету механизма всплытия. Он навешивает 1 обработчик на root, затем уже по target'у определяет какие хендлеры из компонентов надо вызвать. Причем если обработчик висит на дочернем и родительском элементе - то они будут вызываться снизу вверх синхронно. То есть асинхронного всплытия у синтетических ивентов нету. Ну и в целом, нельзя взять, остановить ивенты на руте. И затем эмитить их дальше макротаской. Вообще все ивенты который ты эмитишь сам программно не будут асинхронными. У них будет стоять флаг isTrusted - false, и уже обработчики все будут вызываться синхронно.
@ruslanlobarev3991
@ruslanlobarev3991 Год назад
Пытался воспроизвести такое поведение на очень похожем примере, но у меня повторный клик не срабатывает. Все логи срабатывают в такой же последовательности, но второго outside click не происходит. Единственное отличие - стейт хранится в редаксе (вместо setOpened вызывается dispatch).
@ruslanlobarev3991
@ruslanlobarev3991 Год назад
Не все верно, мой косяк, событие было не на click а mousedown, так что воспроизводится.
@ayub_begimkulov
@ayub_begimkulov Год назад
Главное, что понял проблему!
@ДмитрийГусаров-к5о
алилуя, свершилось, хоть до одного блогера дошло что сет.функция отрабатывает синхронно...
@kujojotaro3464
@kujojotaro3464 Год назад
Гений с помощью какого функционала в JS она могла бы быть асинхронной
@ayub_begimkulov
@ayub_begimkulov Год назад
Что значит «дошло»? Я разве говорил, что это не так?)
@ДмитрийГусаров-к5о
@@ayub_begimkulov твое видео про батчинг в реакте, 36 сек
@pavelnedved1901
@pavelnedved1901 Год назад
Только почему то в гугле все статьи говорят о том что сет стейт асинхронный...
@ДмитрийГусаров-к5о
@@pavelnedved1901 setState классовых компонентов не тоже самое что сет функция useState, которая под копотом называется диспач и работает совершенно подругому
@yevgeniy-ten3482
@yevgeniy-ten3482 Год назад
то есть в момент пока событие click происходит по button, успевает навешиваться хэндлер на document и на нем тоже начинает отрабатывать событие click?, немного не понял этот момент
@Туран141
@Туран141 Год назад
Прочитай про всплытие событий js
@yevgeniy-ten3482
@yevgeniy-ten3482 Год назад
@@Туран141 не понимаю к чему этот комментарий), если событие навешивается после клика, мда)) почитай лучше внимательней что я спросил
@Туран141
@Туран141 Год назад
@@yevgeniy-ten3482 ок)
@ayub_begimkulov
@ayub_begimkulov Год назад
Нет, js однопоточный, такого не может быть. Событие происходит на button, однако оно не сразу доходит до документа (тут человек правильно наводку дал на всплытие). Из-за приоритетности микротасок обновление компонента происходит раньше, поэтому к тому моменту когда ивент "всплывет" до документа, там уже будет навешен outside click обработчик. Получается у нас флоу такой: 1) Ивент на кнопке 2) Обновление React 3) Всплытие ивента до родительских элементов
@Туран141
@Туран141 Год назад
@@ayub_begimkulov Ему бы сперва про софт скилы прочитать, думаю софт скилл приоритетнее чем всплытие событий.
@АлександрКазаков-р3е
Подскажите пжл: этот уровень знания какому уровню программиста должен соответствовать ? Я только 4й месяц изучаю и только пока основы ( синтаксис, html и css) и до библиотек\технологий не дошел но при просмотре видео как будто человек на арабском разговаривает. Звуки знакомые , пару слов даже вроде уже знаю но 99% не понятно.
@malinovayagalya4635
@malinovayagalya4635 Год назад
примерно миддл/миддл+, правда практическое применение данных кейсов сказать не могу
@lyubishkin
@lyubishkin Год назад
​@@malinovayagalya4635чел, какой мидл. Это уровень крепкого синьера
@АлександрКазаков-р3е
Ну слава яйцам, а то я думал это джун должен знать на отлично даже если ночью разбудить.
@Alex-ov9eo
@Alex-ov9eo Год назад
​@@АлександрКазаков-р3е конкуренция на рынке джунов передает привет
@АлександрКазаков-р3е
@@Alex-ov9eo да знаю я ....знаю ( грустный плачь под столом обняв коленки руками)
Далее
Ответы Мэил Ру
01:00
Просмотров 1,5 млн
# Rural Funny Life Wang Ge
00:18
Просмотров 715 тыс.
Разбираемся в React JSX
13:49
Просмотров 8 тыс.
Ответы Мэил Ру
01:00
Просмотров 1,5 млн