Reagoi

Reagoi
Tyyppi ilmainen ja avoimen lähdekoodin ohjelmisto , verkkokehys , funktiokirjasto ja JavaScript-kirjasto
Tekijä Jordan Walke _  _
Kehittäjä Meta Platforms , Jordan Walke [d] , Sebastian Markbåge [d] , Daniil Abramov [d] , Rachel Nabors [d] ja Andrew Clark
Sisään kirjoitettu JavaScript
Käyttöjärjestelmä cross-platform
Ensimmäinen painos 29. toukokuuta 2013
uusin versio
Osavaltio Asiaankuuluva
Lisenssi MIT-lisenssi [2] [3]
Verkkosivusto reactjs.org ​(  englanti)
ar.reactjs.org ​(  Ar)
ru.reactjs.org ​(  venäjä)

React (joskus React.js tai ReactJS ) on avoimen lähdekoodin JavaScript - kirjasto [4 ] käyttöliittymien kehittämiseen .

Reactin kehittävät ja ylläpitävät Facebook , Instagram sekä yksittäisten kehittäjien ja yritysten yhteisö [5] [6] [7] .

Reactilla voidaan kehittää yksisivuisia ja mobiilisovelluksia. Sen tavoitteena on tarjota korkea kehitysnopeus, yksinkertaisuus ja skaalautuvuus . Käyttöliittymien kehittämisen kirjastona Reactia käytetään usein muiden kirjastojen, kuten MobX, Redux ja GraphQL , kanssa .

Kehityshistoria

Reactin on luonut Facebookin ohjelmistosuunnittelija Jordan Valke. Häneen vaikutti XHP  , komponenttipohjainen HTML -kehys PHP :lle [8] . Reactia käytettiin ensimmäisen kerran Facebookin uutissyötteessä vuonna 2011 ja myöhemmin Instagramin syötteessä vuonna 2012 [9] . Reactin lähdekoodi avattiin toukokuussa 2013 JSConf US -konferenssissa.

React Native julkistettiin Facebookin "React.js Conf" -tapahtumassa helmikuussa 2015 , ja lähdekoodi julkaistiin maaliskuussa 2015 . Sen avulla voit kehittää alkuperäisiä Android- , iOS- ja UWP - sovelluksia Reactin avulla.

Facebook julkisti 18. huhtikuuta 2017 React Fiberin , Reactin uudelleenkirjoitetun ja optimoidun version [10] . React Fiber tulee olemaan kaikkien tulevien ominaisuuksien ja parannusten kehittämisen perusta [11] .

Käyttöesimerkki

Alla on esimerkki Reactin käyttämisestä HTML:ssä JSX:n ja JavaScriptin kanssa.

< div id = "myReactApp" ></ div > < script type = "text/babel" > class Greeter laajentaa React . Komponentti { render () { return < h1 > { this . rekvisiitta . tervehdys } < /h1> } } ReactDOM . renderöi ( < Greeter greeting = "Hei maailma!" /> , dokumentti . getElementById ( 'myReactApp' )); </ script >

Luokka Greeter on React-komponentti, joka hyväksyy greeting. Menetelmä ReactDOM.rendertekee luokan (komponentin) esiintymän, Greeterjonka ominaisuus on greetingyhtä suuri , "Hello World"ja lisää renderoidun komponentin DOM-elementtiin tunnisteella myReactAppsisäkkäisenä elementtinä.

Kun se näytetään verkkoselaimessa, tulos on:

< div id = "myReactApp" > < h1 > Hei maailma! </ h1 > </ div >

Ominaisuudet

Yksisuuntainen tiedonsiirto

Ominaisuudet välitetään yläkomponenteista alikomponentteihin. Komponentit saavat ominaisuuksia muuttumattomina arvoina , joten komponentti ei voi muuttaa ominaisuuksia suoraan, vaan se voi kutsua muutoksia takaisinsoittofunktioiden kautta . Tätä mekanismia kutsutaan "ominaisuudet alas, tapahtumat ylös".  

Virtuaalinen DOM

React käyttää virtuaalista DOM :ia ( virtuaalinen DOM ) .  React luo muistissa olevan välimuistirakenteen , jonka avulla se voi laskea käyttöliittymän edellisen ja nykyisen tilan välisen eron selaimen DOM:n päivittämiseksi optimaalisesti. Ohjelmoija voi siis työskennellä sivun kanssa olettaen, että se päivitetään kokonaan, mutta kirjasto päättää itse, mitkä sivun komponentit on päivitettävä.

redux

Reactia käytetään usein yhdessä Reduxin kanssa komponenttitilojen hallintaan.

jsx

JavaScript XML (JSX) on JavaScript-syntaksilaajennus, jonka avulla voit käyttää HTML:n kaltaista syntaksia kuvaamaan käyttöliittymän rakennetta. Komponentit kirjoitetaan pääsääntöisesti JSX:llä, mutta on myös mahdollista käyttää tavallista JavaScriptiä [12] . JSX muistuttaa toista kieltä, jonka Facebook on luonut PHP-laajennukselle, XHP .

Lifecycle Methods

