React Redux воссоздает всю Виртуальную DOM каждый раз, когда действие отправляется из Магазина?

Question

Разве это не очень дорогое дело?

Например, если я нажал на кнопку, которая что-то переключает... Нужно ли React воссоздать всю Virtual DOM только для этого одного действия и разнести его?

Answer 1

Когда вы звоните React Redux connect на компонентах, вы оборачиваете их в компонент под названием Connect, Компонент читает магазин из <Provider>контекст. Когда вы отправляете действие, хранилище Redux обновляется, что вызывает все connectкомпоненты, чтобы получить новые реквизиты (определенные в mapStateToProps во время обновления магазина.

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

Остальное следует обычным правилам рендеринга React. Если оболочка HOC подключенного компонента подписывается на измененное поле хранилища, оно будет обновляться, что приведет к повторной визуализации подключенного компонента. Вы могли бы реализовать shouldComponentUpdate в подключенном компоненте, если вы не хотите, чтобы он повторно отображался.

Рекомендации:

• https://github.com/reduxjs/react-redux/blob/master/src/components/Provider.js
• https://github.com/reduxjs/react-redux/blob/master/src/components/connectAdvanced.js