реагировать js - ключ vs компоненты должны обновить

Question

Я знаю, что использование "key" prop на любом компоненте React будет повторно монтировать, если есть изменение значения ключа.

Использование "ComponentShouldUpdate" жизненный цикл метод просто обновит компонент вместо повторного рендеринга.

В каких случаях мы должны использовать «ключ» против «ComponentShouldUpdate»? Обеспечивает ли использование одного преимущества перед другим?

Answer 1

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

• компонент обновляется при изменении свойств или состояния, независимо от того, есть ли у вас ключи или нет в компоненте

• shouldComponentUpdate выполняется каждый раз перед рендерингом и сообщает, нужно ли повторно рендерить компонент или нет. для обычных компонентов метод просто возвращает true. вы можете перезаписать его. чистые компоненты выполняют поверхностную проверку.

• ключи помогают реагировать только на то, что изменилось во время рендеринга / повторного рендеринга. они не останавливают / не запрещают повторный рендеринг.

Вы должны использовать shouldComponentUpdate для оптимизации.

Answer 2

ключ и componentDidUpdate используются для совершенно разных целей.

Из документации

React реализует эвристию c Алгоритм O (n), основанный на двух предположениях:

1. Два элемента разных типов будут давать разные деревья.
2. Разработчик может намекнуть, какие дочерние элементы могут быть стабильными при разных рендерингах с ключевой опорой.

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

С другой стороны, componentDidUpdate будет запускаться после обновления компонента, то есть свойства или состояния для указанного c компонент был изменен. Обновление не приведет к удалению дерева из состояния.

Вы не должны использовать ключ в обычных случаях и позволить срабатыванию props / state change componendDidUpdate и обрабатывать ваши logi c там. Ключ используется в некоторых случаях, когда у вас есть большое количество logi c состояний и вы хотите сбросить c состояния logi *1033* в исходное состояние, т.е. перемонтировать компонент с нуля. По сути, вам следует избегать использования ключа для размонтирования и повторного монтирования вашего компонента, поскольку эта операция влияет на производительность.