React, как остановить повторный рендеринг приложения с помощью reselect?

#reactjs #react-redux #reselect

#reactjs #реагировать-redux #повторный выбор

Вопрос:

Вот код: codepen . Проблема в том, что когда я добавляю новое задание или изменяю состояние выполнения на завершено, другие задачи также будут повторно отображаться?

Это какой-нибудь способ остановить это?

Ответ №1:

Если вы используете функциональные компоненты, используйте React.memo, а если используете компоненты на основе классов, используйте React .PureComponent

React.memo: https://scotch.io/tutorials/react-166-reactmemo-for-functional-components-rendering-control

Реагировать.Чистый компонент: https://ozmoroz.com/2018/09/what-is-purecomponent /

Идея, стоящая за этим, заключается в проверке реквизитов компонента и повторном рендеринге только в том случае, если реквизит изменен. Эти компоненты используют метод жизненного цикла shouldComponentUpdate внутренне и на основе изменений prop решают, следует ли повторно отображать компонент.

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