Programmering

Hvad der er nyt i React JavaScript UI-biblioteket

Nu tilgængelig i produktionsudgivelse har version 16.8 af React JavaScript UI-biblioteket krokfunktion til brug af tilstands- og andre React-funktioner uden at skulle skrive en klasse.

Hvor downloades React

Du kan downloade producton-versionen af ​​React fra GitHub.

Aktuel version: Nye funktioner i React 16.8

Udgivet i februar 2019 leverer React 168 en implementering af kroge til React's DOM-, DOM-server, testrender og lavt renderer. Kroge understøttes i React DevTools. Udviklere kan bygge deres egne kroge for at dele genanvendelig stateful logik mellem komponenter. Men Facebook råder udviklere til at tage deres tid med denne mulighed og ikke anbefale, at udviklere omskriver applikationer for at bruge kroge "natten over".

Der er ingen planer om at fjerne klasser fra React, så udviklere bør prøve kroge i nogle nye komponenter. Kode, der bruger forskellige kroge, fungerer sammen med eksisterende kode ved hjælp af klasser.

Tidligere version: Nye funktioner i React 16.7

Udgivet i december 2018 tilføjer React 16.7 hooks-kapaciteten til brug af tilstands- og andre React-funktioner uden at skrive en klasse.

Kroge er funktioner, der linker til reaktionstilstand og livscyklusfunktioner fra funktionskomponenter. De arbejder i øjeblikket side om side med eksisterende kode, hvilket muliggør gradvis vedtagelse. Der er ingen planer om faktisk at fjerne klasser fra React. Kroge løser en række forskellige problemer i React, herunder:

  • Manglen på en måde at knytte genanvendelig adfærd til en komponent på. Der har været mønstre som gengivelse af rekvisitter og komponenter af højere orden, der forsøger at løse dette, men disse kræver omstrukturering af komponenter, som kan være besværlige og gøre det sværere at følge koden. Ved hjælp af kroge kan udviklere udtrække stateful logik fra en komponent til uafhængig test og genbrug.
  • Komplekse komponenter er blevet for vanskelige at forstå. Med kroge kan komponenter opdeles i mindre funktioner baseret på relaterede stykker, såsom opsætning af et abonnement eller hentning af data. Dette gøres i stedet for at tvinge en split baseret på livscyklusmetoder.
  • Klasser kan forvirre både mennesker og maskiner og ses som den største barriere for at lære at reagere. Kroge lader udviklere bruge flere af React's funktioner uden klasser. Kroge omfavner funktioner, men uden at ofre React-ånden. Der gives adgang til tvingende flugtluge. Udviklere behøver ikke at lære komplekse funktionelle eller reaktive programmeringsteknikker.

Tidligere version: Nye funktioner i React 16.6

Udgivet i oktober 2018 giver React 16.6 flere forbedringer.

  • Med notat, kan udviklere redde sig fra gengivelse med funktionskomponenter, svarende til hvordan klassekomponenter kan redde, når gengivelse af input er det samme ved hjælp af PureComponents eller shouldComponentUpdate.
  • Med doven, kan udviklere bruge Spænding komponent til kodedeling ved at indpakke en dynamisk import i opkald til Reager. Doven (). Bemærk: Funktionen er endnu ikke tilgængelig til gengivelse på serversiden.
  • Bekvemmeligheds-API'en blev introduceret for at forbruge en kontekstværdi inden for en klassekomponent. Udviklere havde klaget over, at vedtagelse af den nye render prop API fra React 16.3 kunne være vanskelig i klassekomponenter.
  • En fejlmetode, getDerivedStatefromError (), gengiver reserve-UI, før en gengivelse er afsluttet. Bemærk: Det er endnu ikke tilgængeligt til rendering på serversiden, men udviklere kan begynde at forberede sig på det.
  • To Strictmode API'er er udfaset: findDOMNode () og ældre kontekst ved hjælp af contextType og getChildContext. Udviklere opfordres til at opgradere til det nye contextType API.

Tidligere version: Nye funktioner i React 16.4

Version 16.4 af React, udgivet i slutningen af ​​maj 2018, tilføjer understøttelse af pointerhændelser, en ofte anmodet funktion samt en forbedring af en kommende asynkron gengivelsesfunktion. Browsere, der understøtter pointerhændelser, inkluderer versioner af Google Chrome, Mozilla Firefox, Microsoft Edge og Microsoft Internet Explorer.

Markørbegivenheder er DOM-begivenheder, der affyres for en pegeudstyr, der er designet til at give en enkelt begivenhedsmodel til at håndtere enheder såsom en mus eller berøring.

Med understøttelse af pointerhændelser tilføjer React support til begivenhedstyper, der inkluderer:

  • onPointerDow
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

Andre nye funktioner i React 16.4 inkluderer:

  • Forbedret kompatibilitet med en planlagt asynkron gengivelsestilstand. For at gøre dette indeholder frigivelsen en fejlrettelse til getDerivedStatefromProps, som nu kaldes hver gang en komponent er nødvendig, uanset hvorfor opdateringen sker. Det var kun blevet kaldt, hvis en komponent blev gengivet af en forælder og ikke ville affyre som et resultat af en lokal setState. Løsningen påvirker ikke de fleste apps, men kan i sjældne tilfælde forårsage problemer med et lille antal komponenter.
  • En eksperimentel profilkomponent er tilføjet, kaldet ustabil_Profilertil måling af ydeevne.
  • En eksperimentel afstemning til oprettelse af brugerdefinerede gengivere har en ny hostkonfigurationsform, der er flad og ikke bruger indlejrede objekter.
  • Rettelser til React DOM inkluderer reparation af en fejl, der i nogle tilfælde forhindrede udbredelse af kontekst samt en situation, hvor nogle attributter forkert blev fjernet fra brugerdefinerede elementknudepunkter.

