Reagál

Reagál
Típusú ingyenes és nyílt forráskódú szoftverek , webes keretrendszer , függvénytár és JavaScript könyvtár
Szerző Jordan Walke _  _
Fejlesztő Meta Platforms , Jordan Walke [d] , Sebastian Markbåge [d] , Daniil Abramov [d] , Rachel Nabors [d] és Andrew Clark
Beírva JavaScript
Operációs rendszer platformközi
Első kiadás 2013. május 29
legújabb verzió
Állapot Ide vonatkozó
Engedély MIT licenc [2] [3]
Weboldal reactjs.org ​(  angol)
ar.reactjs.org ​(  Ar)
ru.reactjs.org ​(  orosz)

A React (néha React.js vagy ReactJS ) egy nyílt forráskódú JavaScript - könyvtár [4] felhasználói felületek fejlesztésére .

A Reactot a Facebook , az Instagram , valamint az egyes fejlesztőkből és vállalatokból álló közösség fejleszti és tartja karban [5] [6] [7] .

A React egyoldalas és mobilalkalmazások fejlesztésére használható. Célja a nagy fejlesztési sebesség, az egyszerűség és a méretezhetőség biztosítása . A felhasználói felületek fejlesztésére szolgáló könyvtárként a React-ot gyakran használják más könyvtárakkal, például a MobX, Redux és GraphQL könyvtárakkal .

Fejlesztési előzmények

A Reactot Jordan Valke, a Facebook szoftvermérnöke készítette. Hatással volt rá az XHP , a PHP  komponens alapú HTML keretrendszere [8] . A Reactot először a Facebook hírfolyamában használták 2011-ben, majd az Instagram hírfolyamában 2012 -ben [9] . A React forráskódot 2013 májusában nyitották meg a JSConf US konferencián.

A React Native -t a Facebook "React.js Conf"-ján jelentették be 2015 februárjában , a forráskód pedig 2015 márciusában jelent meg . Lehetővé teszi natív Android , iOS és UWP alkalmazások fejlesztését a React segítségével.

2017. április 18- án a Facebook bejelentette a React Fiber -t, a React [10] újraírt és optimalizált változatát . A React Fiber lesz az alapja az összes jövőbeli funkció és fejlesztés kifejlesztésének [11] .

Használati példa

Az alábbiakban egy példa látható a React használatára HTML-ben JSX-szel és JavaScripttel.

< div id = "myReactApp" ></ div > < script type = "text/babel" > class Greeter kiterjeszti React . Component { render () { return < h1 > { this . kellékek . üdvözlet } < /h1> } } ReactDOM . render ( < Greeter greeting = "Hello World!" /> , document . getElementById ( 'myReactApp' )); </ script >

Az osztály Greeter egy React komponens, amely elfogad egy greeting. A metódus ReactDOM.renderaz osztály (összetevő) egy példányát előállítja Greeter, amelynek tulajdonsága greetingegyenlő , és a renderelt komponenst beágyazott elemként "Hello World"beszúrja a DOM elembe az azonosítóval .myReactApp

Amikor megjelenik egy webböngészőben, az eredmény a következő lesz:

< div id = "myReactApp" > < h1 > Hello World! </ h1 > </ div >

Jellemzők

Egyirányú adatátvitel

A tulajdonságok átadódnak a szülőkomponensekről a gyermekkomponensekre. Az összetevők a tulajdonságokat megváltoztathatatlan értékek halmazaként kapják meg , így az összetevő nem módosíthatja közvetlenül a tulajdonságokat, de visszahívási függvényeken keresztül változásokat idézhet elő . Ezt a mechanizmust "tulajdonságok lefelé, események felfelé" nevezik.  

Virtuális DOM

A React egy virtuális DOM -ot ( virtuális DOM ) használ .  A React létrehoz egy memórián belüli gyorsítótár - struktúrát, amely lehetővé teszi az interfész előző és jelenlegi állapota közötti különbség kiszámítását a böngésző DOM optimális frissítése érdekében. Így a programozó dolgozhat az oldallal, feltételezve, hogy az teljes mértékben frissül, de a könyvtár maga dönti el, hogy az oldal mely összetevőit kell frissíteni.

redux

A React-ot gyakran a Redux -szal együtt használják az összetevők állapotának kezelésére.

jsx

A JavaScript XML (JSX) egy JavaScript szintaxis-kiterjesztés, amely lehetővé teszi egy HTML-szerű szintaxis használatát az interfész szerkezetének leírására. Általános szabály, hogy a komponensek JSX-el íródnak, de lehetséges a sima JavaScript használata is [12] . A JSX egy másik nyelvre hasonlít, amelyet a Facebook készített a PHP-bővítményhez, az XHP-t.

Életciklus-módszerek

