ReactJS - Влияние производительности на setState в родительском компоненте

Question

Я создаю большое приложение, используя React, где общий родительский компонент обрабатывает все состояние для нескольких дочерних элементов. Некоторые из этих детей представляют списки из более чем 1000 предметов.

Я понимаю, что переключение булева внутри родителя с setState приведет к повторной рендерингу родителя, в свою очередь, отрисовке всех его детей.

Мой вопрос в том, что если ни один из элементов списка для ребенка не изменится, значит ли повторная реновация заставляет ребенка циклически перебирать и строить список gargantuan - каждый раз, когда родительский повторный рендеринг?

Где виртуальная DOM играет роль в этом? Регенерирует ли ребенок список, но DOM никогда не обновляется, потому что diff видит, что элементы списка не изменились?

Редактировать: Наконец, если это так, то как свойство влияет на повторный рендеринг списка? Если у меня есть 1000 предметов с уникальными ключами, но у 3 предметов есть ключи, которые являются null (что означает, что они имеют одинаковое значение ключа) , то делает весь список повторно рендерингом?

Answer 1

Регенерирует ли ребенок список, но DOM никогда не обновляется, потому что diff видит, что элементы списка не изменились?

Да точно. Вы можете прочитать об этом более подробно здесь: https://facebook.github.io/react/docs/reconciliation.html

Обычно эта операция выполняется так быстро, что вы вряд ли сможете сказать, однако в какой-то момент патч diff станет медленным. Переворот булевы, вероятно, не имеет большого значения, но переворот, который булеван при 60 fps, может вызвать некоторый удар.

Есть, как правило, умные вещи, которые вы можете сделать, чтобы предотвратить какое-либо заметное отставание, но реализация shouldComponentUpdate всегда является выбором.

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

Пока вы там, прочитать о React.PureComponent в случае, если это то, что вас интересует.