Блок схема по использованию memo() && Боевые примеры
Вставка
- Опубліковано 4 сер 2024
- Мы уже многое узнали о memo(), но единственный вопрос, который мы обошли стороной, и возможно самый важный: "а как понять, когда использовать memo, а когда нет?". В этом видео мы создадим блок схему, которая ответит на этот вопрос и опробуем ее в боевых условиях)
Поддержать Айти Синяка можно здесь:
UA-cam: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
00:51 Изучаем причины рендера
03:00 Стоимость рендера к стоимости вызова memo()
07:25 Построение блок схемы
08:22 Боевой пример #1
09:05 Боевой пример #2
10:30 Подписывайтесь!
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом
Среди всех Todo туториалов - это как глоток свежего воздуха
Жирный лайк Синяку!
Слышал, что алгоритмы ютуба засчитывают комменты только более пяти слов, в таком случае есть смысл добавит ещё слов, например: Жирный лайк синяку за этот пример!
Спасибо за поддержку канала! Вроде тоже больше 5 слов) алгоритм UA-cam услышь нас))
АйТи Синяк, как всегда аплодирую!!! Дополнительно хлопаю продуктовому магазину с 3%) Особенно 3% 😐
Благодарочка) всегда приятно от других блогеров получить такую высокую похвалу)
опа. Димыч
Жирный лайк Синяку за этот видос!!!
Лайки мы очень любим)
Жирный лайк Синяку! ))
Спасибо за подробные разборы и бенчмарки! У самого на них точно времени не хватит:)
мне кажется, я канал только и завел, чтобы такие исследования проводить) а то в обычной жизни, все откладываешь на потом)
этот канал круче чем chrome developers!
Спасибо!) Надо посмотреть канал chrome developers)
ЖЫРНЫЙ ЛАЙК СИНЕКУ
Спасибо большое. Очень полезный канал!
спасибо за поддержку комментариями!
Жирный лайк синяку 🎉🎉🎉🎉
Жирный лайк Синяку!!
Жирное спасибо!)
Видео огонь, спасибо тебе за твое работу )
Плейлист бомбический!
как всегда информативно, спасибо.
Крутяк, спасибо за канал
Как всегда - чётко, по делу и очень полезно! Спасибо!
Очень полезные и нужные ролики! Лайк!
Жирний лайк Синяку !!!
Спасибо Вам за огромную работу и столь понятное объяснение!
Жирный лайк Синяку! 🤘
Жирнейший лайк синяку и его команде
Мега жирный лайк Синяку! Спасибо за познавательный контент 👍
Жирный лайк синяку🤘
Классное видео!
Жирный лайк Синяку!! Отличный видос.
Жирный лайк синяку)
жирный лайк Синяку!)) видео супер!)
👍 - это самый жирный лайк что я нашел)
ахахах)
Жирнейший лайк синяку, отличное видео. )
жирный лайк СИНЯКУ!
Жирный лайк Синяку!)) Заставляет задуматься и копать глубже... Спасибо за все видео!
Жирный лайк Синяку.
Оч жирный 👍🏻!!!!
большое спасибо!
Жирный лайк синяку!
Считаю, что канал крайне недооценен
Спасибо
круто спасибо
Без воды, все расписано. Не хватает только реального примера в рабочем продукте. Чтобы замерить, насколько грамотно мемоизированные компоненты могут увеличить производительность.
Жирный лайк Синяку! Жирный лайк Синяку!
Жирный лай Синяку))) Отличное и очень полезное видео))) Спасибо тебе за то что ты делаешь!!!)))
всегда пожалуйста!)
в качестве благодарности, можете поделиться этим видео со своими коллегами)
@@it-sin9k хотел спросить, планируешь ли выпускать видео о жизни в Нидерландах, и в частности про работу там?
Честно говоря не планировал) я только в твитере рассказываю, разные байки про жизнь здесь. Особенной разницы по работе не чувствуется, кроме мульикультуры и огромных налогов)
Жирный лайк синяку
Жирнющий лайк Синяку! Топчик-жирчик)
Спасибо!
В целом так и думаю, но вот последний пример с экспортом мемоизированного и немемоизированного сосотояния компонента как-то в голову вообще не приходил, спасибо! :)
самое вкусное оставил на конец выпуска)
Честно говоря, я сам такое делал лишь единожды) и то на ревью ребята, были немного выбиты из колеи))
like!!!!
2:19 Все значения и так ссылочные в js. Каждый идентификатор содержит набор цифр, которые ссылаются на область в памяти где находятся данные.
Реакт на каждый рендер вызывает функцию, а внутри функции объявлены объекты. По сути это будут новые объекты
👍
Ребята, спасибо большое за такой качественный контент! Расскажите, как работает useContext? Как react понимает, что нужно обновить конкретный подписанный компонент? Он бежит по всему дереву или как-то сохраняет ссылки на подписанные компоненты? В общем КАК?? Благодарю!
была мысль добраться до этого хука, но немного попозже возможно
Чтобы Синяк стал еще синее - надо надавить на него, например жирным лайком 👍
Кстати, возможно в блок схему имеет смысл добавить ещё один вопрос: предотвращается ли рендер только одного отдельного компонента или целого поддерева компонентов?
пусть люди хотя бы эту блок схему у себя в голове держат) уже будет польза к проекту)
"Роковое число 23" xD 6:40
А как вы проверяли скорость компонента? Только при первом рендере ? Или обновляли компонент. Можно полный код, пожалуйста?
Я делал следующим образом. У меня на экране была кнопка. По нажатию на кнопку запускался perfomance.now(), монтировался компонент и выполнялся рендер 100 000 подряд и снова вызывался perfomance.now(). И это время я сравнивал. К сожалению примеров полных не осталось, т.к. я там много разных экспериментов и перезаписывал старые
@@it-sin9k эххх жаль.
Продам коммент!(шутко)
Может глупый вопрос, но не пойму, как смоделировать, чтобы memo предотвращал из 10 попыток рендера только одну (5:35). В случае с изменением стейта родительского компонента ведь всегда будет попытка перерендерить дочерний компонент.
при загрузке со сторонних АПИ. Загрузки идут часто, но какие-то данные обновляются часто, а какие-то редко. Компоненты, которые используют редко обновляемые данные можно закешировать и рендерить реже
+
Не совсем понял как экспортировать один и тот же компонент с мемо и без
export const Component = () => { ... }
export default memo(Component)
Польза от использования двойного экспорта ощутимо меньше чем вред от некрасивого кода его написания. Даже в этом подтянутом за уши примере красивее было бы isOnline && !isBlockedMe передавать, но и проп тогда переименовать из isOnline в isShowOnline т к фактически этот проп отржает не факт того что юзер онлайн, а отвечает на вопрос "следует ли показывать значок онлайн".
Но прием интересный все равно)
Согласен, на проекте, я бы тоже не пушил делать двойные экспорты :)
Наижирнейший )
8:39
- "Мемо сэкономит вам хотя бы 1 из 10 рендеров?"
- "Ответ - однозначно да"
Но почему? Не понимаю
так там же блок схема, это вопрос. "Если сэкономит, то идите по этой ветке"
@@it-sin9k понял, спасибо за быстрый ответ, ты очень крут!
На самом деле эти примеры выдуманные, все равно надо на реальных примерах оценивать, нужно применять memo или нет.
Мне одному кажется что функциональное программирование и react hooks ...скорее - НЕ помогают, а - заставляют (разработчика) попадать "в просак"?
Не видел подобную дичь ни в angular, ни во vue, ...но данные примеры говорят о том, что функциональные react - перестал быть простым и очевидным. Такие решения от разработчиков react позволяют разработчику снизить з.п. до уровня плинтуса, потому как подводных камней стало больше. Функциональное программирование - зло, ...use OOP!
Я бы не сказал, что ООП, простое и очевидное, возможно вы его знаете и вам кажется, что ну это то понятно. Реакт в качестве доводов создать хуки аргументировал, что новичкам сложнее понять классы, чем хуки. Поэтому возможно с вашими текущими знаниями, кажется что хуки сложнее. Тем более еще не выработаны в ней бест практисы, никто не может ответить как правильно писать и это все усложняет ситуацию. Как по мне, мне нравятся хуки, я не очень люблю ООП) А возможно все это дело вкуса просто)) хз короче)
Если Дэн это как наш Марк цукерберг, то ты как Кайл Симпсон, ты оффигительный исследователь!! Молодец!!
Спасибо!) будем стараться и дальше исследовать)
Жирный лайк Синяку!
Жирный лайк Синяку!!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!!!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!
Жирный лайк Синяку!