Reagovat (webový rámec) - React (web framework) - Wikipedia

Reagovat
React-icon.svg
Původní autořiJordan Walke
VývojářiFacebook a komunita
První vydání29. května 2013; před 7 lety (2013-05-29)[1]
Stabilní uvolnění
17.0.0[2] Upravte to na Wikidata / 20. října 2020; před 2 měsíci (20. října 2020)
Úložiště
Upravte to na Wikidata
NapsánoJavaScript
PlošinaWebová platforma
TypKnihovna JavaScript
LicenceLicence MIT
webová stránkareagovat.org Upravte to na Wikidata

Reagovat (také známý jako React.js nebo ReactJS) je open-source, přední část, Knihovna JavaScript[3] pro stavbu uživatelská rozhraní nebo komponenty uživatelského rozhraní. Udržuje ji Facebook a komunita jednotlivých vývojářů a společností.[4][5][6]React lze použít jako základ při vývoji jednostránkový nebo mobilní aplikace. React se však týká pouze vykreslování dat do DOM, a proto vytváření aplikací React obvykle vyžaduje použití dalších knihoven pro řízení státu a směrování.[7][8] Redux[9] a React Router[10] jsou příslušné příklady takových knihoven.

Základní použití

Následuje základní příklad použití React v HTML s JSX a JavaScript.

1<div id=„myReactApp“></div>23<skript typ=„text / babel“>4  funkce Greeter(rekvizity) {5    vrátit se <h1>{rekvizity.Pozdrav}</ h1>6  }7  var Aplikace = <Greeter Pozdrav="Ahoj světe!" />;8  ReactDOM.poskytnout(Aplikace, dokument.getElementById('myReactApp'));9</skript>

The Greeter function je komponenta React, která přijímá vlastnost Pozdrav. Proměnná Aplikace je instancí Greeter součást, kde Pozdrav vlastnost je nastavena na 'Ahoj světe!'. The ReactDOM.render metoda poté vykreslí naši Greeterovou komponentu uvnitř DOM prvek s id myReactApp.

Při zobrazení ve webovém prohlížeči bude výsledek

<div id=„myReactApp“>  <h1>Ahoj světe!</h1></div>

Pozoruhodné funkce

Součásti

Kód reakce je vytvořen z entit nazývaných komponenty. Komponenty lze vykreslit na konkrétní prvek v souboru DOM pomocí knihovny React DOM. Při vykreslování komponenty lze předat hodnoty známé jako „rekvizity“[11]:

ReactDOM.poskytnout(<Greeter Pozdrav="Ahoj světe!" />, dokument.getElementById('myReactApp'));

Dva primární způsoby deklarace komponent v Reactu jsou funkční komponenty a komponenty založené na třídě.

Funkční součásti

Funkční komponenty jsou deklarovány pomocí funkce, která poté vrací nějaký JSX.

konst Pozdrav = (rekvizity) => <div>Ahoj, {rekvizity.název}!</ div>;

Komponenty založené na třídě

Komponenty založené na třídě jsou deklarovány pomocí ES6 třídy.

třída ParentComponent rozšiřuje Reagovat.Součástka {  Stát = { barva: 'zelený' };  poskytnout() {    vrátit se (      <ChildComponent barva={tento.Stát.barva} />    );  }}

Virtuální DOM

Další pozoruhodnou vlastností je použití virtuálního Model objektu dokumentu nebo virtuální DOM. Reagovat vytvoří v paměti mezipaměť datové struktury, vypočítá výsledné rozdíly a poté efektivně aktualizuje zobrazený DOM v prohlížeči.[12]. Tento proces se nazývá smíření. To umožňuje programátorovi psát kód, jako by se při každé změně vykreslila celá stránka, zatímco knihovny React vykreslují pouze dílčí součásti, které se ve skutečnosti mění. Toto selektivní vykreslování poskytuje výrazné zvýšení výkonu. Šetří námahu při přepočtu stylu CSS, rozložení stránky a vykreslení pro celou stránku.