Elinkaarimenetelmien avulla kehittäjä voi ajaa koodia komponentin elinkaaren eri vaiheissa. Esimerkiksi:

  • shouldComponentUpdate - Voit estää komponentin uudelleenpiirtämisen palauttamalla, falsejos uudelleenpiirtämistä ei tarvita.
  • componentDidMount - kutsutaan komponentin ensimmäisen renderöinnin jälkeen. Käytetään usein käynnistämään tietojen saaminen etälähteestä API :n kautta .
  • render - elinkaaren tärkein menetelmä. Jokaisella komponentilla on oltava tämä menetelmä. Yleensä kutsutaan, kun komponentin tiedot muuttuvat rajapinnan tietojen uudelleenpiirtämiseksi.

Ei vain HTML:n hahmontamista selaimessa

Reactia käytetään muuhunkin kuin vain HTML:n hahmontamiseen selaimessa. Esimerkiksi Facebookissa on dynaamisia kaavioita, jotka hahmonnetaan <canvas>. Netflix ja PayPal käyttävät isomorfisia latauksia identtisen HTML-koodin tekemiseen palvelimella ja asiakkaalla.

React Hooks

Koukkujen avulla voit käyttää tila- ja muita React-ominaisuuksia kirjoittamatta luokkia [13] .

Mukautettujen koukkujen luominen mahdollistaa komponenttilogiikan lisäämisen uudelleenkäytettäviin toimintoihin. [14] .

Kirjallisuus

  • Mardan Azat. Reaktio on nopea. Verkkosovellukset Reactissa, JSX:ssä, Reduxissa ja GraphQL:ssä. - Pietari. : " Peter ", 2019. - S. 560. - ISBN 978-5-4461-0952-4 .
  • Banks Alex, Porcello Eva. GraphQL: Kyselykieli nykyaikaisille verkkosovelluksille. - Pietari. : " Pietari ", 2019. - S. 240. - ISBN 978-5-4461-1143-5 .
  • Banks Alex, Porcello Eva. React ja Redux: toimiva verkkokehitys. - Pietari. : " Peter ", 2018. - S. 336. - ISBN 978-5-4461-0668-4 .
  • Thomas Mark Tilens. Reagoi toiminnassa. - Pietari. : " Peter ", 2019. - S. 368. - ISBN 978-5-4461-0999-9 .
  • Kirupa Chinnatambi. Oppiva reagoi. - Pietari. : " Peter ", 2019. - S. 368. - ISBN 978-5-04-098028-4 .

Muistiinpanot

  1. ↑ 18.2.0 (14. kesäkuuta 2022)
  2. ↑ React v16.0
  3. ↑ Muuta lisenssiä ja poista viittaukset patentteihin
  4. ↑ React - JavaScript-kirjasto käyttöliittymien rakentamiseen. . Reagoi . Haettu 7. huhtikuuta 2018. Arkistoitu alkuperäisestä 19. heinäkuuta 2018.
  5. ↑ Krill, Paul React: Nopeiden ja sujuvampien käyttöliittymien tekeminen dataohjatuille verkkosovelluksille . InfoWorld (15. toukokuuta 2014). Haettu 24. toukokuuta 2018. Arkistoitu alkuperäisestä 12. kesäkuuta 2018.
  6. ↑ Hemel, Zef Facebookin React JavaScript -käyttöliittymien kirjasto saa vaihtelevia arvioita . InfoQ (3. kesäkuuta 2013). Haettu 24. toukokuuta 2018. Arkistoitu alkuperäisestä 12. kesäkuuta 2018.
  7. ↑ Dawson, Chris JavaScriptin historia ja miten se johti reagoimaanJS . The New Stack (25. heinäkuuta 2014). Haettu 24. toukokuuta 2018. Arkistoitu alkuperäisestä 12. kesäkuuta 2018.
  8. ↑ React (JS Library): Miten idea kehittää React syntyi ja kuinka moni työskenteli sen kehittämiseksi ja toteuttamiseksi Facebookissa? . Quora .
  9. ↑ Pete Hunt TXJS:ssä . Haettu 24. toukokuuta 2018. Arkistoitu alkuperäisestä 31. heinäkuuta 2017.
  10. ↑ Frederic Lardinois . Facebook julkistaa React Fiberin, joka on kirjoitettu uudelleen React-kehyksensä TechCrunch (18. huhtikuuta 2017). Arkistoitu alkuperäisestä 14. kesäkuuta 2018. Haettu 24.5.2018.
  11. ↑ React Fiber Architecture . Github . Haettu 19. huhtikuuta 2017. Arkistoitu alkuperäisestä 10. toukokuuta 2018.
  12. ↑ React ilman JSX -  React . reactjs.org. Haettu 19. heinäkuuta 2018. Arkistoitu alkuperäisestä 19. heinäkuuta 2018.
  13. ↑ Pikakatsaus koukkuihin - React . en.reactjs.org. Haettu 5. lokakuuta 2019. Arkistoitu alkuperäisestä 12. lokakuuta 2019.
  14. ↑ Mukautettujen koukkujen luominen - React . en.reactjs.org. Haettu 5. lokakuuta 2019. Arkistoitu alkuperäisestä 5. kesäkuuta 2019.