Оптимизируйте производительность приложения React с помощью shouldComponentUpdate
Технофуннель представляет еще одну статью о повышении производительности вашего приложения React с помощью shouldComponentUpdate.
Что такое shouldComponentUpdate в React?
shouldComponentUpdate - это одно из событий жизненного цикла, которое запускается перед повторной визуализацией компонента. Как следует из названия, он проверяет условие и определяет, должен ли компонент обновляться или нет. При каждом обновлении данных о состоянии компонента вызывается shouldComponentUpdate.
Внутри этой функции мы можем указать условия, которые определяют, нужно ли выполнять дальнейший рендеринг или нет. Эта функция возвращает логическое значение, если свойства компонента меняются или вызывается setState. В обоих случаях компонент имеет тенденцию к повторному рендерингу. Мы можем поместить пользовательскую логику в это событие жизненного цикла, чтобы решить, будет ли вызываться функция рендеринга компонента или нет.
Эта функция принимает
nextStateиnextPropsв качестве входных данных и может сравнивать их с текущими значениями свойств и состояний, чтобы решить, есть ли необходимость в повторном рендеринге компонентов.
Использование shouldComponentUpdate в React
У нас есть страница, на которой отображаются данные о сотрудниках. Каждый сотрудник содержит определенные свойства, такие как имя, возраст и должность.
Из всех этих деталей пользователь хочет отобразить на моей веб-странице только имя и возраст выбранного сотрудника. Во время работы над приложением предположим, что значение «назначение» для сотрудника обновляется. Мы используем «setState» для обновления «обозначения» сотрудника в событии жизненного цикла «componentDidMount», но это обозначение не отображается на странице, поэтому оно не повлияет на представление. Страница по-прежнему будет отображаться таким же образом.
Поскольку назначение сотрудника не является частью представления, в идеале его не нужно обновлять. Мы можем добавить в компонент настраиваемую логику, чтобы увидеть, требуется ли компоненту обновлять представление или нет. В зависимости от того, были ли обновлены имя или возраст сотрудника, мы хотели бы вернуть true или false обратно из функции.
Выше приведен код того же. В shouldComponentUpdate мы проверяем, совпадают ли новые значения имени и возраста с начальными значениями имени и возраста. Поскольку ни одно из этих свойств не обновилось, мы не хотели бы повторно отображать компонент, поскольку значение обозначения не отображается на экране. Изменение значения «обозначение» не оказывает никакого визуального воздействия на представление компонента.
Поскольку мы вернули false из компонента, дальнейшее повторное отображение страницы не будет выполнено, и события жизненного цикла, такие как «componentDidUpdate», не будут запускаться, что позволит сохранить часть выполнения в коде React.
Передача значения true из «shouldComponentUpdate» означает, что компонент может быть повторно отрисован, и наоборот. Итак, если «shouldComponentUpdate» используется правильно, мы можем оптимизировать производительность компонента приложения. Сравнивая начальные состояния и свойства, мы можем принять решение о том, нужно ли повторно визуализировать компонент или нет. И это повысит производительность приложения за счет уменьшения количества циклов повторной визуализации.
Дополнительную информацию о методах оптимизации см. в следующих источниках:
Больше контента на plainenglish.io