Metody životního cyklu

Metody životního cyklu používají formu hákování který umožňuje provádění kódu v nastavených bodech během životnosti komponenty.

  • shouldComponentUpdate umožňuje vývojáři zabránit zbytečnému opětovnému vykreslení komponenty vrácením false, pokud se vykreslení nevyžaduje.
  • componentDidMount je volána, jakmile je komponenta „připojena“ (komponenta byla vytvořena v uživatelském rozhraní, často spojením s DOM uzel). To se běžně používá ke spuštění načítání dat ze vzdáleného zdroje prostřednictvím API.
  • componentWillUnmount je volána bezprostředně před zbořením komponenty nebo „odpojením“. To se běžně používá k vymazání závislostí zdrojů náročných na komponentu, které se jednoduše neodstraní při odpojení komponenty (např. Odebrání jakékoli setInterval () instance, které souvisejí s komponentou, nebo „posluchač událostí „nastaveno na„ dokumentu “kvůli přítomnosti komponenty)
  • poskytnout je nejdůležitější metoda životního cyklu a jediná požadovaná v jakékoli komponentě. Obvykle se volá pokaždé, když se aktualizuje stav komponenty, což by se mělo projevit v uživatelském rozhraní.

JSX

JSX nebo JavaScript XML, je rozšíření syntaxe jazyka JavaScript.[13] Podobný vzhled jako HTML poskytuje JSX způsob, jak strukturovat vykreslování komponent pomocí syntaxe známé mnoha vývojářům. Komponenty React jsou obvykle psány pomocí JSX, i když nemusí být (komponenty mohou být také psány v čistém JavaScriptu). JSX je podobný jiné syntaxi rozšíření vytvořené společností Facebook pro PHP volala XHP.

Příklad kódu JSX:

 1třída Aplikace rozšiřuje Reagovat.Součástka { 2  poskytnout() { 3    vrátit se ( 4      <div> 5        <str>Záhlaví</ p> 6        <str>Obsah</ p> 7        <str>Zápatí</ p> 8      </ div> 9    );10  }11}
Vnořené prvky

Více prvků na stejné úrovni musí být zabaleno do jednoho prvku React, jako je například <div> prvek zobrazený výše, fragment vymezený <Fragment> nebo ve zkratkové formě <>, nebo se vrátil jako pole.[14][15]


Atributy

JSX poskytuje řadu atributů prvků určených k zrcadlení těch, které poskytuje HTML. Vlastní atributy lze také předat komponentě.[16] Všechny atributy obdrží komponenta jako rekvizity.

Výrazy JavaScriptu

JavaScript výrazy (ale ne prohlášení ) lze použít uvnitř JSX se složenými závorkami {}:

  <h1>{10+1}</ h1>

Výše uvedený příklad se vykreslí 

  <h1>11</h1>
Podmíněná prohlášení

Příkazy if – else nelze použít uvnitř JSX, ale místo toho lze použít podmíněné výrazy. Níže uvedený příklad se vykreslí {i === 1? 'true': 'false'} jako řetězec 'skutečný' protože i se rovná 1.

 1třída Aplikace rozšiřuje Reagovat.Součástka { 2  poskytnout() { 3    konst i = 1; 4    vrátit se ( 5      <div> 6        <h1>{ i === 1 ? 'skutečný' : 'Nepravdivé' }</ h1> 7      </ div> 8    ); 9  }10}

Výše uvedené vykreslí:

<div>  <h1>skutečný</h1></div>

Funkce a JSX lze použít v podmíněných podmínkách:

 1třída Aplikace rozšiřuje Reagovat.Součástka { 2  poskytnout() { 3    konst sekce = [1, 2, 3]; 4    vrátit se ( 5      <div> 6        {sekce.délka > 0 && sekce.mapa(n => ( 7            / * 'klávesa' se používá při reakci ke sledování položek seznamu a jejich změn * / 8            / * Každý 'klíč' musí být jedinečný * / 9            <div klíč={"sekce-" + n}>Sekce {n}</ div>10        ))}11      </ div>12    );13  }14}

