React 19 esittelee merkittäviä parannuksia räätälöityjen elementtien tukemiseen aikaisempiin versioihin, keskittyen pääasiassa siihen, miten rekvisiitta hallitaan renderoinnin aikana. Tässä ovat keskeiset erot:
Parannettu potkurin käsittely
1. Attribuuttien ja ominaisuuksien erottaminen: React 19: ssä rekvisiitta, joka vastaa mukautetun elementin ilmentymän ominaisuuksia, määritetään ominaisuuksiksi asiakaspuolen renderoinnin aikana. Jos potkuri on primitiivinen tyyppi (kuten `merkkijono`,` numero` tai `true`), se tehdään ominaisuutena. Ei-primitiiviset tyypit (kuten "objekti", "symboli" tai "funktio") jätetään renderoinnin ulkopuolelle. Tämä lähestymistapa mahdollistaa intuitiivisemman vuorovaikutuksen räätälöityjen elementtien kanssa, yhdenmukaistaen sen kanssa, kuinka ne on tyypillisesti suunniteltu toimimaan [3] [4].
2 Tämä varmistaa, että palvelinsuojattu lähtö on yhdenmukainen asiakkaan odottavan kanssa, mikä vähentää mahdollisia epäsuhteita nesteytyksen aikana [4] [5].
3. Laajennettujen elementtirekisterit: React 19 tukee laajamittaisia räätälöityjä elementtirekistereitä, jolloin kehittäjät voivat hallita räätälöityjä elementtejä tehokkaammin mikro-frontend-arkkitehtuureissa. Tämä ominaisuus auttaa estämään version konflikteja, kun useita sovelluksia riippuvat saman mukautetun elementin eri versioista, mikä parantaa modulaarisuutta ja yhteensopivuutta [2].
4. Parannettu suorituskykymittarit: React 19 on saavuttanut 100%: n pistemäärän räätälöityissä elementeissä kaikkialla vertailukohdassa, mikä on merkittävä parannus aiempiin versioihin nähden. Tämä osoittaa paremman suorituskyvyn ja yhteensopivuuden web -komponenttien kanssa, ja se käsittelee aiempaa kritiikkiä Reactin mukautettujen elementtien käsittelystä [5].
Nämä React 19: n parannukset eivät vain virtaviivaista räätälöityjen elementtien integrointia React -sovelluksiin, vaan myös parantavat yleistä suorituskykyä ja kehittäjäkokemusta, mikä helpottaa Web -komponenttien työskentelyä React -tilanteessa.
Viittaukset:[1] https://github.com/facebook/react/issues/11347
[2] https://github.com/facebook/react/issues/28938
[3] https://www.angularminds.com/blog/react-19-beta-features
[4] https://react.dev/blog/2024/04/25/react-19
[5] https://piccalil.li/blog/upcome-custom-element-support-in-react/
[6] https://www.bacancyTechnology.com/blog/whats-new-in--react-19
[7] https://eluminoustechnologies.com/blog/react-19/
.