Предотвратить повторную реорганизацию определенного дочернего компонента

У меня есть компонент реакции, который условно отображает несколько дочерних компонентов. Упрощенный код:

render(): {
  const component1 = condition ? renderComponent2() : null;
  const component2 = renderComponent2();

  return (
    <div>
      {component1}
      {component2}
    </div>
  );
}

Проблема заключается в том, что component2 уничтожается и повторно отображается всякий раз, когда изменяется значение condition. Я пытаюсь предотвратить это и сохранить оригинальный элемент. Я попробовал добавить key в component2 без везения.

[edit] Это происходит даже тогда, когда component1 всегда существует, и я меняю флаг на нем, чтобы скрыть его или нет с помощью CSS:/

Ответы

Ответ 1

Составьте примерный код, ваш component2 не будет уничтожен и снова заново установлен. React будет запускать любые render и, возможно, другие методы жизненного цикла, но React будет Обновить компонент в DOM на месте.

Возможно, ваш код более сложный. Который вызывает реакцию на мысль, что вы не перерисовываете component2, а вместо этого пытаетесь отобразить совершенно новый компонент. Но опять же, из вашего примера кода это неясно.

Вы можете найти доказательство концепции codepen здесь, которая делает следующее:

  • Он отображает 2 экземпляра component2 с зеленым фоном.
  • Кнопка может (незаконно) менять цвет фона первого компонента на красный, за пределами реагировать на знания.
  • Нажав кнопку, реакция будет повторно отображать 2 компонента.
  • Цвет фона остается красным, что является доказательством того, что реагирует только на компонент обновления и не уничтожает.

React будет не reset цвет фона зеленым, потому что реакция думает (из своего виртуального DOM), что цвет фона неизменен и все еще зеленый.

UPDATE: теперь код содержит дополнительные доказательства того, как это может произойти:

  • если вы измените тип возвращаемого HTML (от элемента <p> до элемента <h1> в доказательстве концепции)
  • response НЕ распознает его как один и тот же элемент и уничтожает оригинал и вставляет новый элемент.

PS: потому что ваш примерный код создает компонент через вызов метода, любые методы жизненного цикла (например, shouldComponentUpdate) НЕ должны применяться. Рендеринг компонентов с помощью методов должен выполняться только для простых компонентов, то есть для элементов реакции. См. официальные документы здесь:

A ReactElement - это легкий, безстоящий, неизменный, виртуальный представление элемента DOM.

Ответ 2

Вы пытались сделать это с помощью shouldComponentUpdate? Это именно то, для чего нужно использовать эту функцию. Просто добавьте его в свой component2 и добавьте правильное состояние внутри.

Ответ 3

Если в condition есть изменение состояния, компонент будет повторно отображать сам, что означает, что component2 тоже будет изменен.