React 19 introducerer betydelige forbedringer til understøttelse af brugerdefinerede elementer sammenlignet med tidligere versioner, primært med fokus på, hvordan rekvisitter styres under gengivelse. Her er de vigtigste forskelle:
Forbedret prophåndtering
1. Adskillelse af attributter og egenskaber: I reaktion 19 tildeles rekvisitter, der svarer til egenskaber på en brugerdefineret elementinstans som egenskaber under gengivelse af klientsiden. Hvis propen er en primitiv type (som `streng ',' nummer 'eller' sandt '), gengives den som en attribut. Ikke-primitive typer (som 'objekt', 'symbol' eller 'funktion') er udelukket fra gengivelse. Denne tilgang giver mulighed for en mere intuitiv interaktion med brugerdefinerede elementer, der tilpasser sig, hvordan de typisk er designet til at fungere [3] [4].
2. Forbedringer af server-side-gengivelse (SSR): Under SSR gælder den samme logik: primitive rekvisitter gengives som attributter, mens ikke-primitive typer udelades. Dette sikrer, at den server-gengivne output er i overensstemmelse med, hvad klienten forventer, hvilket reducerer potentielle uoverensstemmelser under hydrering [4] [5].
3. Scoped Custom Element Registre: React 19 understøtter scoped brugerdefinerede elementregistre, hvilket giver udviklere mulighed for at styre brugerdefinerede elementer mere effektivt i mikro-frontendarkitekturer. Denne funktion hjælper med at forhindre versionskonflikter, når flere applikationer afhænger af forskellige versioner af det samme brugerdefinerede element, hvilket forbedrer modularitet og kompatibilitet [2].
4. Forbedrede ydelsesmetrics: React 19 har opnået en 100% score på de brugerdefinerede elementer overalt benchmark, en betydelig forbedring i forhold til tidligere versioner. Dette indikerer bedre ydelse og kompatibilitet med webkomponenter, der adresserer tidligere kritik vedrørende React's håndtering af brugerdefinerede elementer [5].
Disse forbedringer i React 19 strømline ikke kun integrationen af brugerdefinerede elementer i react -applikationer, men forbedrer også den samlede ydelse og udvikleroplevelse, hvilket gør det lettere at arbejde med webkomponenter i en react -kontekst.
Citater:[1] https://github.com/facebook/react/issues/11347
[2] https://github.com/facebook/react/issues/28938
[3] https://www.angularminds.com/blog/react-19-geta-features
[4] https://react.dev/blog/2024/04/25/react-19
[5] https://piccalil.li/blog/upcoming-custom-element-support-in-react/
[6] https://www.bacancytechnology.com/blog/whats-new-in-react-19
[7] https://eluminoustechnologies.com/blog/react-19/
)