Оптимизировать повторные рендеринги с shouldComponentUpdate
Пока, если какой-либо компонент получает новое состояние или новые свойства, он повторно отображает себя и всех своих детей. Обычно это нормально. Но React предоставляет метод жизненного цикла, который вы можете вызывать, когда дочерние компоненты получают новое state или props , и по заданной логиче четко решают стоит ли повторно выполнять рендеринг или нет. Этот метод называется shouldComponentUpdate() , и он принимает параметры nextProps и nextState. Этот метод является полезным способом оптимизации производительности. Например, поведение по умолчанию заключается в том, что ваш компонент повторно рендерится, когда он получает новые props, даже если props не изменились. Вы можете использовать shouldComponentUpdate() чтобы предотвратить это, сравнив props . Метод должен возвращать логическое значение (то есть true или false), которое сообщает React, обновлять или не обновлять компонент. Вы можете сравнить текущие свойства ( this.props ) со следующими свойствами ( nextProps ), чтобы определить, нужно ли вам обновлять или нет, и соответственно вернуть true или false .
Метод shouldComponentUpdate() добавляется в компонент OnlyEvens. В настоящее время этот метод возвращает true так что OnlyEvens повторно рендерится каждый раз, когда он получает новые props. Измените метод так, чтобы OnlyEvens повторно рендерился только если новое свойство value четное. Нажмите кнопку Add и посмотрите порядок событий в консоли вашего браузера, когда запускаются другие хуки жизненного цикла.
Подсказка: При решении задачи вам понадобится оператор поиска остатка от числа %.