Herhangi bir aksesuar beklemiyorsa tüm bileşenlerimi React.memo () ile sarmalı mıyım?

Aug 18 2020

ReactReact.memo'yu neden varsayılan olarak tüm işlevsel bileşenlerine uygulamadığımız açık olsa da, işlevsel bileşenlerimizi gerektiğinde ve gerektiği zaman paketlemeliyiz.

Benim durumumda şöyle bir yapıya sahip büyük bir tepki projem var:

const MyBigApp = () => {
  const shouldShowX = useSelector(getShouldShowX);
  const shouldShowY = useSelector(getShouldShowY);
  // Many more selectors

  return (
    <>
      {shouldShowX && <ComplexComponentX />}
      {shouldShowY && <ComplexComponentY />}
      {/* many more components based on different selectors like above */}
   </>
  );
};

Tüm iş mantığım redux içinde ve bileşenler useSelectormağazadan veri almak için dahili olarak kullanıyor .

React.memoKök düzeyindeki herhangi bir seçicide bir değişiklik tüm uygulamamın yeniden oluşturulmasına neden olduğundan, tüm alt bileşenlerimi sarmak mantıklı olur mu?

Daha önce, connectözel donanımları ve bileşene aksesuar olarak aktarılan mağaza değerini karşılaştıran hatırlanmış bir bileşeni otomatik olarak alıyorduk, bu nedenle artık herhangi bir sahne almayan bir bileşende kullanırken her zaman manuel olarak mı yapmalıyız ?React.memouseSelector

Yanıtlar

1 BryanDowning Aug 18 2020 at 06:08

React.memoHerhangi bir sahne kabul etmeyen alt bileşenler için kullanmayı düşünmeniz gerektiğini iddia ediyorum . Bu makaleyi şiddetle tavsiye ediyorum:https://dmitripavlutin.com/use-react-memo-wisely/

2.1 Bileşen genellikle aynı props ile işler
. Bir bileşeni React.memo () içinde sarmanın en iyi durumu, işlevsel bileşenin sıklıkla ve genellikle aynı props ile oluşturulmasını beklediğiniz zamandır.

Sorduğunuz bileşenler herhangi bir desteği kabul etmediğinden, bu, sahne donanımlarının asla değişmeyeceği anlamına gelir. Bu nedenle, kullanarak o nedenle standları React.memo olabilir döngüleri hale kaçının. Aynı makaledeki bu önemli uyarıya dikkat edin:

5. React.memo () bir performans ipucudur
Kesinlikle, React bir performans ipucu olarak notu kullanır.

Çoğu durumda React, hafızaya alınmış bir bileşeni oluşturmaktan kaçınırken, oluşturmayı önlemek için buna güvenmemelisiniz.