Как избежать лишних или ненужных рендеров дочернего компонента при переключении представлений?

Question

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

Codesandbox .

Как видите, я даже пытался использовать React.memo, но rendered side все равно печатает.

Answer 1

Дочерний компонент, <Side />, отображается каждый раз, потому что: вы визуализируете этот дочерний компонент как дочерний компонент <SecondaryTemplate /> или <PrimaryTemplate />. В то время как вы программно (переключая представление) визуализируете любой из этого, другой немедленно полностью размонтируется из DOM, поскольку <Side /> является дочерним элементом компонента, который только что был отключен, он больше не существует в DOM, а когда другой отображает его, он рендерит свой дочерний компонент, потому что алгоритм React, работающий в виртуальной DOM, никоим образом не знает о существовавшем ранее, поэтому нет смысла ожидать, что он будет повторять только один раз, независимо от того, изменится он или нет.

Чтобы понять это, вы можете посмотреть на это: https://codesandbox.io/s/vigorous-khayyam-14ls0?file= / src / MainComponent. js

Где я разветвлял ваш код, посмотрите на консоль, вы увидите, что когда вы переключаете представление на один компонент размонтируется (а значит, и его дочерний элемент <Side />).