Den eksperimentelle tilbagevenden til opkald blev slettet i React Version 16.4, fordi den påvirkede bundtstørrelse, og API'en ikke var god nok. Forvent det på et eller andet tidspunkt i en anden form, siger Facebook.

Tidligere version: Nye funktioner i React 16.3

Marts 2018 version 16.3-udgivelsen af ​​React bringer livscyklusændringer samt en API til kontekst.

Livscyklusændringer i React 16.3

For komponentens livscyklus strækker den kommende asynk-gengivelsestilstand klasse-komponent-API-modellen, som bruges på måder, der ikke oprindeligt var beregnet til. Så nye livscyklusser tilføjes, inklusive getDerivedStateFromProps, som et sikrere alternativ til arvets livscyklus, componentWillReceiveProps. Også tilføjet er getSnapshotBeforeUpdate, for at understøtte sikker læsning af egenskaber, f.eks. DOM, før opdateringer foretages.

React 16.3 tilføjer også "usikkert" præfikset til nogle af disse livscyklusser, f.eks. Til componentWillMount og componentWillReceiveUpdate. I disse tilfælde henviser "usikker" ikke til sikkerhed, men til det faktum, at kode, der bruger disse livscyklusser, er mere tilbøjelige til at have fejl i fremtidige versioner af React.

Med udgivelsen af ​​React 16.3 behøver udviklere ikke at gøre noget ved ældre metoder. Udgivelsen er beregnet til at bede open source-projektvedligeholdere om at opdatere deres biblioteker før advarsler om udfasning, som ikke vil blive aktiveret før en fremtidig frigivelse i 16.x-linjen.

Version 16.3 tilføjer StrictMode komponent, der identificerer komponenter med usikre livscyklusser. StrictMode, der kun kører i udviklingstilstand, advarer også om ældre strengref-API-brug og registrerer uventede bivirkninger. Det aktiverer yderligere kontrol for efterkommere. Mere funktionalitet tilføjes senere.

Context API understøtter kontrol af statisk type og dybe opdateringer

Den nye kontekst API understøtter kontrol af statisk type og dybe opdateringer. Denne API er også mere effektiv end den tidligere eksperimentelle API-version, sagde Brian Vaughn, et medlem af React JS-kerneteamet på Facebook. Kontekst lader data sendes gennem et komponenttræ uden at manuelt skal sende rekvisitter, hvoraf nogle inkluderer lokal præference og UI-tema. Den gamle API vil fortsat arbejde for React 16.x-udgivelser, hvilket giver brugerne tid til at migrere.

Også nyt i React 16.3:

  • En forbedret API, kaldet CreaterefAPItil styring af refs, som giver en måde at få adgang til DOM-noder eller React-elementer, der er udviklet i gengivelsesmetoden.
  • Det fremadRef API, der hjælper med brugen af ​​komponenter af højere orden, der fremmer genbrug af kode.

Tidligere version: Nye funktioner i React 16.2

November 2017-udgivelsen af ​​React 16.2 giver fragmentets mulighed for at forbedre understøttelsen af ​​at vise flere børn fra en komponentgengivelsesmetode. Fragmenter, der ligner tomme JSX-tags, lader udviklere gruppere en liste over børn uden at tilføje noder til DOM.

Du kan installere version 16.2 fra NPM-registreringsdatabasen. Kør for at installere med Yarn-pakkehåndteringen garn tilføj [email protected]^16.2.0 [email protected]^16.2.0. For at installere det med NPM skal du køre npm install - gem [email protected]^16.2.0 [email protected]^16.2.0.

Tidligere version: Nye funktioner i React 16.0

Døbt "React Fiber" under udviklingen, september 2017's React 16.0 er en omskrivning af React-kernen, hvilket forbedrer opfattet lydhørhed for komplekse applikationer via en ny afstemningsalgoritme. Nøglefunktioner i React 16 inkluderer:

  • Fejl, der indeholder et komponentspor for at gøre dem nemmere at debugge.
  • Returnering af strenge / arrays direkte fra komponentgengivelsesmetoder.
  • En ny hurtigere streaming-server-renderer.
  • Mere native-lignende applikationsydelse.
  • Skiftet fra den kontroversielle BSD + patentlicens til den mere velsmagende MIT-licens.

Selvom Reacts interner er blevet fuldstændigt omskrevet i React 16, er den offentlige API “i det væsentlige uændret”, sagde Sophie Alpert, Facebooks ingeniørchef for React. Hensigten var at redde udviklere fra at skulle omskrive eksisterende komponenter bygget med React.

React 16s nye kode blev skrevet sammen med gammel kode i GitHub-repoen, ifølge en velkendt praksis på Facebook. Skifter mellem de to blev gjort med den boolske brug Fiber funktion flag. Processen lod Facebook begynde at opbygge sin nye implementering uden at påvirke eksisterende brugere og fortsætte med at foretage fejlrettelser til den gamle kodebase.

Efter et par måneders strygning af bugs valgte Facebook at levere et enkelt produkt for at reducere det mulige sæt bugs snarere end at holde to versioner af React aktuelle.