Zapobieganie ponownemu renderowaniu określonego komponentu potomnego

Question

Mam komponent reagujący, który warunkowo renderuje kilka komponentów podrzędnych. Kod jest tylko uproszczona:

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

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

Problemem jest to, że component2 jest uzyskiwanie zniszczone i ponownie wydanego Ilekroć condition zmian. Próbuję temu zapobiec i zachować oryginalny element. Próbowałem dodać key do component2 bez powodzenia.

[edytuj] Dzieje się tak nawet wtedy, gdy component1 zawsze istnieje i zmienić flagę, aby go ukryć lub nie z CSS:/

Answer 1

Czy próbowałeś to robić z shouldComponentUpdate? Właśnie do tego powinna być użyta ta funkcja. Po prostu dodaj go do swojego component2 i dodaj odpowiedni warunek w środku.

Answer 2

Utwórz przykładowy kod, twój component2 nie zostanie zniszczony i ponownie zamontowany. React będzie działał niezależnie od render i prawdopodobnie innych metod cyklu życia, ale React będzie Aktualizacja komponentu w DOM na miejscu.

Może Twój kod jest bardziej skomplikowany. Które przyczyny reagują, aby myśleć, że nie renderujesz ponownie component2, ale zamiast tego próbujesz renderować cały nowy komponent. Ale znowu z twojego przykładowego kodu to nie jest jasne.

można znaleźć proof of concept codepen here, który wykonuje następujące czynności:

• Świadczy 2 instancje component2, z zielonym tłem.
• Przycisk może (nielegalnie) zmienić kolor tła pierwszego składnika na czerwony, poza wiedzą o reakcji.
• Klikając przycisk, reaguj ponownie renderuje 2 komponenty.
• Kolor tła pozostaje czerwony, co jest dowodem, że reaguje tylko na aktualizację komponentu i nie niszczy.

React NIE resetuje koloru tła na zielony, ponieważ reaguje on (z wirtualnego DOM), że kolor tła jest niezmieniony i nadal zielony.

UPDATE: codepen teraz zawiera również kolejny dowód tego, jak może się zdarzyć:

• jeśli zmienisz typ HTML zwrócony (od <p> elementem <h1> elementu w proof of concept)
• reagowania woli NIE rozpoznaje go jako tego samego elementu i niszczy oryginał i wstawia nowy element.

PS: ponieważ Twój kod przykładowy tworzy komponent poprzez wywołanie metody, nie należy stosować żadnych metod cyklu życia (takich jak shouldComponentUpdate). Renderowanie składników za pomocą metod powinno być wykonywane tylko dla prostych komponentów, tj. Elementów reagujących.Zobacz official docs here:

ReactElement jest lekki, bezpaństwowcem, niezmienne, wirtualny reprezentacja elementu DOM.

Answer 3

Jeśli nastąpi zmiana stanu w condition składnik ponownie czyni się, co oznacza, że ​​component2 będą zmieniane zbyt.