Как react различает компоненты, находящиеся в одной позиции UI-дерева?

Question

[johnymkp]

В документации по реакту написано, что он сопоставляет состояние и компонент, основываясь на позиции компонента в итоговом UI-дереве. Т.е. если некий компонент оказывается в одном и том же месте, то стало быть это считается один и тот же компонент и вот его состояние. Подчеркивается, что важна именно позиция в итоговом дереве, а JSX как бы и не важен (хотя как он может быть не важен, если именно на основе него строится дерево).

Я написал пару примеров на основе этой информации. Пример 1. Тут счетчик оказывается на одном и тот же месте и при его переименовании состояние сохраняется.

Но вот Пример 2. Написан по аналогии с этим примером из документации. Здесь счетчик при переименовании сбрасывается.

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

Answer 1

[Alexandroppolus]

пример 1:

<>
      {
        rename ? (
          <div><Counter title='Щелкунчик' /></div>
        ) : (
          <div><Counter title='Counter' /></div>
        )
      }
      <button onClick={() => setRename(!rename)}>Переименовать</button>
    </>

здесь у тебя первым чилдом в реактФрагменте всегда будут одни и те же фигурные скобки (да, это как бы отдельная нода в дереве реакта). В них всегда первый чилд - div (реакт определяет, что это один и тот же тип элемента), а в нем - Counter (снова определяемый как один и тот же). Потому для div и Counter не происходит перемонтирования, а только обновление пропсов.

пример 2:

<>
      { rename && <div><Counter title='Щелкунчик' /></div> }
      { !rename && <div><Counter title='Counter' /></div> }
      <button onClick={() => setRename(!rename)}>Переименовать</button>
    </>

здесь у Фрагмента первый и второй чилды - фигурные скобки (т.е. это два разных независимых чилда). Ну и соответственно, в них то появляются, то исчезают свои чилды (элементы div с чилдом Counter), тут никаких связей между оными элементами из разных фигурных скобок не устанавливается.

Comments

[johnymkp]

А, т.е. имеется ввиду не то html-дерево, которое получается в итоге в браузере, а реактовское дерево?
P.S. В самой документации реакта есть информация про всякие вещи типа жизненного цикла компонента, монтирования\размонтирования и т.д.? Или надо отдельно гуглить?

[Alexandroppolus]

johnymkp,

имеется ввиду не то html-дерево, которое получается в итоге в браузере, а реактовское дерево?

да, само собой.
причем даже не дерево с фиберами, а именно jsx - то, что сравнивается во время реконсиляции