Reagera

Reagera
Sorts fri och öppen källkodsprogramvara , webbramverk , funktionsbibliotek och JavaScript-bibliotek
Författare Jordan Walke _  _
Utvecklaren Meta Platforms , Jordan Walke [d] , Sebastian Markbåge [d] , Daniil Abramov [d] , Rachel Nabors [d] och Andrew Clark
Skrivet i JavaScript
Operativ system plattformsoberoende
Första upplagan 29 maj 2013
senaste versionen
stat Relevant
Licens MIT-licens [2] [3]
Hemsida reactjs.org ​(  engelska)
ar.reactjs.org ​(  Ar)
ru.reactjs.org ​(  ryska)

React (ibland React.js eller ReactJS ) är ett JavaScript- bibliotek med öppen källkod [4] för att utveckla användargränssnitt .

React utvecklas och underhålls av Facebook , Instagram och en gemenskap av enskilda utvecklare och företag [5] [6] [7] .

React kan användas för att utveckla ensidiga och mobila applikationer. Dess mål är att tillhandahålla hög utvecklingshastighet, enkelhet och skalbarhet . Som ett bibliotek för att utveckla användargränssnitt används React ofta med andra bibliotek som MobX, Redux och GraphQL .

Utvecklingshistorik

React skapades av Jordan Valke, en mjukvaruingenjör på Facebook. Han var influerad av XHP  , ett komponentbaserat HTML - ramverk för PHP [8] . React användes först i Facebooks nyhetsflöde 2011 och senare i Instagram-flödet 2012 [9] . React-källkoden öppnades i maj 2013 vid JSConf US-konferensen.

React Native tillkännagavs på Facebooks "React.js Conf" i februari 2015 och källkoden släpptes i mars 2015 . Det låter dig utveckla inbyggda Android- , iOS- och UWP- applikationer med hjälp av React.

Den 18 april 2017 tillkännagav Facebook React Fiber , en omskriven och optimerad version av React [10] . React Fiber kommer att ligga till grund för utvecklingen av alla framtida funktioner och förbättringar [11] .

Användningsexempel

Nedan är ett exempel med React i HTML med JSX och JavaScript.

< div id = "myReactApp" ></ div > < script type = "text/babel" > klass Greeter utökar React . Komponent { render () { return < h1 > { this . rekvisita . hälsning } < /h1> } } ReactDOM . render ( < Greeter greeting = "Hello World!" /> , document . getElementById ( 'myReactApp' )); </ script >

En klass Greeter är en React-komponent som accepterar en greeting. Metoden ReactDOM.renderrenderar en instans av klassen (komponenten) Greetermed egenskapen greetinglika "Hello World"och infogar den renderade komponenten i DOM-elementet med identifieraren myReactAppsom ett kapslat element.

När det visas i en webbläsare blir resultatet:

< div id = "myReactApp" > < h1 > Hej världen! </ h1 > </ div >

Funktioner

Enkelriktad dataöverföring

Egenskaper överförs från överordnade komponenter till underordnade komponenter. Komponenter får egenskaper som en uppsättning oföränderliga värden , så komponenten kan inte ändra egenskaper direkt, utan kan anropa ändringar genom återuppringningsfunktioner . Denna mekanism kallas "egenskaper ner, händelser upp".  

Virtual DOM

React använder en virtuell DOM ( virtuell DOM ) .  React skapar en cachestruktur i minnet som gör att den kan beräkna skillnaden mellan gränssnittets tidigare och nuvarande tillstånd för att optimalt uppdatera webbläsarens DOM. Således kan programmeraren arbeta med sidan, förutsatt att den är helt uppdaterad, men biblioteket bestämmer på egen hand vilka komponenter på sidan som behöver uppdateras.

redux

React används ofta tillsammans med Redux för att hantera komponenttillstånd.

jsx

JavaScript XML (JSX) är ett JavaScript-syntaxtillägg som låter dig använda en HTML-liknande syntax för att beskriva strukturen för ett gränssnitt. Som regel skrivs komponenter med JSX, men det är också möjligt att använda vanlig JavaScript [12] . JSX liknar ett annat språk skapat av Facebook för PHP-tillägget, XHP .

Livscykelmetoder

