Всем привет. Ребят подскажите пожалуйста, у меня есть 6 товаров

Question

Всем привет. Ребят подскажите пожалуйста, у меня есть 6 товаров

на странице, и в каждой из них есть кнопка добавить в корзину, при нажатии она меняется на удалить из корзины. Вопрос в том что в devTools мне показывает что при нажатии на одну кнопку происходит ререндер всех кнопок, это так и должно быть?

#frontend #javascript #programming #react.js #russian

0

18.05.2022

7 ответов

10 просмотров

Александр Автор вопроса

Может нужно что-то уточнить?

0

18.05.2022

Александр Автор вопроса

Sarevok
Испугался? На самом деле реакт так просто работае...

Но сама карточка не перерендеривается. Тупо компонент кнопки

0

18.05.2022

Александр Автор вопроса

Интересно

0

18.05.2022

Sarevok

Александр
Интересно

Тут главное понять ПЕРЕРЕНДЕР ЭТО НЕ ПЕРЕРИСОВКА. Перерендер это вычисления, цель которых определить, нужно ли перерисовать релальные элементы DOM. т.е. не каждый перендер сопровождается модификацией реального DOM

0

18.05.2022

Александр Автор вопроса

Sarevok
Тут главное понять ПЕРЕРЕНДЕР ЭТО НЕ ПЕРЕРИСОВКА....

Ну те же самые кнопки из других товаров на которые я не нажимаю, они и не меняются, но перерендер есть. Просто интересно было почему так и должно ли так быть.

0

18.05.2022

Sarevok

Александр
Ну те же самые кнопки из других товаров на которые...

Это сделано для того что бы не перерисовывать DOM элементы, которые не изменились. Алгоритм сравнения называеться по моему, реконсилинг. Собственно по этому реакт такой и быстрый. ПОтому что VDOM обрабатывается НАМНОГО быстрее чем выполнение реальных операций с DOM И благодаря реконсилингу и VDOM, колво операций с DOM уменьшается до мниимально необходимого.

0

18.05.2022

Sarevok · Accepted Answer

Испугался? На самом деле реакт так просто работает. любое изменение состояния или например стэйта редакса (на данные из которого подписан компонент), вызывает перерендер. Так и задумано. Далее результатом работы ререндера компонента обычно являеться объект VDOM. Этот объект потом используется для сравнения: какие объееты реального DOM удалить изменить или добавить. Поэтому сам перерендер не страшен. СТрашно если при КАЖДОМ перерендере у тебя выполняются расчеты со сложностью O(n) > n. (если меньше, то пофиг) Вот что бы их не делать надо юзать useMemo или useCallback+ React.memo (для дочерних компонентов), ну или reselect для redux. Это позволит замемоизировать тяжелые вычисления и не делать их при каждом вычислении.

169 похожих чатов

Всем привет. Ребят подскажите пожалуйста, у меня есть 6 товаров

7 ответов

Похожие вопросы