Почему примирение реагирует на постоянные сибилинги при изменении порядка

Question

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

Я сделал простой пример:

class ComponentA extends React.Component {

    state = {
        first: true
    }

    clickHandler = () => {
        this.setState({
            first: !this.state.first
        })
    }

    render() {
        return (
            <div className='top'>
                {this.state.first ? <span>xyz</span> : undefined}
                <div>abc</div>
                <div>efg</div>
                <button onClick={this.clickHandler}>click me</button>
            </div>)
    }
}

При нажатии первый дочерний элемент (элемент span) будет входить и выходить из списка дочерних элементов. С точки зрения React, повторяя одну за другой, все должно выглядеть так, как будто все элементы изменились. Поэтому React должен повторно обработать DOM для всех этих 4 дочерних элементов (включая кнопку).

Но, проверяя инспектор DOM в Firefox и Chrome, я вижу выделение только на элементе span , а не на всех четырех, то есть DOM сохраняется для трех неизмененных элементов. Почему?

(выделение не видно на этом изображении, но элемент span подсвечивается при нажатии кнопки)

Answer 1

В моем примере происходит то, что первый дочерний элемент (span) никогда не удаляется из массива дочерних элементов, а переключается между span и undefined. Таким образом, всегда есть 4 ребенка, и переупорядочение (смещение индекса) никогда не происходит.

Вот почему response знает, что соответствует элементам, и обновляет только span DOM, оставляя остальные 3 такими, какие они есть.

Answer 2

React сравнивает атрибуты элемента в этом случае.Из документов React:

Элементы DOM одинакового типа

При сравнении двух элементов React DOM одного типа React просматривает атрибуты обоих, сохраняет один и тот же базовый DOMузел, и только обновляет измененные атрибуты.Например:

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

Вы можете прочитать следующую статью, где этот феномен объясняется более подробно.https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Из статьи:

Позвольте мне объяснить, ключ - это единственное, что React использует для идентификации элементов DOM.Что произойдет, если вы добавите элемент в список или удалите что-то посередине?Если ключ такой же, как и раньше, React предполагает, что элемент DOM представляет тот же компонент, что и раньше.Но это уже не правда.