Reagere

reagere
Generell informasjon
programtype	gratis og åpen kildekode-programvare
Forfatter	jordan walke
utvikler	Facebook og fellesskap.
Utviklingsmodell	Åpen kilde
Første utgivelse	29. mai 2013
Tillatelse	MIT-lisens
Teknisk informasjon
Planlagt inn	javascript
Støttede plattformer	Multiplattform
Versjoner
Siste stabile versjon	18.1 (26. april 2022)
Lenker
Offesiell nettside kodelager

React (også kalt React.js eller ReactJS) er et åpen kildekode - Javascript - bibliotek designet for å lage brukergrensesnitt med mål om å lette utviklingen av enkeltsideapplikasjoner . Den vedlikeholdes av Facebook og friprogramvarefellesskapet . I prosjektet er det mer enn tusen gratis utviklere.

React prøver å hjelpe utviklere med å bygge applikasjoner som bruker data som endres hele tiden . Målet er å være enkel, deklarativ og lett å kombinere. React håndterer kun brukergrensesnittet i en app; React er visningen i en kontekst som bruker MVC (Model-View-Controller) eller MVVM (Model-View-ViewModel) mønsteret. Den kan også brukes med React-baserte utvidelser som tar seg av delene av en nettapplikasjon som ikke er brukergrensesnitt .

I følge JavaScript-analysetjenesten Libscore, brukes React for tiden på forsidene til Imgur, Bleacher Report, Feedly , Airbnb , SeatGeek, HelloSign og mer.

Historie

React ble opprettet av Jordan Walke, en programvareingeniør hos Facebook, som ga ut en tidlig React-prototype kalt "FaxJS". ]

Dette ble påvirket av XHP fra HTML , et komponentbibliotek for PHP . Dette ble først brukt i Facebook News Feed i 2011 og deretter på Instagram i 2012. ]

Det ble åpen kildekode hos JSConf US i mai 2013. ]

React Native , muliggjorde native utvikling for Android , iOS og UWP med React, dette ble annonsert av Facebook på React Conf i februar 2015 og ble åpnet i mars 2015.

Den 18. april 2017 annonserte Facebook React Fiber, et nytt sett med interne gjengivelsesalgoritmer, i motsetning til de gamle React-gjengivelsesalgoritmene. ]

React Fiber vil bli grunnlaget for eventuelle fremtidige forbedringer og funksjonsutvikling av React-biblioteket. Gjeldende syntaks for programmering med React er ikke endret; bare måten syntaksen utføres på har endret seg. Reacts gamle gjengivelsessystem, Stack, ble utviklet på et tidspunkt da systemets fokus på dynamisk endring ikke ble forstått. Stack var treg til å tegne komplekse animasjoner, for eksempel ved å prøve å oppnå alt i én del. Fiber deler opp animasjonen i segmenter som kan spres over flere bilder. Strukturen til en side kan også deles inn i segmenter som kan vedlikeholdes og oppdateres separat. JavaScript-funksjonene og det virtuelle DOM -objektet kalles "fibre" og hver kan betjenes og oppdateres separat, noe som gir jevnere gjengivelse. ]

Bakgrunn og begynnelse (2010-2013)

• 2010: Facebook introduserer XHP til sin PHP-stabel som åpen kildekode .
• 2011: Walke lager en prototype for ReactJS.
• April 2012: Facebook kjøper Instagram , Pete Hunt utviklet React for å gjøre det åpen kildekode .
• Mai 2013: Facebook slipper React som åpen kildekode.
• Juni 2013: React er tilgjengelig på JSFiddle.
• Juli 2013: React og JSX er tilgjengelig i Ruby on Rails
• August 2013: React og JSX er tilgjengelig i Python-applikasjoner

Utvidelse og popularitet (2014–2016)

• Tidlig 2014: ReactJS verdensturnékonferanser, fokusert på å bygge et fellesskap og gjøre hatere til allierte.
• Januar 2014: React Developer Tools er lagt til som en utvidelse for Google Chrome .
• 7.-9. april 2014: React London 2014, en 3 dagers konferanse om å bygge responsive applikasjoner.
• Januar 2015: Netflix kunngjør at de vil bruke React for utviklingen av brukergrensesnittet. ]
• Tidlig 2015: Airbnb bruker React.
• 28.-29. januar 2015: Den første versjonen av React Native publiseres
• Mars 2015: React Native er offentlig og fritt tilgjengelig for iOS , og er tilgjengelig på Github .
• September 2015: Den første versjonen av React Native for Android publiseres.
• 22.–23. februar 2016: React.js Conf 2016 i San Francisco.
• 2.–3. juni 2016: ReactEurope 2016.
• 11. juli 2016: Feilkodesystem for React publiseres. ]