Livscykelmetoder tillåter en utvecklare att köra kod i olika skeden av en komponents livscykel. Till exempel:

  • shouldComponentUpdate - låter dig förhindra att komponenten ritas om genom att återvända falseom ritning inte behövs.
  • componentDidMount - anropas efter den första renderingen av komponenten. Används ofta för att utlösa att hämta data från en fjärrkälla via ett API .
  • render - den viktigaste metoden i livscykeln. Varje komponent måste ha denna metod. Anropas vanligtvis när komponentens data ändras för att rita om data i gränssnittet.

Inte bara rendering av HTML i webbläsaren

React används för mer än att bara rendera HTML i webbläsaren. Till exempel har Facebook dynamiska diagram som återges i <canvas>. Netflix och PayPal använder isomorfa nedladdningar för att återge identisk HTML på servern och klienten.

React Hooks

Hooks låter dig använda tillstånd och andra React-funktioner utan att skriva klasser [13] .

Att bygga anpassade krokar gör att du kan sätta in komponentlogik i återanvändbara funktioner. [14] .

Litteratur

  • Mardan Azat. Reaktionen är snabb. Webbapplikationer på React, JSX, Redux och GraphQL. - St Petersburg. : " Peter ", 2019. - S. 560. - ISBN 978-5-4461-0952-4 .
  • Banks Alex, Porcello Eva. GraphQL: Ett frågespråk för moderna webbapplikationer. - St Petersburg. : " Peter ", 2019. - S. 240. - ISBN 978-5-4461-1143-5 .
  • Banks Alex, Porcello Eva. React and Redux: funktionell webbutveckling. - St Petersburg. : " Peter ", 2018. - S. 336. - ISBN 978-5-4461-0668-4 .
  • Thomas Mark Tilens. Reagera i handling. - St Petersburg. : " Peter ", 2019. - S. 368. - ISBN 978-5-4461-0999-9 .
  • Kirupa Chinnatambi. Lär dig Reagera. - St Petersburg. : " Peter ", 2019. - S. 368. - ISBN 978-5-04-098028-4 .

Anteckningar

  1. ↑ 18.2.0 (14 juni 2022)
  2. ↑ Reagera v16.0
  3. ↑ Ändra licens och ta bort referenser till PATENT
  4. ↑ React - Ett JavaScript-bibliotek för att bygga användargränssnitt. . Reagera . Hämtad 7 april 2018. Arkiverad från originalet 19 juli 2018.
  5. ↑ Krill, Paul React: Att göra snabbare, smidigare användargränssnitt för datadrivna webbappar . InfoWorld (15 maj 2014). Hämtad 24 maj 2018. Arkiverad från originalet 12 juni 2018.
  6. ↑ Hemel, Zef Facebooks React JavaScript-användargränssnittsbibliotek får blandade recensioner . InfoQ (3 juni 2013). Hämtad 24 maj 2018. Arkiverad från originalet 12 juni 2018.
  7. ↑ Dawson, Chris JavaScripts historia och hur det ledde till ReactJS . The New Stack (25 juli 2014). Hämtad 24 maj 2018. Arkiverad från originalet 12 juni 2018.
  8. ↑ React (JS Library): Hur kom idén att utveckla React till och hur många människor arbetade med att utveckla det och implementera det på Facebook? . Quora .
  9. ↑ Pete Hunt på TXJS . Hämtad 24 maj 2018. Arkiverad från originalet 31 juli 2017.
  10. ↑ Frederic Lardinois . Facebook tillkännager React Fiber, en omskrivning av sitt React-ramverk , TechCrunch (18 april 2017). Arkiverad från originalet den 14 juni 2018. Hämtad 24 maj 2018.
  11. ↑ Reagera fiberarkitektur . Github . Hämtad 19 april 2017. Arkiverad från originalet 10 maj 2018.
  12. ↑ Reagera utan JSX -  Reagera . reactjs.org. Hämtad 19 juli 2018. Arkiverad från originalet 19 juli 2018.
  13. ↑ En snabb titt på krokar - Reagera . en.reactjs.org. Hämtad 5 oktober 2019. Arkiverad från originalet 12 oktober 2019.
  14. ↑ Skapa anpassade krokar - Reagera . en.reactjs.org. Hämtad 5 oktober 2019. Arkiverad från originalet 5 juni 2019.