Дадаць канал

87 - shouldComponentUpdate, PureComponent, memo - React JS

  • 24.08.2019
  • 39 137 праглядаў
  • 👍 4 339
  • 💬 567
https://it-incubator.io/education/?utm_source=youtube&utm_medium=it-k&utm_campaign=education - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость. Поддержать меня можно на patreon https://www.patreon.com/itkamasutra или оформив спонсорство на данном канале. Помогайте друг другу вот здесь: https://t.me/reactjs_samurai API: https://social-network.samuraijs.com/ shouldComponentUpdate (должна компонента обновиться) - это метод жизненного цикла. React вызывает этот метод у компоненты, чтобы спросить компоненту: нужно ли вызывать повторно render, получу ли я, React, от тебя новый JSX. Для этого я дам тебе, компонента, новые пропсы и стейт (а может и не новые, а те же самые, что и были ранее) и ты на основе логики своей внутренней верни мне из этого метода true или false... Если вернешь false, то я не буду вызывать render Метод и крут и опасен. Есть много деталей. Тем не менее он крут))) Можно сделать поверхностное сравнение объектов и понять, изменились ли данные на входе компонент (props + state), что повлияет на выход (JSX). Такую простую проверку в этом же методе делает компонент PureComponent. И если мы отнаследуем нашу классовую компоненту не от React.Component, а от React.PureComponent, то мы получим реализованный за нас метод shouldComponentUpdate. Это касается классовых компонент. А как нам автоматизировать перерисовку (не вызывать перерисовку, если это не нужно) для функциональных компонент? Для этого есть HOC (High Order Component) React.memo, на вход которого мы подаём компонент, который хотим оптимизировать, а на выходе получаем контейнерную компоненту, которая займётся этой проверкой и перерисовкой (хз, наверное внутри создаётся классовая контейнерная компонента PureComponent, но это неточно, нужно гуглить)... Напишите в комменте, если знаете ответ или нагуглили. Летим, самураи!!! Уроки по React JS: https://www.youtube.com/playlist?list=PLcvhF2Wqh7DNVy1OCUpG3i5lyxyBWhGZ8 * Сайты: https://it-kamasutra.com https://it-incubator.eu https://samuraijs.com * Мы в соц. сетях: https://vk.com/itkamasutra https://instagram.com/itkamasutra https://telegram.me/itkamasutra * Мои личные VK и Insta: https://vk.com/d.kuzyuberdin https://www.instagram.com/it.kamasutra.dimych/ #shouldComponentUpdate #PureComponent #memo #reactJS
Катэгорыя: Тэхналёгіі
Канал: IT-Kamasutra

Іншыя відэа з гэтай праграмы