Kontinuerlig forbedring (2017-i dag)

26. september 2017 ble React 16.0 utgitt for offentligheten. ]

16. februar 2019 ble React 16.8 utgitt for offentligheten. Denne utgivelsen introduserte React Hooks. ]

10. februar 2020 kunngjorde React-teamet den første utgivelseskandidaten for React v17.0, kjent som den første store utgivelsen uten store endringer i React API-en som vender mot utvikleren. ]

Funksjoner

Virtual DOM

React opprettholder et eget virtuelt DOM , i stedet for å stole utelukkende på nettleserens DOM. Dette lar biblioteket bestemme hvilke deler av DOM-en som har endret seg ved å sammenligne innholdet mellom den nye versjonen og den som er lagret i den virtuelle DOM-en, og bruke resultatet til å bestemme hvordan man effektivt oppdaterer nettleserens DOM. ​ Egenskaper (rekvisitter) av reagere.

Egenskapene

Egenskaper (også kjent som 'rekvisitter') kan defineres som konfigurasjonsattributtene for den komponenten. Disse mottas fra et høyere nivå, vanligvis når komponenten er instansiert, og er per definisjon uforanderlige.

Staten

Tilstanden til en komponent er definert som en representasjon av komponenten på et bestemt tidspunkt, det vil si et øyeblikksbilde av selve komponenten. Det er to typer stateful og stateless komponenter, kalt statefull og stateless.

Livssykluser

Livssyklusen er en serie tilstander som statefulle komponenter går gjennom gjennom hele deres eksistens. De kan klassifiseres i tre stadier med montering eller initialisering, oppdatering og ødeleggelse. Disse trinnene samsvarer med ulike metoder.

• shouldComponentUpdatelar utvikleren forhindre unødvendig gjengivelse av en komponent, og returnerer falsk hvis ikke nødvendig.
• componentDidMountkalles når komponenten er "montert" (komponenten er opprettet i brukergrensesnittet, vanligvis ved å assosiere den med DOM-noden). Dette brukes ofte til å utløse lasting av data fra en ekstern kilde via en API.
• componentWillUnmountkalles opp umiddelbart før komponenten "avmonteres". Det brukes ofte til å rydde opp i etterspørselen etter komponentavhengigheter som ikke bare fjernes ved å demontere komponenten.
• render det er den viktigste metoden for livssykluser og den eneste som kreves i noen komponent. Det kalles vanligvis hver gang komponentens tilstand oppdateres, noe som gjenspeiler endringene i brukergrensesnittet.

JSX

React bruker en HTML-lignende syntaks kalt JSX. Det er ikke nødvendig å bruke React, men det gjør koden mer lesbar, og å skrive den er en HTML-lignende opplevelse. ]

Eksempel på en komponent skrevet med JSX

Hooks

Hooks er et nytt tillegg i React 16.8. De lar deg bruke tilstand og andre React-funksjoner uten å skrive en klasse.

State hook (useState)

React vil beholde denne tilstanden mellom gjengivelsene. useStatereturnerer et par: gjeldende tilstandsverdi og en funksjon som lar deg oppdatere den. Du kan kalle denne funksjonen fra en hendelsesbehandler eller fra et annet sted. Det ligner this.setStatepå en klasse, bortsett fra at det ikke kombinerer gammel og ny tilstand. ]

Implementeringseksempel:

const  [ count ,  setCount ]  =  useState ( 0 ); 
const  [ frukt ,  setFruit ]  =  brukState ( 'banan' ); 
const  [ todos ,  setTodos ]  =  useState ([{  text :  'Learn Hooks'  }]);

Effektkrok (useEffect)

Effect Hook, useEffect, legger til muligheten til å utføre sekundære effekter fra en funksjonskomponent. Den har samme formål som componentDidMount, componentDidUpdateog componentWillUnmounti React-klasser, men samlet til en enkelt API. ]

For eksempel setter denne komponenten dokumenttittelen etter at React oppdaterer DOM:

