Devo avvolgere tutti i miei componenti con React.memo () se non si aspetta alcun oggetto di scena?
Sebbene sia ovvio il motivo per cui React
React.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 useSelector
internamente 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 connect
stavamo 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.memo
durante l'utilizzo useSelector
in un componente non ricevere alcun oggetti di scena?
Risposte
Direi che dovresti considerare l'utilizzo React.memo
per 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.