Devo avvolgere tutti i miei componenti con React.memo () se non si aspetta alcun oggetto di scena?

Aug 18 2020

Sebbene sia ovvio il motivo per cui ReactReact.memo non esegue per impostazione predefinita tutti i suoi componenti funzionali, e dovremmo avvolgere noi stessi i nostri componenti funzionali come e quando necessario.

Nel mio caso, ho un grande progetto React con una struttura come questa:

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 */}
   </>
  );
};

Tutta la mia logica aziendale è all'interno di redux e i componenti utilizzano useSelectorinternamente per ottenere i dati dal negozio.

Ha senso avvolgere tutti i componenti del mio figlio React.memo, poiché una modifica in un selettore a livello di root fa sì che l'intera app venga nuovamente renderizzata?

In precedenza con connectstavamo ottenendo automaticamente un componente che è stato memoized confrontando puntelli personalizzati e memorizzare il valore passato come oggetti di scena al componente, quindi dovremmo ora manualmente sempre fare React.memodurante l'utilizzo useSelectorin un componente non ricevere alcun oggetti di scena?

Risposte

1 BryanDowning Aug 18 2020 at 06:08

Direi che dovresti considerare l'utilizzo React.memoper quei componenti figlio che non accettano alcun oggetto di scena. Consiglio vivamente questo articolo:https://dmitripavlutin.com/use-react-memo-wisely/

2.1 Il componente viene visualizzato spesso con gli stessi oggetti di scena
Il caso migliore di avvolgere un componente in React.memo () è quando ti aspetti che il componente funzionale venga visualizzato spesso e di solito con gli stessi oggetti di scena.

Poiché i componenti di cui stai chiedendo non accettano alcun oggetto di scena, ciò significa che gli oggetti di scena non cambieranno mai. Pertanto, è ovvio che l'utilizzo React.memo potrebbe evitare i cicli di rendering. Nota questo importante avvertimento dallo stesso articolo:

5. React.memo () è un suggerimento sulle prestazioni
Rigorosamente, React utilizza la memoizzazione come suggerimento sulle prestazioni.

Sebbene nella maggior parte delle situazioni React eviti il ​​rendering di un componente memoizzato, non dovresti contare su questo per prevenire il rendering.