87 - shouldComponentUpdate, PureComponent, memo - React JS

https://it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.

Поддержать меня можно на patreon   / 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:    • Курс "React JS - путь самурая 1.0", у...  


* Сайты:
https://it-kamasutra.com
https://it-incubator.eu
https://samuraijs.com



* Мы в соц. сетях:
https://vk.com/itkamasutra
  / itkamasutra  
https://telegram.me/itkamasutra

* Мои личные VK и Insta:
https://vk.com/d.kuzyuberdin
  / it.kamasutra.dimych  

#shouldComponentUpdate #PureComponent #memo #reactJS