Výše uvedené vykreslí:

<div>  <div>Sekce 1</div>  <div>Sekce 2</div>  <div>Část 3</div></div>

Kód napsaný v JSX vyžaduje převod pomocí nástroje, jako je Babel než tomu budou webové prohlížeče rozumět.[17] Toto zpracování se obvykle provádí během a tvorba softwaru proces před aplikací nasazen.

Architektura nad rámec HTML

Základní architektura Reactu platí i mimo vykreslování HTML v prohlížeči. Například Facebook má dynamické grafy, které se vykreslují do <canvas> značky,[18] a Netflix a PayPal použijte univerzální načítání k vykreslení identického HTML na serveru i v klientovi.[19][20]

Reagovat háčky

Háčky jsou funkce, které vývojářům umožňují „zapojit se“ do funkcí Reagovat na stav a životní cyklus z komponent funkcí.[21] Háčky nefungují uvnitř tříd - umožňují vám používat React bez tříd.[22]

React poskytuje několik vestavěných háků jako useState,[23] useContext, useReducer a useEffect[24]. Ostatní jsou zdokumentovány v příručce Hooks API Reference.[25] useState a useEffect, které jsou nejpoužívanější, slouží ke kontrole stavu a vedlejších účinků.

Pravidla háčků

Existují pravidla háčků[26] které popisují charakteristický vzor kódu, na který se háčky spoléhají.

  1. Háčky by měly být volány pouze na nejvyšší úrovni (ne uvnitř smyček nebo příkazů if).
  2. Háčky by měly být volány pouze z komponent React Function, nikoli z běžných funkcí nebo komponent třídy

Ačkoli tato pravidla nelze za běhu vynutit, lze nástroje pro analýzu kódu, jako jsou linters, nakonfigurovat tak, aby během vývoje detekovaly mnoho chyb. Pravidla platí jak pro použití háků, tak pro implementaci vlastních háků[27], které mohou volat jiné háčky.

Společné idiomy

React se nepokouší poskytnout kompletní „knihovnu aplikací“. Je navržen speciálně pro vytváření uživatelských rozhraní[3] a proto nezahrnuje mnoho nástrojů, které někteří vývojáři mohou považovat za nutné k vytvoření aplikace. To umožňuje volbu libovolných knihoven, které vývojář dává přednost provádění úkolů, jako je provádění přístupu k síti nebo místní úložiště dat. Jak knihovna dozrává, objevily se běžné vzorce používání.

Využití architektury Flux