// Ligner på componentDidMount og componentDidUpdate:   
useEffect (()  =>  {     
    // Oppdater dokumenttittelen ved å bruke Browser API-     
    dokumentet . title  =  `Du klikket ${ count } ganger` ;   
});

Når du ringer useEffect, ber du React om å kjøre "effekt"-funksjonen din etter å ha tømt endringene til DOM.

Hook-regler

Hooks er JavaScript-funksjoner, men de håndhever to tilleggsregler:

• Ring kun Hooks på toppnivå . Ikke kall Hooks inne i løkker, betingelser eller nestede funksjoner.

• Ring kun Hooks fra React-funksjonskomponenter . Ikke ring Hooks fra vanlige JavaScript-funksjoner. (Det er bare ett annet gyldig sted å ringe Hooks: dine egne tilpassede Hooks. Vi lærer om disse om et øyeblikk.)

Andre kroker

Det er noen mindre brukte innebygde kroker som du kan finne nyttige. For eksempel useContextlar den deg abonnere på React-konteksten uten å introdusere hekking:

funksjon  Eksempel ()  { 
  const  locale  =  useContext ( LocaleContext );   
  const  theme  =  useContext ( ThemeContext );   
  // ... 
}

Og useReducerdet lar deg håndtere den lokale tilstanden til komplekse komponenter med en redusering:

function  Todos ()  { 
  const  [ todos ,  dispatch ]  =  useReducer ( todosReducer );   
  // ...

React Native

React Native er et rammeverk som lar deg bygge mobilapper med kun JavaScript og React. Den bruker samme layout som React.js, slik at du kan bruke mobile UI-elementer. Det er ikke for å bygge en "nettmobilapp", "HTML5-app" eller "hybridapp", men en ekte mobilapp som ikke kan skilles fra en annen app bygget på et morsmål. React Native bruker de samme grunnleggende UI-byggesteinene som vanlige iOS- og Android-apper. ]

Selv om React.js og React Native bruker samme kodestruktur, gjør de ikke det samme. React.js brukes til å lage nettsider og fungerer med virtuelle DOM-elementer, mens på den annen side bruker React Native native Android- og iOS UI-elementer for å lage apper for begge plattformene.

Lisenskontrovers

Reager når utgitt i mai 2013 brukte Apache-lisensen 2.0 fri programvarelisens . Med React 0.12.0-oppdateringen ble den forrige lisensen endret til 3-klausul BSD- lisensen sammen med en patentbrukstekst. ]

Denne endringen forårsaket kontrovers i React-fellesskapet og i åpen kildekode-fellesskapet generelt, spesielt på grunn av klausulene der den tillot Facebook å fjerne retten til å bruke brukerens lisens under forhold som de mener ikke prioriterer fellesskapet. Dette førte til at Apache Software Foundation inkluderte Facebook-lisensen i listen over lisenser som ikke kan brukes med Apache-produkter. ]

Facebook skrev på sin side en publikasjon der de forklarte årsaken til bruken av lisensene. Dokumentet nevner at hovedgrunnen er å unngå ondsinnede søksmål som kan koste selskapet tid og penger. ]

Den 23. september 2017 kunngjorde Facebook at de endret lisensen for å bruke React.js fra BSD fra 3 klausuler til MIT -lisensen, som er en mer tillatende lisens når det gjelder bruken, i kunngjøringen Facebook nevnte at målet med React er å skape et økosystem av åpen kildekode-programvare, og de ønsker ikke å rulle tilbake fremskritt uten noen åpenbar grunn. Den 17. februar 2018 kunngjorde de at React Native endret sin lisens for å bruke 3-klausulen BSD-lisensen til MIT. ]

Samarbeid

Reager er et åpen kildekode-bibliotek, det kan endres av hvem som helst. Dette gjør at enhver kunnskapsrik bruker kan foreslå endringer eller forbedringer til biblioteket. Imidlertid var alle disse modifikasjonene i utgangspunktet ikke enkle å finne siden de var spredt på forskjellige sider, så Facebook bestemte seg for å opprette et depot på GitHub. På denne måten kan det lette organiseringen av React-fellesskapet og utviklerne og lagre endringene som er gjort av både fellesskapet og Facebook-utviklingsgruppen.

Eksterne lenker

• React Resource List – AwesomeReact
• React Native App List – React Native Apps
• React Tutorial på spansk - Introduksjon til React

Se også

• Portal: Gratis programvare . Innhold relatert til fri programvare .