повторный рендеринг компонентов

Question

У меня есть компонент, который подключен к глобальному хранилищу и получает некоторые данные из глобального хранилища. из некоторой части этих данных отправляется в другой компонент через реквизит, и внутри этого компонента я сгенерировал требуемый JSX на основе данных. Также внутри дочернего компонента также используется mapdispatchtoprops, который также подключен к глобальному хранилищу. Сценарий проблемы - повторное рендеринг дочернего компонента, зависит от данных глобального хранилища. Ключ для глобального магазина как -

foods : {
  'list' : '',
  's'  : '',
  fetching : 0,
  slist : '',
  category : '',
  cproducts : ''
}

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

Answer 1

Компоненты имеют метод render, который возвращает разметку JSX, которую он отображает в DOM.Для обнаружения изменений React использует локальное состояние, которое является локальным только для компонента, когда состояние изменяет компонент, и его дочерние элементы повторно отображаются для обновления пользовательского интерфейса измененного состояния.

Цитата изРеакция документации:

Эти компоненты не должны сохранять внутреннее состояние, не иметь резервных копий и не иметь методов жизненного цикла компонента.Они являются чисто функциональными преобразованиями их ввода, с нулевым шаблоном.Однако вы все равно можете указывать .propTypes и .defaultProps, устанавливая их в качестве свойств функции, так же, как вы устанавливаете их в классе ES6.PURE COMPONENT является одним из наиболее важных способов оптимизации приложений React.Использование Pure Component значительно повышает производительность, поскольку уменьшает количество операций рендеринга в приложении.

Поэтому измените ваше приложение на следующее:

import React, {PureComponent} from 'react';
class Sample extends PureComponent {
  render() { 

        return (
<div>your structure here</div>
)
}
}

export default Sample;

Пожалуйста, прочитайте больше нареагировать PureComponent. здесь