Я знаю, что React выполняет повторную визуализацию, когда изменяется состояние или реквизит (или когда мы вынуждаем компонент выполнять повторную визуализацию). Я также знаю, что React перерисовывает дочерние компоненты компонента, когда он перерисовывается.

Я заметил, что React выполняет рендеринг дочернего компонента, даже если его реквизиты (дочерние реквизиты) не изменились, поэтому, когда родительский компонент передает те же реквизиты, что и ранее.

Это почему? И выполняет ли React рендеринг дочернего компонента, который полностью лишен состояния и не имеет доступа?

2
Karol 30 Апр 2020 в 15:43

2 ответа

Почему React делает это по умолчанию, потому что он не знает, чтобы не выполнять повторную визуализацию, когда состояние одинаково, если только вы не используете памятку для этих компонентов с пакетом, подобным reselect.

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

1
Victor Whyte 30 Апр 2020 в 12:50

Если вы хотите, чтобы дочерние компоненты не отображались повторно, вы должны использовать React.memo , PureComponent или shouldComponentUpdate ловушка жизненного цикла.

Каждая из этих трех опций говорит React, что если входные данные для вашего компонента (реквизита) не изменяются, то нет смысла повторно выполнять рендеринг компонента, поскольку компонент не изменится.

PureComponent или shouldComponentUpdate должны быть вашими опциями перехода, если вы работаете с компонентами класса. По сути, PureComponent просто реализует shouldComponentUpdate для вас.

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

Вам следует определенно использовать один из этих трех вариантов для повторного выбора при работе с реагирующими компонентами. Повторный выбор предназначен для запоминания селекторов в избыточном (или просто для вызова общих функций). Он не предназначен для запоминания компонентов реакции.

Обычно я использую повторный выбор, чтобы обеспечить стабильность компонентов (при работе с Connect) и предотвратить повторную обработку сложных данных при каждом рендеринге.

0
Zachary Haber 30 Апр 2020 в 13:27