Mitä uutta React JavaScript -käyttöliittymäkirjastossa

React JavaScript -käyttöliittymäkirjaston versiossa 16.8, joka on nyt saatavana tuotantoversiossa, on koukkuominaisuus tila- ja muiden React-ominaisuuksien käyttämiseen ilman luokan kirjoittamista.

Mistä ladata React

Voit ladata React-tuotteen version GitHubista.

Nykyinen versio: React 16.8: n uudet ominaisuudet

Helmikuussa 2019 julkaistu React 168 tarjoaa koukkujen Reactin DOM: lle, DOM-palvelimelle, testirenderöijälle ja matalalle renderöijälle. React DevTools tukee koukkuja. Kehittäjät voivat rakentaa omat koukut jakamaan uudelleenkäytettävän tilan logiikan komponenttien kesken. Mutta Facebook kehottaa kehittäjiä käyttämään aikaa tämän ominaisuuden kanssa, eikä suosittele, että kehittäjät kirjoittavat sovelluksia uudestaan ​​käyttämään koukkuja "yön yli".

Luokat ei ole tarkoitus poistaa Reactista, joten kehittäjien tulisi kokeilla koukkuja joissakin uusissa komponenteissa. Koodia käyttävät koukut toimivat olemassa olevan koodin rinnalla luokkia käyttäen.

Edellinen versio: Uudet ominaisuudet React 16.7: ssä

React 16.7, joka julkaistiin joulukuussa 2018, lisää koukkuominaisuuden tilan ja muiden React-ominaisuuksien käyttöön kirjoittamatta luokkaa.

Koukut ovat toimintoja, jotka linkittävät toimintakomponenttien React-tilaan ja elinkaaren ominaisuuksiin. Ne toimivat tällä hetkellä rinnakkain olemassa olevan koodin kanssa, mikä mahdollistaa asteittaisen käyttöönoton. Luokat Reactista ei ole tarkoitus poistaa. Koukut ratkaisevat erilaisia ​​ongelmia Reactissa, mukaan lukien:

• Puute tapa liittää uudelleenkäytettävä käyttäytyminen komponenttiin. On ollut malleja, kuten renderöintitarvikkeet ja korkeamman asteen komponentit, jotka yrittävät ratkaista tämän, mutta ne edellyttävät komponenttien uudelleenjärjestelyä, mikä voi olla hankalaa ja vaikeuttaa koodin seuraamista. Koukkujen avulla kehittäjät voivat purkaa tilan logiikan komponentista itsenäiseen testaukseen ja uudelleenkäyttöön.
• Monimutkaisista komponenteista on tullut liian vaikea ymmärtää. Koukkujen avulla komponentit voidaan jakaa pienempiin toimintoihin liittyvien kappaleiden perusteella, kuten tilauksen asettaminen tai tietojen noutaminen. Tämä tehdään sen sijaan, että pakotettaisiin elinkaarimenetelmiin perustuva jakaminen.
• Luokat voivat sekoittaa sekä ihmisiä että koneita, ja niitä pidetään suurimpana esteenä Reactin oppimiselle. Koukkujen avulla kehittäjät voivat käyttää enemmän Reactin ominaisuuksia ilman luokkia. Koukut omaksuvat toiminnot, mutta uhraamatta Reactin henkeä. Pakolliset pakoluukut ovat käytettävissä. Kehittäjien ei tarvitse oppia monimutkaisia ​​toiminnallisia tai reaktiivisia ohjelmointitekniikoita.

Edellinen versio: Uudet ominaisuudet React 16.6: ssa

Lokakuussa 2018 julkaistu React 16.6 tarjoaa useita parannuksia.

• Kanssa muistio, kehittäjät voivat pelastaa renderoinnin funktiokomponenteilla, samalla tavalla kuin luokan komponentit voivat pelastaa renderöinnin, kun syötetarvikkeet ovat samat PureComponents tai shouldComponentUpdate.
• Kanssa laiska, kehittäjät voivat käyttää Jännitys komponentti koodinjakoa varten käämittämällä dynaaminen tuonti puhelussa Reagoi laiska (). Huomaa: Tämä ominaisuus ei ole vielä käytettävissä palvelinpuolen renderoinnissa.
• Mukavuussovellusliittymä otettiin käyttöön kontekstiarvon kuluttamiseksi luokan komponentista. Kehittäjät olivat valittaneet, että uuden render prop -sovellusliittymän käyttöönotto React 16.3: sta voi olla vaikeaa luokan komponenteissa.
• Virhemenetelmä, getDerivedStatefromError (), hakee varakäyttöliittymän ennen renderöinnin päättymistä. Huomaa: Se ei ole vielä käytettävissä palvelinpuolen renderoinnissa, mutta kehittäjät voivat alkaa valmistautua siihen.
• Kaksi Tiukka tila Sovellusliittymät on poistettu käytöstä: findDOMNode () ja vanhan kontekstin avulla contextType ja getChildContext. Kehittäjiä kehotetaan päivittämään uuteen contextType API.