Podporovat Reactův koncept jednosměrného toku dat (s kterým by se dalo kontrastovat AngularJS (obousměrný tok), architektura Flux představuje alternativu k populární řadič pohledu modelu architektura. Flux funkce akce které jsou zasílány přes ústřednu odesílatel do a obchoda změny v obchodu se přenesou zpět do zobrazení.[28] Při použití s ​​Reactem se toto šíření provádí prostřednictvím vlastností komponent.

Flux lze považovat za variantu vzor pozorovatele.[29]

Komponenta React pod architekturou Flux by neměla přímo upravovat žádné rekvizity, které jí byly předány, ale měla by být předána funkcím zpětného volání, které vytvářejí akce které jsou odeslány dispečerem k úpravě úložiště. Akce je objekt, jehož odpovědností je popsat, k čemu došlo: například akce popisující jednoho uživatele „sledujícího“ jiného může obsahovat ID uživatele, ID cílového uživatele a typ USER_FOLLOWED_ANOTHER_USER.[30] Obchody, které lze považovat za modely, se mohou měnit v reakci na akce přijaté od dispečera.

Tento vzorec je někdy vyjádřen jako „vlastnosti plynou dolů, akce plynou nahoru“. Od svého vzniku bylo vytvořeno mnoho implementací Fluxu, možná nejznámější bytosti Redux, který představuje jediný obchod, často nazývaný a jediný zdroj pravdy.[31]

Budoucí vývoj

Stav projektu lze sledovat prostřednictvím diskusního fóra základního týmu.[32] Hlavní změny Reagovat však procházejí problémy úložiště Future of React a vytáhnout žádosti.[33][34] To umožňuje komunitě React poskytovat zpětnou vazbu o nových potenciálních funkcích, experimentálních API a vylepšení syntaxe JavaScriptu.

Dějiny

React vytvořil Jordan Walke, softwarový inženýr společnosti Facebook, který vydal raný prototyp React s názvem „FaxJS“.[35][36] Byl ovlivněn XHP, an HTML knihovna komponent pro PHP. Poprvé byl nasazen na Facebooku Novinky v roce 2011 a později Instagram v roce 2012.[37] Byla otevřena v JSConf USA v květnu 2013.[36]

Reagovat nativní, což umožňuje nativní Android, iOS, a UWP vývoj s React, byl oznámen na Facebooku React Conf v únoru 2015 a open-source v březnu 2015.

18. dubna 2017 oznámil Facebook Reagovat Fiber, nový základní algoritmus knihovny React pro vytváření uživatelská rozhraní.[38] React Fiber se měl stát základem budoucích vylepšení a vývoje funkcí knihovny React.[39][potřebuje aktualizaci ]

26. září 2017 byla pro veřejnost uvedena React 16.0.[40]

16. února 2019 byla pro veřejnost uvedena React 16.8.[41] Vydání představilo React Hooks.[42]

10. srpna 2020 tým React oznámil prvního kandidáta na vydání pro React v17.0, který je pozoruhodný jako první hlavní vydání bez větších změn v rozhraní API pro vývojáře React.[43]

Verze
VerzeDatum vydáníZměny
0.3.029. května 2013První veřejné vydání
0.4.020. července 2013Podpora uzlů komentářů
{/ * * /}
, vylepšená rozhraní API pro vykreslování na straně serveru, odstraněna React.autoBind, podpora klíčové rekvizity, vylepšení formulářů, opravené chyby.
0.5.020. října 2013Vylepšit využití paměti, Podpora pro události výběru a složení, Podpora pro getInitialState a getDefaultProps v mixinech, Přidáno React.version a React.isValidClass, Vylepšená kompatibilita pro Windows.
0.8.020. prosince 2013Přidaná podpora pro řádky a sloupce, odložení a asynchronizace, smyčka pro atributy
0.9.020. února 2014Přidaná podpora pro crossOrigin, stahování a hrefLang, mediaGroup a ztlumení, sandbox, bezproblémové a srcDoc, atributy oboru, přidána libovolná, arrayOf, komponenta, oneOfType, renderovatelná, tvar do React.PropTypes, přidaná podpora pro události onMouseOver a onMouseOut, přidaná podpora pro onLoad a onError na elementech.
0.10.021. března 2014Přidaná podpora pro atributy srcSet a textAnchor, přidat funkci aktualizace pro neměnná data, zajistit, aby všechny neplatné prvky nevkládaly uzavírací značku.
0.11.017. července 2014Vylepšená podpora SVG, Normalizovaná událost e.view, Příkaz Update $ apply, Přidaná podpora pro jmenné prostory, Přidáno nové API transformWithDetails, obsahuje předem připravené balíčky pod dist /, MyComponent () nyní vrací deskriptor, nikoli instanci.
0.12.021. listopadu 2014Přidány nové funkce Operátor Spread ({...}) zavedený k zastarání tohoto. TransferPropsTo, přidaná podpora pro acceptCharset, classID, manifest HTML atributy, React.addons.batchedUpdates přidané do API, @jsx React.DOM již není vyžadován, opravené problémy s přechody CSS.
0.13.010. března 2015Zastaralé vzory, které varovaly v 0,12, již nefungují, pořadí rozlišení ref se změnilo, odstraněné vlastnosti this._pendingState a this._rootNodeID, podpora tříd ES6, přidání API React.findDOMNode (komponenta), podpora iterátorů a neměnných sekvencí js, přidáno nové funkce React.addons.createFragment, zastaralá sada React.addons.classSet.
0.14.129. října 2015Přidaná podpora pro srcLang, výchozí, atributy druhu a atribut barvy, zajištěný starší přístup .props na uzlech DOM, opravená scryRenderedDOMComponentsWithClass, přidána reagovat-dom.js.
15.0.07. dubna 2016Počáteční vykreslení nyní místo generování HTML používá document.createElement, Žádné další , Vylepšená podpora SVG, ReactPerf.getLastMeasurements () je neprůhledný, Nové zastarávání zavedeny s varováním, Opraveno několik malých úniků paměti, React DOM nyní podporuje citovat a profilovat atributy HTML a vlastnosti CSS cssFloat, gridRow a gridColumn.
15.1.020. května 2016Oprava chyby při dávkování, Zajištění použití nejnovějšího přiřazení objektu, Oprava regrese, Odebrat použití nástroje pro sloučení, Přejmenování některých modulů.
15.2.01. července 2016Zahrnout informace o zásobníku komponent, Zastavit ověřování rekvizit v době připojení, Přidat React.PropTypes.symbol, Přidat manipulaci onLoad do a manipulaci onError do , Přidat isRunning () API, Opravit regresi výkonu.
15.3.030. července 2016Přidat React.PureComponent, Opravit problém s vykreslením vnořeného serveru, Přidat xmlns, xmlnsXlink na podporu atributů SVG a referrerPolicy na atributy HTML, aktualizace Doplněk React Perf, Opravený problém s ref.
15.3.119. srpna 2016Zlepšit výkon vývojových sestavení, Vyčistit interní háčky, Upgradovat fbjs, Zlepšit dobu spuštění React, Opravit únik paměti ve vykreslování serveru, opravit React Test Renderer, Změnit invariant trackedTouchCount na konzolu. Chyba.
15.4.016. listopadu 2016Balíček React a sestavení prohlížeče již neobsahují React DOM, Vylepšený výkon vývoje, Opravené občasné chyby testů, aktualizaci batchedUpdates API, React Perf a ReactTestRenderer.create ().
15.4.123. listopadu 2016Přiřazení proměnné restrukturalizace, opravené zpracování událostí, opravená kompatibilita sestavení prohlížeče s prostředími AMD.
15.4.26. ledna 2017Opravené problémy s sestavením, přidané chybějící závislosti balíků, vylepšené chybové zprávy.
15.5.07. dubna 2017Přidáno reagovat-dom / test-utils, Odebráno peerDependencies, Opraven problém s Closure Compiler, Přidáno varování o opuštění pro React.createClass a React.PropTypes, Opravená chyba Chrome.
15.5.411. dubna 2017Opravte kompatibilitu s enzymem vystavením batchedUpdates na mělkém vykreslovači, aktualizujte verzi typů prop, opravte balíček reag-addons-create-fragment tak, aby zahrnoval transformaci uvolněné envify.
15.6.013. června 2017Přidejte podporu proměnných CSS do atributů stylu a vlastností stylu mřížky, opravte podporu AMD pro doplňky v závislosti na reakci, odeberte zbytečnou závislost, přidejte varování o opuštění podpory pro tovární pomocníky React.createClass a React.DOM.
16.0.026. září 2017Vylepšené zpracování chyb se zavedením „hranic chyb“, React DOM umožňuje předávání nestandardních atributů, drobné změny chování setState, odebrání build-with-addons.js, přidání React.createClass jako create-react-class, React.PropTypes jako typy prop, React.DOM jako továrny reagující na domovy, změny chování metod plánování a životního cyklu.
16.1.09. listopadu 2017Ukončování verzí Bower, oprava náhodné další globální proměnné v sestaveních UMD, oprava vypalování onMouseEnter a onMouseLeave, oprava zástupného symbolu