Reagere

Reagere
Type gratis og open source-software , web-framework , funktionsbibliotek og JavaScript-bibliotek
Forfatter Jordan Walke _  _
Udvikler Meta Platforms , Jordan Walke [d] , Sebastian Markbåge [d] , Daniil Abramov [d] , Rachel Nabors [d] og Andrew Clark
Skrevet i JavaScript
Operativ system på tværs af platforme
Første udgave 29. maj 2013
nyeste version
Stat Relevant
Licens MIT-licens [2] [3]
Internet side reactjs.org ​(  engelsk)
ar.reactjs.org ​(  Ar)
ru.reactjs.org ​(  russisk)

React (nogle gange React.js eller ReactJS ) er et open source JavaScript - bibliotek [4] til udvikling af brugergrænseflader .

React er udviklet og vedligeholdt af Facebook , Instagram og et fællesskab af individuelle udviklere og virksomheder [5] [6] [7] .

React kan bruges til at udvikle enkeltside- og mobilapplikationer. Dens mål er at give høj udviklingshastighed, enkelhed og skalerbarhed . Som et bibliotek til udvikling af brugergrænseflader bruges React ofte sammen med andre biblioteker såsom MobX, Redux og GraphQL .

Udviklingshistorie

React blev skabt af Jordan Valke, en softwareingeniør hos Facebook. Han var påvirket af XHP  , en komponentbaseret HTML- ramme til PHP [8] . React blev første gang brugt i Facebook-nyhedsfeedet i 2011 og senere i Instagram-feedet i 2012 [9] . React-kildekoden blev åbnet i maj 2013 på JSConf US-konferencen.

React Native blev annonceret på Facebooks "React.js Conf" i februar 2015 , og kildekoden blev frigivet i marts 2015 . Det giver dig mulighed for at udvikle native Android- , iOS- og UWP- applikationer ved hjælp af React.

Den 18. april 2017 annoncerede Facebook React Fiber , en omskrevet og optimeret version af React [10] . React Fiber vil være grundlaget for udviklingen af ​​alle fremtidige funktioner og forbedringer [11] .

Eksempel på brug

Nedenfor er et eksempel på brug af React i HTML med JSX og JavaScript.

< div id = "myReactApp" ></ div > < script type = "text/babel" > klasse Greeter forlænger React . Komponent { render () { return < h1 > { this . rekvisitter . hilsen } < /h1> } } ReactDOM . render ( < Greeter greeting = "Hello World!" /> , document . getElementById ( 'myReactApp' )); </ script >

En klasse Greeter er en React-komponent, der accepterer en greeting. Metoden ReactDOM.rendergengiver en forekomst af klassen (komponenten) Greetermed egenskaben greetinglig "Hello World"og indsætter den gengivne komponent i DOM-elementet med identifikatoren myReactAppsom et indlejret element.

Når det vises i en webbrowser, vil resultatet være:

< div id = "myReactApp" > < h1 > Hej verden! </ h1 > </ div >

Funktioner

Envejs dataoverførsel

Egenskaber overføres fra overordnede komponenter til underordnede komponenter. Komponenter modtager egenskaber som et sæt af uforanderlige værdier , så komponenten kan ikke ændre egenskaber direkte, men kan påkalde ændringer gennem tilbagekaldsfunktioner . Denne mekanisme kaldes "egenskaber ned, hændelser op".  

Virtual DOM

React bruger en virtuel DOM ( virtuel DOM ) .  React opretter en cache - struktur i hukommelsen, der gør det muligt at beregne forskellen mellem den tidligere og nuværende tilstand af grænsefladen for optimalt at opdatere browserens DOM. Programmøren kan således arbejde med siden, forudsat at den er fuldstændig opdateret, men biblioteket bestemmer selv, hvilke komponenter på siden der skal opdateres.

redux

React bruges ofte sammen med Redux til at styre komponenttilstande.

jsx

JavaScript XML (JSX) er en JavaScript-syntaksudvidelse, der giver dig mulighed for at bruge en HTML-lignende syntaks til at beskrive strukturen af ​​en grænseflade. Som regel skrives komponenter ved hjælp af JSX, men det er også muligt at bruge almindeligt JavaScript [12] . JSX ligner et andet sprog oprettet af Facebook til PHP-udvidelsen, XHP .

Livscyklusmetoder