Edellinen versio: Uudet ominaisuudet React 16.4: ssä

Reactin versio 16.4, joka julkaistiin toukokuun lopulla 2018, lisää tukea osoitintapahtumille, usein kysyttyä ominaisuutta sekä parannusta tulevalle asynkroniselle renderointikyvylle. Osoitintapahtumia tukevat selaimet sisältävät Google Chromen, Mozilla Firefoxin, Microsoft Edgen ja Microsoft Internet Explorerin versiot.

Osoittintapahtumat ovat osoitinlaitteelle käynnistettyjä DOM-tapahtumia, jotka on suunniteltu tarjoamaan yksi tapahtumamalli käsittelemään laitteita, kuten hiirtä tai kosketusta.

React lisää osoitintapahtumien tuella tapahtumatyyppejä, jotka sisältävät:

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

Muita uusia ominaisuuksia React 16.4: ssä ovat:

• Parempi yhteensopivuus suunnitellun asynkronisen renderointitilan kanssa. Tätä varten julkaisussa on virhekorjaus getDerivedStatefromProps, jota kutsutaan nyt joka kerta kun komponenttia tarvitaan riippumatta siitä, miksi päivitys tapahtuu. Sitä oli kutsuttu vain, jos vanhempi toimitti komponentin uudelleen eikä se laukaisisi paikallisen seurauksena setState. Korjaus ei vaikuta useimpiin sovelluksiin, mutta harvinaisissa tapauksissa voi aiheuttaa ongelmia pienellä määrällä komponentteja.
• Kokeellinen profilointikomponentti on lisätty, nimeltään unstable_Profiler, suorituskyvyn mittaamiseen.
• Kokeellisessa sovittelussa mukautettujen hahmontojen luomiseksi on uusi isäntäkonfiguraation muoto, joka on litteä eikä käytä sisäkkäisiä objekteja.
• React DOM: n korjauksiin sisältyy virheen korjaaminen, joka estää joissakin tapauksissa kontekstin etenemisen, sekä tilanne, jossa joitain määritteitä poistettiin virheellisesti mukautetuista elementtisolmuista.

Kokeellinen puhelunpalautusominaisuus poistettiin React-versiosta 16.4, koska se vaikutti nipun kokoon ja sovellusliittymä ei ollut tarpeeksi hyvä. Odotat sen takaisin jossain vaiheessa toisessa muodossa, Facebook sanoo.

Edellinen versio: Uudet ominaisuudet React 16.3: ssa

Reactin maaliskuun 2018 version 16.3 julkaisu tuo elinkaarimuutokset sekä kontekstin API: n.

Elinkaaren muutokset reaktiossa 16.3

Komponenttien elinkaarelle tuleva asynkroninen renderöintitila venyttää luokan komponenttien API-mallia, jota käytetään tavoilla, joita ei alun perin tarkoitettu. Joten uusia elinkaaria lisätään, mukaan lukien getDerivedStateFromProps, turvallisempana vaihtoehtona vanhalle elinkaarelle, componentWillReceiveProps. Lisätty on myös getSnapshotBeforeUpdate, ominaisuuksien, kuten DOM: n, turvallisen lukemisen tukemiseksi ennen päivitysten tekemistä.

React 16.3 lisää myös "vaarallisen" etuliitteen joihinkin näistä elinkaareista, kuten esimerkiksi componentWillMount ja componentWillReceiveUpdate. Näissä tapauksissa "vaarallinen" ei tarkoita tietoturvaa, vaan sitä, että näitä elinkaaria käyttävässä koodissa on todennäköisemmin virheitä Reactin tulevissa versioissa.

React 16.3 -julkaisun avulla kehittäjien ei tarvitse tehdä mitään vanhojen menetelmien suhteen. Julkaisu on tarkoitettu kannustamaan avoimen lähdekoodin projektin ylläpitäjiä päivittämään kirjastot ennen vanhentamisvaroituksia, jotka otetaan käyttöön vasta tulevassa julkaisussa 16.x-rivillä.

