React придумал новый компонент!
HTML-код
- Опубликовано: 24 июл 2024
- Реакт пока скрывает, но они активно работают над новым компонентом Offscreen. Компонент еще не доступен даже под флагом unstable_ , но я нашел путь как его потестировать и рассказать вам!
React blog: ru.reactjs.org/blog/2022/06/1...
Статья с исходниками Offscreen: jser.dev/react/2022/04/17/off...
Поддержать Айти Синяка можно здесь:
RUclips: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
00:35 Как работает Offscreen
01:46 Более глубокое погружение
04:14 Тонкости работы Offscreen
05:55 Варианты использования
08:00 Подписывайтесь!
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
________________
Канал о Фронтенде, который хочется порекомендовать (telegram):
t.me/frontendnoteschannel
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом
Очень мало таких каналов! Спасибо за твои труды!
Спасибо! такие отзывы помогают идти дальше)
О, в Реакте придумали [hidden]
Хорошо - кратко, понятно, не скучно и по делу. Спасибо за труды!
Спасибо!
Как всегда круто, сжато, ёмко 🤝
Спасибо :)
От вас вдвойне приятно получить похвалу)
Как всегда безумно благодарен! Это просто непостижимый талант в столько коротком видео, давать так много полезной информации, причем настолько все детально объяснить! Низкий поклон!
спасибо) очень приятно) низкий поклон))
Прекрасный монтаж, спасибо!
вау, реакт замешал v-show и keep-alive в 2022ом, кайф...
Да блин, почему реакт такой отстающий? Ещё и кода как всегда больше.
@@gritsienkooleg3447 потому что не бежит вперед паровоза, реакт был первопроходцем, поэтому сохранять стабильность и внедрять новые фичи - тяжело. Если нужена прогрессивная библиотека - это vue, solid, но есть вероятность схватить кучу проблем при поддержке в будущем. Хочешь стабильность и надежность - реакт, ангуляр.
@@screamstream1161 реакт не был первопроходцем. До него был knockout, который был реактивным, в отличии от реакта и ангуляра.
Реакт из будущего придумал v-show из первого vue?)
Прикольно) У них точно такое же поведение?
@@it-sin9k ну вам ли не знать😁 если сама механика, то так же точно инлайнится display: none, только здесь отдельная обёртка, а там директива на любой dom-элемент. Кмк, при обилии логики и различных скрытых элементов, директива будет компактней в коде. Ну и вопрос, как будут работать транзишены с ним, чтобы не так топорно появлялось\скрывалось🤔
@@alexanderkazakow7773 не будет работать транзишен как и с любыми другими компонентами которые монтируются/размонтируются
Спасибо за видео, как всегда информативно и по делу, без воды!
По поводу компонента, очень интересная штука, буду ждать релизной версии.
Спасибо!
Круто! Как всегда спасибо за подробный разбор - это бесценно!
Спасибо :)
Отличное видео ! Спасибо. 👍
Столько труда в видео. 😮
Спасибо :) Такое вот у нас хобби)
Спасибо, Синячищще! С Реактом не соскучишься ))
Круто!! спасибо огромное
Очень хотелось бы увидеть "обобщающий урок" - что-то вроде большого проекта то типу магазин на реакте, где все было бы максимально приближенно к реальному рабочему проекту.
Спасибо, полезно и доходчиво.
Супер! Спасибо
Подписка за качество и подача контента. Только что увидел в рекомендации этого видео
О как, видимо залетело видео в рекомендации RUclips) Добро пожаловать)
Большое спасибо за контент, много что для себя нового нашел, всем новичкам советую!!!!
это что директива v-show из vue?
Как сказал бы Тим Кук: "It's Revolution"
Молодец! Очень доходчиво и интересно. Спасибо
Спасибо!
Интересно) Очень похоже на вьювовский ""
Похож да не он) Тут lifecycle работает, а у вью нет
Не совсем понял, т.е. хуки на монтирование/размонтирование срабатывают, но реально компонент остается и его состояние сохраняется? Там и так магии хватает, а теперь еще такие чудеса.
спасибо за ролик, смотрю все твои видео.
Спасибо! Мы очень признательны за это!
Спасибо тебе за то что ты делаешь)
Спасибо за подписку, уже более 2 лет с нами)
Крутой обзор. Разумеется ждем еще. Подача также супер.
Спасибо!
Интересно как всегда!
Супер! Очень круто смотреть такие разборы будущего!
Значит будем пилить больше)
Это канал с самым доходчивым объяснением нюансов реакта и не только) Рад, что нашел его)
Спасибо :) мы очень стараемся)
Да, прикольно, спасибо!
Все по делу👍
Спасибо!
вообще полезная штука. в некоторых местах приходилось принудительно делать такое поведение своими силами.
Класс!
Контент в кайф! Красавчик! давай ещё вот этого да побольше!
Спасибо :) Будем значит еще делать)
Контент просто пушка!
Супер!
🔥🔥🔥
Круто)
крутой ролик
спасибо
Уважуха!! Делай почаще такие обзоры новых возможностей реакта
Договорились :)
для этого надо чтобы новые возможности появлялись)
ох уж эти скептики)
Круто!!! в 2022 увидели реализацию v-if и v-show из Vue 3 😄
крутой ролик !!
ммм, хороший компонент. спасибо за видео
Формат отличный. Продолжай .
Спасибо!
супер
ТОПППППППППППППППППП
Ее земляк контент в кайф, давай еще пожалуйста!))
Уже следующее видео делаем)
Давно пора было что-то такое сделать
полностью согласен)
Оч круто =)
Спасибо!
Скажи честно, случаем не канал MyGap тебя вдохновил на такую анимацию и, блин, на похожую подачу материала - не спеша, грамотно, без лишних деталей? - i like it very much! 💖
в одном из видео он упоминал, что идея для стиля видео (и персонажа) у него возникла на основе MyGap
@@skeetybeefy, значит мне всё-таки это не приснилось. Благодарю! 🙏
Все верно) мне тоже нравится канал MyGap)
Достаточно неплохо пояснил, спасибо)
Этим можно, кстати, немного использование Redux уменьшить в принципе, верно же?
Сложно сказать, нужно смотреть как вы используете Redux
Гениальная подача материала
Низкий поклон)
спасибо ) коммент в поддержку
я кайфанул
будем ждать
низкий поклон)
звучит правда интересно, но интересно в какой версии релизнут
поздравляю, вы открыли v-show из vue
Делай больше таких обзоров
Немного не понимаю революционность компонента. Подобное поведение есть во Vue из коробки уже годами. Я ни как не против React, не работал на нём. Лишь интересно почему это компонент будущего. Моя просьба объяснить как ранее справлялись с этим React разработчики, наверное были костыли.
Тут прикол не в том, что просто скрывается с помощью display: none. А то что у компонента, жизненный цикл отключается, а так же из-за concurrent mode. То что скрыто рендерится в последнюю очередь. Т.е. для React это новый способ делать некоторые вещи, которые мы костылили с просадкой перфоманса
топ
коммент ради коммента обязателен. Видосы крутые спасибо!
Ответ ради благодарности! спасибо!)
Итак, пое!
import { unstableOffscreen as Offscreen } как бы куда лучше чем в две строки)
Да, я выделил в отдельную строку для наглядности. Чтобы все обратили внимание на флаг unstable
Состояния всех дочерних элементов внутри Offscreen сохраняются ?!
я глубоко не проверял, но думаю да :)
Мы придумали новый компонент!
А, оказывается нет...
Почему нет?)
А почему бы не import { … as Offscreen } ?
Согласен
Для наглядности, чтобы легче было обратить внимание
6:37 как на телефоне навести на ссылку?
это был лишь пример тригера, на телефоне могут быть другие тригеры, например ссылка находится во вьюпорте
@@it-sin9k окей. На практике с такими либами еще не сталкивался. Спасибо за видео
Что за Тема у тебя в VSCode ?))
Это не настоящий VSCode) это смонтированный по образу и подобию)
@@it-sin9k Понял ) ну выглядит очень круто , даже жаль что такой темы нет в реальном VSCode )
@@ToyWoo Так в VSCode можно любой цвет в тему впихнуть, нужно только погуглить настройки :)
@@it-sin9kОоо, спасибо, не знал что такое возможно)) сейчас попробую это сделать )
Почему анимированный ведущий не моргает?
я передам вопрос))
Сказали слишком сосредоточен))
По моему реакту давно пора перейти с ререндерингов на реактивность. В том же Preact уже сигналы добавили, что ускоряет приложение и не нужны всякие хуки для ручной борьбы с ререндерингами…
Надеюсь, React не перейдет на реактивность) как то поработал с MobX пару лет с реактивностью, крайне негативный опыт :)
Полностью согласен. React движется куда-то не туда.
@@it-sin9k по вашему реактиновсть это только mobx? Ее можно по разному реализовать. Посмотрите тот же solidjs
@@user-yw9wx4lv2w нет, это не только mobx, тот же rxjs и другие варианты. Сравнивая вызов метода явно с реактивным программирование, это как тянуть камень на гору или толкать. Камень то будет там в любом случае. Но каждый выбирает сам, тянуть ему его или толкать. Крайне вкусовщина. Мне лично нравится, когда все явно вызывается, без "реакций". Реакции автоматические усложняют читабельность кода по моему мнению
@@it-sin9k ну вот solidjs реактивный. Чем принципивльно отличается читаемость кода при вызове setState в react и в solid? И тот и тот вызов приводит к какому то ререндеру.
В теории звучит хорошо , но чёт кажется несколько переоценено... Хотя не исключаю того что у меня может не хватать опыта для достойной оценки фичи
Зарелизят, будем все тестить)
Ждем разбор хука use
а что за хук use?
@@user-ck7rb1hg8o Не знал о таком, спасибо! Почитаю :)
Они что изобрели *ngIf для React?
а что такое nglf?
@@it-sin9k в ангуляре if для отрисовки
@@theenderofficial ng--if помню был такой, но мне кажется механизм там был все же другой
я правильно понял это аналог мемоизации?
хмм, скорее нет, чем да)
3:13 СколькА раз ))
Вот это пичалька)))
import { unstable_Offscreen as Offscreen } import from 'react';
товарищи из react придумали очередную хрень, во Vue всегда был v-show для примерно таких целей
ну это ведь не одно и тоже. Новый способ рендера компонентов нельзя сравнивать с display: none
Перепишем на C++. #долойjavascript
3:03 "СколькА")))
дада, я душнила, сорян
реактеры изобретают vue.js
чего это?)
Круто но зря, реакт не нужен
Странная штука. Очень сложно придумать случай, когда это могло бы понадобиться.
скопировали с других библиотек, понадобиться, чтобы сохранить оптимизацию браузера
@@sleepstream9433 если удалять/добавлять элемент в dom не по 100 раз за секунду, то в плане экономии ресурсов это будет выгоднее, чем просто скрывать элемент, особенно если он громоздкий. Так-же не понятно что там будет происходить, если в компонентах запущены какие-то таймеры, или навешаны лиснеры, или аякс запросы.
@@profesor08 точки зрения логики - хранить скрытый элемент проще, чем его создавать. А этот новый функционал предотвращает работу таймеров и запросов в фоне.
@@profesor08 И все таки не забывай про оптимизацию элементов, она не сохраняется, если удалять элементы и создавать их с нуля, но толк в этом есть, если у тебя есть много сложных анимаций, которые используют предоптимизацию.
С такими обьяснениями начинаешь глубоко понимать какая это НАУКА, не просто программист в примитивном понимании, а как в лаборатории из пробирки в пробирку, получая при этом хороший дистилят.) Спасибо за видео! Всех благ!
Теперь все больше понимаю, что реакт помойка, команда реакта сделала этот компонент, который во вью уже давно существует и это дефолт, а разрабаты на реакт пишут «компонент будущее» не повторе плиз фронт этими словами, потому что другие фреймворка имею больше функционала и если в реакт его нет, а потом выпускают его, то это не означает что это карей какая жёсткая фича, когда другие фреймворки смотря и говорят: «ты нормальный? Это дефолт вообще»
манеры конечно ваши обещают желать лучшего. Но все же, после быстрого просмотра документации v-show. Если я правильно понял, все что он делает, это display-none. В react же имплементация совсем иная. Как раз в этих отличиях и кроется продвинутость подхода. Поправьте, если я где то ошибся
Какая-то муйня. В html уже с допотопных времен есть атрибут hidden для сокрытия содержимого. Да еще и код написан на уровне студента. Все проверки и условия сложнее == х и тем более мат операции в шаблоне пишут только упоротые. Нормальные люди выносят это все в геттеры. Ну и в который раз убеждаюсь, что реакт годится разве что для написания каких-нибудь сайтиков и лендингов. До ангуляра с его структурными директивами ему как до Марса на пузе ползти.
остается только выяснить, почему react скачивают в неделю в 32 раза чаще чем ангуляр)) *холивар* :D
@@it-sin9k Это же элементарно. Потому что 99% веба - фуфлосайтики, написанные на коленке 😉
@@KnowingCat так фуфлосайтики и пишут на ангуляре?)) а то на React я вижу написаны серьезные: инстаграм, netflix, whatsapp, dropbox, paypal, airbnb, codeacademy, skype (RN), Uber Eats (RN), Wallmart (RN), Tesla. Раунд!
@@it-sin9k И дальше что? Это оставшиеся 10%. Это был ответ на вопрос о популярности реакта. Это как сравнивать мерседес с поделками ватотаза. Вторую покупают не то что в 30, в 30 тысяч раз чаще. Но возят на ней картошку, а на мерсе - корпоратов 😉
@@KnowingCat популярность React разве не равно, тому что он лучше по некоторым параметрам для бизнеса?)
🤮
Какая же хня этот реакт. Люди разучились программировать...
Только синяки и могут такое придумать. Для нормальных людей придумали CSS, HTML и JS и еще JQ для удобства. А ставить целый завод компилятор для рендеринга какой-то примитивной странички блога или личного кабинета могут только айти синяки, но я не вас именно имею ввиду, а всех остальных, которые делают Реакты и тому подобное. Я тоже синяк, но мой завод рендерид сложную форму. Цепочка неприрывная. Админ в конструкторе делает конструктор для испонителя. Исполнитель в форме создает контент для клиента. Клиент видит информацию уже как прайс-договор, но может тоже переключать, выбирать и уже после "Подписания контракта" (покупки) документ возвращается к испонителю как готовый документ, который не подлежит изменению. Вот зачем рендер кошмарный и придумали, а не для йоп-та простой дичи, в которой хотят добавить какую-то несуществующую мелочь, которой нет в природе и создают костыли и педали
сами придумали какой-то тезиз и его разгромили) круто
@@user-yw9wx4lv2w да, вначале тоже противился: учить другие языки кроме того что знал почти на изусь; бросать ит карьеру ради своего бизнеса; не брать готовое, а тратить время на опыт, так как во всем готовом слишко много токсичности. Вам ещё очень далеко. Вы по течению ит. А ит это не о программировании, а купи-продай. Покупают мозги подешевле, продают продукт подороже
@@KlinovAS таблетки забыли выпить? что вы несете?
@@user-yw9wx4lv2w Спасибо
Что? Бессмысленный набор слов. Не знаю что у вас там на заводах, зачем на заводе js. Можешь спокойно не учить реакт, раз на заводе он не нужен)) на заводе думаю и js, не нужен. Нужны станки и молча работать))
Хороший канал, жаль что на русском. Давайте постепенно избавляться от всего русского.
не забудьте избавиться от всего немецкого
Ну понятно, сначала они делали реактивный render, теперь пытаются его отключить )
Хм, мне кажется много компонентов полагаются на то, что состояние при дисмонтировании и последующем монтировании обнуляется.
Если просто так бездумно оборачивать компоненты в Offscreen, то очень много кода поломается. И это явно не должно быть встроенно в react-router.
Никто не мешает при наведении на ссылку например чисто отрисовать новый экран, если ссылки убрали через 5 сек вымаунтить волностью. Я думаю можно найти решения ничего не сломав :)
@@it-sin9k Безусловно, найти решения можно, изменив сами компоненты. Я к тому, что такое нарушение поведения жизненного цикла компонента это довольно серьезное изменение, ломающее обратную совместимость. Имею в виду, если в общедоступные библиотеки, типа react-router, принудительно добавят оборачивание в Offscreen.
@@EnjoyerOfBepis так не оборачивайте и не будет поломана обратная совместимость) А в react-rotuer это можно будет сделать опциональным... хотя о чем это я... react-rotuer смокойно сломает все в следующей мажорной версии, как они всегда это и делают
@@user-yw9wx4lv2w Сломают-то сломают, не вопрос, проблема в том, что в этом случае не будет обратной совместимости с компонентами, написанными до реакт 19 или где это будет внедрено. А реакт всегда гарантировал корректную работу компонентов, написанных на старом апи. А здесь по сути нового апи и нет, есть ломание работы текущего. Это никакими контрактами, статической типизацией и линтерами не отловишь.
@@EnjoyerOfBepis не вижу проблемы) Не нужно - не используйте. Если какая то либа (аля react-router) сломает вам поведение, задумайтесь о качестве этой либы
Плюс сейчас strict mode как раз запускает все эффекты дважды. Так то есть у всех есть время подготвиться к подобному поведению и перестать писать в useEffect логику которая ломает приложение если ее запустить дважды
А вообще я думаю что подобныъ брекингов будет все больше. Так как когда-то давно инновациоая идея с VDOM сейчас уже потеряла свою актуальность. а по сути мешает реакту развиваться. Если бы не поддержка обратной совместимости, думаю команда давно реакта давно бы отказалась от него просто выпустив очередную мажорную версию.
А так все изменения будут, но постепенно