Livscyklusmetoder giver en udvikler mulighed for at køre kode på forskellige stadier af en komponents livscyklus. For eksempel:

  • shouldComponentUpdate - giver dig mulighed for at forhindre komponenten i at tegne igen ved at returnere false, hvis det ikke er nødvendigt at tegne igen.
  • componentDidMount - kaldet efter den første gengivelse af komponenten. Ofte brugt til at udløse at hente data fra en ekstern kilde via en API .
  • render - den vigtigste metode i livscyklussen. Hver komponent skal have denne metode. Kaldes normalt, når komponentens data ændres for at gentegne dataene i grænsefladen.

Ikke kun gengivelse af HTML i browseren

React bruges til mere end blot at gengive HTML i browseren. For eksempel har Facebook dynamiske diagrammer, der gengives i <canvas>. Netflix og PayPal bruger isomorfe downloads til at gengive identisk HTML på serveren og klienten.

React Hooks

Hooks giver dig mulighed for at bruge tilstand og andre React-funktioner uden at skrive klasser [13] .

At bygge brugerdefinerede kroge giver dig mulighed for at sætte komponentlogik i genanvendelige funktioner. [14] .

Litteratur

  • Mardan Azat. Reaktionen er hurtig. Webapplikationer på React, JSX, Redux og GraphQL. - Sankt Petersborg. : " Peter ", 2019. - S. 560. - ISBN 978-5-4461-0952-4 .
  • Banks Alex, Porcello Eva. GraphQL: Et forespørgselssprog til moderne webapplikationer. - Sankt Petersborg. : " Peter ", 2019. - S. 240. - ISBN 978-5-4461-1143-5 .
  • Banks Alex, Porcello Eva. React and Redux: funktionel webudvikling. - Sankt Petersborg. : " Peter ", 2018. - S. 336. - ISBN 978-5-4461-0668-4 .
  • Thomas Mark Tilens. Reager i aktion. - Sankt Petersborg. : " Peter ", 2019. - S. 368. - ISBN 978-5-4461-0999-9 .
  • Kirupa Chinnatambi. Learning React. - Sankt Petersborg. : " Peter ", 2019. - S. 368. - ISBN 978-5-04-098028-4 .

Noter

  1. ↑ 18.2.0 (14. juni 2022)
  2. ↑ React v16.0
  3. ↑ Skift licens og fjern referencer til PATENTER
  4. ↑ React - Et JavaScript-bibliotek til opbygning af brugergrænseflader. . Reager . Hentet 7. april 2018. Arkiveret fra originalen 19. juli 2018.
  5. ↑ Krill, Paul React: At lave hurtigere, glattere brugergrænseflader til datadrevne webapps . InfoWorld (15. maj 2014). Hentet 24. maj 2018. Arkiveret fra originalen 12. juni 2018.
  6. ↑ Hemel, Zef Facebooks React JavaScript-brugergrænsefladebibliotek modtager blandede anmeldelser . InfoQ (3. juni 2013). Hentet 24. maj 2018. Arkiveret fra originalen 12. juni 2018.
  7. ↑ Dawson, Chris JavaScripts historie og hvordan det førte til ReactJS . Den nye stak (25. juli 2014). Hentet 24. maj 2018. Arkiveret fra originalen 12. juni 2018.
  8. ↑ React (JS Library): Hvordan opstod ideen om at udvikle React, og hvor mange mennesker arbejdede på at udvikle det og implementere det på Facebook? . Quora .
  9. ↑ Pete Hunt på TXJS . Hentet 24. maj 2018. Arkiveret fra originalen 31. juli 2017.
  10. ↑ Frederic Lardinois . Facebook annoncerer React Fiber, en omskrivning af sin React-ramme , TechCrunch (18. april 2017). Arkiveret fra originalen den 14. juni 2018. Hentet 24. maj 2018.
  11. ↑ React Fiber Architecture . Github . Hentet 19. april 2017. Arkiveret fra originalen 10. maj 2018.
  12. ↑ Reager uden JSX -  Reager . reactjs.org. Hentet 19. juli 2018. Arkiveret fra originalen 19. juli 2018.
  13. ↑ Et hurtigt kig på kroge - Reager . en.reactjs.org. Hentet 5. oktober 2019. Arkiveret fra originalen 12. oktober 2019.
  14. ↑ Oprettelse af brugerdefinerede kroge - Reager . en.reactjs.org. Hentet 5. oktober 2019. Arkiveret fra originalen 5. juni 2019.