Versio 16.3 lisää Tiukka tila komponentti, joka tunnistaa komponentit, joiden elinkaari on vaarallinen. Tiukka tila, joka toimii vain kehitystilassa, varoittaa myös vanhojen merkkijonojen ref-sovellusliittymän käytöstä ja havaitsee odottamattomat sivuvaikutukset. Se aktivoi jälkeläisten lisätarkistukset. Lisää toimintoja lisätään myöhemmin.

Context API tukee staattista tyyppitarkistusta ja syvällisiä päivityksiä

Uusi konteksti-sovellusliittymä tukee staattista tyyppitarkistusta ja syvällisiä päivityksiä. Tämä API on myös tehokkaampi kuin edellinen kokeellinen API-versio, kertoi Brian Vaughn, React JS: n ydinryhmän jäsen Facebookissa. Konteksti sallii datan siirtämisen komponenttipuun läpi ilman, että tarvitsee manuaalisesti siirtää rekvisiitta, joista osa sisältää kieliasetukset ja käyttöliittymän teeman. Vanha sovellusliittymä toimii edelleen React 16.x -julkaisujen kanssa, mikä antaa käyttäjille aikaa siirtyä.

Myös uusi React 16.3:

• Parannettu API, nimeltään createrefAPI, hallitaan viitteitä, jotka tarjoavat tavan käyttää renderöintimenetelmässä kehitettyjä DOM-solmuja tai React-elementtejä.
• forwardRef API, joka auttaa koodausten uudelleenkäyttöä edistävien korkeamman tason komponenttien käytössä.

Edellinen versio: Uudet ominaisuudet React 16.2: ssa

React 16.2: n marraskuu 2017 -julkaisu tuo fragmenttien kyvyn parantaa tukea useiden lasten näyttämiselle komponenttirenderöintimenetelmästä. Fragmentit, jotka muistuttavat tyhjiä JSX-tunnisteita, antavat kehittäjien ryhmitellä lasten luettelon lisäämättä solmuja DOM: iin.

Voit asentaa version 16.2 NPM-rekisteristä. Asenna Lanka-paketinhallinnalla suorittamalla lanka lisää reaktio@^ 16.2.0 reaktio -dom@^16.2.0. Asenna se NPM: llä suorittamalla npm asentaa --säästä reagoi@^ 16.2.0 reagoi -dom@^16.2.0.

Edellinen versio: React 16.0: n uudet ominaisuudet

Reaktion kuitu, joka on kopioitu kehitystyönsä aikana, syyskuussa 2017 React 16.0 on React-ytimen uudelleenkirjoittaminen, mikä parantaa havaittua reagointikykyä monimutkaisissa sovelluksissa uuden täsmäytysalgoritmin avulla. React 16: n tärkeimpiä ominaisuuksia ovat:

• Virheet, joissa on komponentin pinon jäljitys, jotta niiden virheenkorjaus olisi helpompaa.
• Merkkijonojen / taulukoiden palauttaminen suoraan komponenttien renderöintimenetelmistä.
• Uusi nopeampi suoratoistettava palvelinpuolen renderöijä.
• Enemmän natiivimaisen sovelluksen suorituskykyä.
• Siirtyminen kiistanalaisesta BSD + Patents -lisenssistä maittavampaan MIT-lisenssiin.

Vaikka Reactin sisäosat on kirjoitettu kokonaan uudelleen React 16: een, julkinen sovellusliittymä on "olennaisesti muuttumaton", kertoi Sophie Alpert, Facebookin Reactin suunnittelupäällikkö. Tarkoituksena oli säästää kehittäjiä tarvitsematta kirjoittaa uudestaan ​​olemassa olevia React-sovelluksella rakennettuja komponentteja.

React 16: n uusi koodi kirjoitettiin vanhan koodin viereen GitHub-repossa Facebookin tutun käytännön mukaisesti. Kytkimet näiden kahden välillä tehtiin Boolen kanssa useFiber ominaisuuslippu. Prosessin avulla Facebook aloitti uuden toteutuksen rakentamisen vaikuttamatta nykyisiin käyttäjiin ja jatkoi virheenkorjauksia vanhaan koodikantaan.

Muutaman kuukauden vikojen poistamisen jälkeen Facebook päätti toimittaa yhden tuotteen mahdollisten vikojen määrän vähentämiseksi sen sijaan, että pitäisivät kaksi React-versiota nykyisenä.