Dette var uken hvor noen definerte brukeropplevelsen i 2018 🤦, noen mista API-nøkkelen 🔑, og jeg fant verdens beste subreddit 🏆. Og det skjedde en milliard ting i React-verdenen!
For en uke. Jeg vet nesten ikke hvor jeg skal starte. I de tilfellene pleier jeg å starte på starten, så da gjør jeg rett og slett det.
React 16.6.0 er ute!
Tirsdag forrige uke kom React-teamet med en splitter ny minor-versjon — pakket full av nye features. Du kan lese den offisielle bloggposten her, men kort oppsummert fikk du disse nye leketøyene:
- import { memo } from ‘react’;
React er raskt, men av og til må man ty til noen triks for å unngå unødvendige re-renders av applikasjonen sin. For klassekomponenter har man lenge hatt muligheten til å bruke React.PureComponent — men hva med funksjonskomponenter? Møt memo . Dette er en høyere ordens komponent som lar deg wrappe funksjonskomponenter (og vanlige komponenter) for å oppnå høyere ytelse i visse situasjoner. - import { lazy, Suspense } from ‘react’;
Endelig får vi muligheten til å bruke Suspense til noe mer enn hype i bloggposter! Med lazy får vi muligheten til å dele opp koden vår i forskjellige nedlastbare deler, og bruke Suspense-komponenten til å vise en fallback-komponent (les: en spinner) hvis det tar litt tid å hente. Dette er nok bare starten av hva vi kan bruke Suspense til i tiden fremover — men det er spennende å se at vi endelig kan bruke det i produksjon! - static contextType
Hvis du har brukt det nye Context-APIet som ble lansert i React 16.3, så kan det hende du har irritert deg over hvor verbos syntaksen kan bli. Render-props-patternet er utrolig kraftig — men også veldig lite pent å se på. Dette har React-teamet kjent litt på selv — og har lagt til en måte for deg å bruke context i klassekomponenter. Du kan spesifisere static contextType = MyContext i klassen din, og hente ut context-verdien med this.context.
Wes Bos til kode24: - Disse teknologiene velger jeg!
Vi er helt hooked! ❤️️️️
Vi har ofte mye å skrive om her i , men denne uken var helt ekstrem. Ukens store nyhet kom fra helgens ReactConf, hvor teamlead Sophie Alpert, PR-fjes Dan Abramov og resten av React-teamet presenterte hva som nok kommer til å bli et paradigmeskifte i React-verdenen.
Konseptet kaller dehooks , og er basically en måte å “hooke” seg inn i React-features fra funksjonkomponenter. Det betyr at man endelig kan bruke state, sideeffekter og context i funksjonskompoentene helt uten høyere-ordens komponenter eller render-props!
Det er ikke lansert enda, men React-teamet har laget det de kaller et proposal — et forslag til hvordan ting kan se ut.
I tilllegg til dette issuet på Github (som må være et av de lengste i historien), har de også skrevet en helt fantastisk dokumentasjon som forklarer de forskjellige APIene og tankene rundt implementasjonen.
De nye APIene vil bli tilgjengelige i 16.7.0, og er allerede ute i en alpha-versjon så folk kan eksperimentere med dem. Installer det selv med npm i react@next react-dom@next.
Se hva .flat og .flatMap brukes til
Selv om det er lett å bli helt forelsket i nye features, er dette tross alt en slags kambrisk eksplosjon for React sitt offentlige API, noe som blir heftig debattert både på HackerNews og Reddit. Det er definitivt for heftig kost å gå igjennom i et skarve nyhetsbrev, men vi i React-gruppa hos Bekk har tenkt til å dykke dypere ned i APIene og komme med en god introduksjonsartikkel i løpet av dagene som kommer.
En strålende ting med dette hooks-patternet, er at det utrolig lett å skrive dine egne. Det er det mange som har gjort allerede, og mine to favoritter så langt er Jared Palmer’s the-platform og streamich’s react-use. Ta en titt på begge to for å se hvor spennende dette nye programmeringsmønsteret faktisk kan være!
Talks fra ReactConf 2018 er ute!
ReactConf er den største og viktigste konferansen i React-verdenen hvert år, og i år var like spennende (om ikke enda mer) enn før.
Jeg har ikke rukket å se gjennom mer enn tre-fire talks selv, men jeg anbefaler å skimme gjennom programmet for å se om du finner noe du liker.
Sophie Alpert og Dan Abramov sin keynote er definitivt den mest omtalte:
Reach Tech-kar Ryan Florence kom sterkt tilbake etter en noe haltende presentasjon på React Rally tidligere i høst, og blåste alle av banen med live-koding av Hooks i VIM:
Andrew Clark holdt også en fantastisk talk om Suspense og hvordan du kan bruke det, allerede i dag:
Du finner hele programmet på YouTube allerede, så her er det bare å godte seg.
Det var det vi hadde for dere denne uken. Vi gleder oss til å se hvor Hooks kommer til å bevege seg i tiden som kommer — og hva annet spennende vi kan få til!
Takk for at du leste! 👋