Az életciklus-módszerek lehetővé teszik a fejlesztő számára, hogy kódot futtasson az összetevő életciklusának különböző szakaszaiban. Például:

  • shouldComponentUpdate - lehetővé teszi, hogy megakadályozza a komponens újrarajzolását a visszaküldéssel false, ha nincs szükség újrarajzolásra.
  • componentDidMount - a komponens első renderelése után hívják meg. Gyakran használják adatok távoli forrásból API -n keresztüli lekérésére .
  • render - az életciklus legfontosabb módszere. Minden komponensnek rendelkeznie kell ezzel a módszerrel. Általában akkor hívják meg, ha az összetevő adatai megváltoznak, hogy újrarajzolja az adatokat a felületen.

Nem csak a HTML megjelenítése a böngészőben

A React nem csak a HTML megjelenítésére szolgál a böngészőben. Például a Facebook dinamikus diagramokkal rendelkezik, amelyek a <canvas>. A Netflix és a PayPal izomorf letöltéseket használ, hogy azonos HTML-t jelenítsen meg a szerveren és a kliensen.

React Hooks

A horgok lehetővé teszik az állapot és egyéb React jellemzők használatát osztályok írása nélkül [13] .

Az egyéni horgok létrehozása lehetővé teszi, hogy a komponens logikáját újrafelhasználható funkciókba helyezze. [14] .

Irodalom

  • Mardan Azat. A reakció gyors. Webes alkalmazások React, JSX, Redux és GraphQL rendszereken. - Szentpétervár. : " Péter ", 2019. - S. 560. - ISBN 978-5-4461-0952-4 .
  • Banks Alex, Porcello Eva. GraphQL: Lekérdezési nyelv modern webes alkalmazásokhoz. - Szentpétervár. : " Péter ", 2019. - S. 240. - ISBN 978-5-4461-1143-5 .
  • Banks Alex, Porcello Eva. React és Redux: funkcionális webfejlesztés. - Szentpétervár. : " Péter ", 2018. - S. 336. - ISBN 978-5-4461-0668-4 .
  • Thomas Mark Tilens. Reagálj akcióban. - Szentpétervár. : " Péter ", 2019. - S. 368. - ISBN 978-5-4461-0999-9 .
  • Kirupa Chinnatambi. Tanulási reakció. - Szentpétervár. : " Péter ", 2019. - S. 368. - ISBN 978-5-04-098028-4 .

Jegyzetek

  1. ↑ 18.2.0 (2022. június 14.)
  2. ↑ React v16.0
  3. ↑ Változtassa meg a licencet és távolítsa el a SZABADALMAkra vonatkozó hivatkozásokat
  4. ↑ React – JavaScript-könyvtár felhasználói felületek létrehozásához. . Reagálj . Letöltve: 2018. április 7. Az eredetiből archiválva : 2018. július 19.
  5. ↑ Krill, Paul React: Gyorsabb, gördülékenyebb felhasználói felület készítése adatvezérelt webalkalmazásokhoz . InfoWorld (2014. május 15.). Letöltve: 2018. május 24. Az eredetiből archiválva : 2018. június 12.
  6. ↑ Hemel, Zef Facebook React JavaScript felhasználói felületek könyvtára vegyes értékeléseket kapott . InfoQ (2013. június 3.). Letöltve: 2018. május 24. Az eredetiből archiválva : 2018. június 12.
  7. ↑ Dawson, Chris JavaScript története és hogyan vezetett a reakcióhozJS . The New Stack (2014. július 25.). Letöltve: 2018. május 24. Az eredetiből archiválva : 2018. június 12.
  8. ↑ React (JS Library): Hogyan született meg a React fejlesztésének ötlete, és hányan dolgoztak a kifejlesztésén és megvalósításán a Facebooknál? . Quora .
  9. ↑ Pete Hunt a TXJS-nél . Letöltve: 2018. május 24. Az eredetiből archiválva : 2017. július 31.
  10. ↑ Frederic Lardinois . A Facebook bejelentette a React Fiber-t, a React keretrendszer átírását, a TechCrunch-t (2017. április 18.). Az eredetiből archiválva : 2018. június 14. Letöltve: 2018. május 24.
  11. ↑ React Fibre Architecture . Github . Letöltve: 2017. április 19. Az eredetiből archiválva : 2018. május 10.
  12. ↑ React JSX nélkül -  React . reactjs.org. Letöltve: 2018. július 19. Az eredetiből archiválva : 2018. július 19.
  13. ↑ Gyors pillantás a horgokra – React . en.reactjs.org. Letöltve: 2019. október 5. Az eredetiből archiválva : 2019. október 12.
  14. ↑ Egyéni horgok létrehozása - React . en.reactjs.org. Letöltve: 2019. október 5. Az eredetiből archiválva : 2019. június 5.