Opnieuw renderen versus commits: wanneer optimaliseren

Doel: Begrijp wat het verschil is tussen renderen en vastleggen.

• Renderen: de volgende gebruikersinterface berekenen
• Vastleggen: wijzigingen naar de DOM schrijven
• Optimalisaties: het renderen kan DOM-werk overslaan

Opnieuw renderen gebeurt wanneer de state, props of context die een component gebruikt, verandert. Opnieuw renderen van de ouder ≠ commit van het kind (als de uitvoer hetzelfde of gememoized is).

De renderteller loopt op telkens wanneer de componentfunctie wordt uitgevoerd; useEffect laat commits zien (nadat de DOM is bijgewerkt).

React.memo slaat opnieuw renderen over als props oppervlakkig gelijk zijn. Het omschakelen van een niet-gerelateerde state van de ouder zorgt niet dat het gememoized kind opnieuw rendert.

Optimaliseer wanneer:

• Profilering trage renderingen laat zien
• Er grote lijsten of zware kinderen zijn
• Stabiele props en handlers memoizatie mogelijk maken

Houd je code anders eerst eenvoudig.

Vermijd:

• Alles memoizen (dit voegt complexiteit toe)
• De identiteiten van props bij elke render wijzigen
• Opnieuw renderen van de ouder verwarren met DOM-wijzigingen van het kind

Samenvatting: Renderen berekent de gebruikersinterface; commits werken de DOM bij. Optimaliseer wanneer profilering dat aangeeft en gebruik React.memo wanneer props stabiel blijven.