React Component ИЛИ React PureComponent

Can I use React PureComponent everywhere?

Да, вы можете, но все больше и больше пытаетесь использовать Функциональный компонент. В случае компонента Class, сохраните его маленьким и расширьте до PureComponent или Component, если вы хотите реализовать свой собственный shouldComponentUpdate, посоветуйте сделать это, когда на минимальных несложных (вложенный глубокий массив или / и объект) реквизиты меняют потребности вашего компонента обновить.

Is it safe to use shouldComponentUpdate?

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

Упомянутый средний пост пытается продать пакет response-update-if-changed, который кажется неплохим вариантом для начала, но когда вы понимаете, что

the real problem statement is all about performance optimization (refer https://reactjs.org/docs/optimizing-performance.html)

Как избежать ненужных проверок для определения возможности обновления компонента и избежать нежелательного повторного рендеринга?

• Передать реквизит для компонента, который, как вы знаете, является нужный для компонента и собирается менять
• В случае, если много реквизита отправляется компоненту и на очень несколько ограниченных изменений свойств, компонент необходимо обновить и повторно рендерится, тогда вы можете очень хорошо реализовать свой собственный shouldComponentUpdate (см. Пример в приведенной выше общей ссылке оптимизации реакции). Но будьте осторожны с реквизитами, которые являются массивами и объектами, так как различать их - боль, особенно глубокие и громоздкие вложенные.
• Используйте Функциональный (чистый и без состояния) компонент для вашего пользовательского интерфейса, в то время как для его логики представления (показать-скрыть, отсортировать и т.д.) будут присутствовать компоненты, которые будут Класс (с сохранением состояния и чистый, расширяя его до React.PureComponent), имеющий дочернюю опору как функцию; с помощью HOC, связывающего логический компонент и компонент UI
• Используйте React Context API при попытке передать реквизиты между предком и потомком, особенно если они находятся на уровне, превышающем уровень родительского компонента для дочернего компонента.

Использование последнего метода, который полностью посвящен Расширенные шаблоны реакции, - лучший способ оптимизировать производительность и кодовую базу. Чтобы лучше понять это, обратитесь к Тупые и умные компоненты и Презентационные и контейнерные компоненты.

import React, { PureComponent } from 'react'
export default Class PureComponent  extends React.PureComponent{
}

import React, { Component } from 'react'
export default Class NormalComponent  extends React.Component{
}

PureComponent не имеет методов жизненного цикла

PureComponent check shallow comparison and re-render when Needed
Use Pure Component when used when primitive data types int string boolean etc,

Примечание:-

• PureComponent не имеет методов жизненного цикла
• Функция shouldcomponentupdate () React PureComponent только поверхностно сравнивает объекты.