React (JavaScripti raamistik)

Allikas: Vikipeedia
Jump to navigation Jump to search

React (ka React.js või ReactJS) on arvutiteaduses JavaScripti raamistik[1] kasutajaliideste loomiseks.

Seda haldavad Facebook, Instagram, üksikarendajate kogukond ja korporatsioonid.[2][3][4]

React võimaldab arendajatel luua suuremahulisi veebirakendusi, mis kasutavad andmeid ja muutuvad ajas, ilma et veebilehte uuesti laaditaks. Selle eesmärk on eelkõige kiiruse, lihtsuse ja skaleeritavuse tagamine. React tegeleb rakendustes ainult kasutajaliidestega. See vastab View osale Model-View-Controller (MVC) mudelis ning seda on võimalik kombineerida teiste JavaScripti teekide või raamistikega MVC mudelis, näiteks AngularJS.[5]

Ajalugu[muuda | muuda lähteteksti]

Reacti looja on Facebooki tarkvaraarendaja Jordan Walke. Idee sai alguse raamistikust XHP, mis on HTML-komponentide raamistik PHP-le.[6] See võeti esmakordselt kasutusele Facebooki ajajoonel 2011. aastal ja hiljem tehti seda ka veebilehel Instagram.com 2012. aastal.[7] Lähtekood avaldati JSConfi USA konverentsil 2013. aasta mais.

React Native, mis võimaldab Androidi, iOS-i, ja UWP rakenduste arendamist Reactiga, avaldati Facebooki React.js Confi konverentsil 2015. aasta veebruaris ja lähtekood avaldati 2015. aasta märtsis.

18. aprillil 2017 avaldas Facebook React Fiberi, Reacti raamistiku uue algoritmi kasutajaliideste loomiseks.[8] React Fiber on alus edaspidistele täiustustele ja uute funktsioonide arendamisele.[9]

Kasutamine[muuda | muuda lähteteksti]

Järgnev on algeline näide, kuidas kasutada React html koodis, kasutades JSX-i ja ECMAScript 2015 JavaScripti süntaksit.

<div id="myReactApp"></div>

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  }

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>

Klass Greeter on Reacti komponent, mis aktsepteerib argumenti greeting. Meetod ReactDOM.render loob isendi Greeter komponendist, seab greeting muutuja väärtuseks 'Hello World' ja paigutab renderdatud komponendi alamelemendina DOM-elementi, mille id on myReactApp.

Babel transpileerib ülaloleva ECMAScript 2015 koodi ES5 koodiks, mis näeb välja nii:

React.createElement(
        "h1",
        null,
        this.props.greeting
      );

Brauseris kuvades on tulemus järgmine:

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

Iseärasused[muuda | muuda lähteteksti]

Ühesuunaline andmete liikumine[muuda | muuda lähteteksti]

Reacti suurim potentsiaal on muutumatute parameetrite kasutamine komponentide vahel. Komponent ei tohi otseselt muuta ühtegi omadust, mis sellele anti. Selle asemel tuleb alamkomponendile anda kaasa funktsioon, mis muudab seda omadust ülemkomponendis. Teisisõnu omadused liiguvad komponentide suhtes ülevalt alla, aga andmetemuutused liiguvad funktsiooni kutsetena alt üles. Seda mehhanismi tuntakse nimega Flux.[10][11] Mitmeid Fluxi implementatsioone on loodud selle avaldamisest saati, kuid populaarseimaks on välja kujunenud Redux.[12]

Virtuaalne DOM[muuda | muuda lähteteksti]

Teine märkimisväärne detail on virtuaalne Document Object Model või teisisõnu virtuaalne DOM-i kasutamine. React hoiab mälus rakenduse andmestruktuuri, arvutab struktuuri muutumise korral erinevuse eelmise struktuuriga ja siis uuendab muutunud osad brauseri kuvatavas DOM-is efektiivselt.[13] See võimaldab arendajal programmeerida nii, justnagu renderdataks nagu terve leht muudatuse järel uuesti, kuigi React uuendab ainult need osad, mis tegelikult muutusid.

JSX[muuda | muuda lähteteksti]

Reacti komponendid on tavaliselt kirjutatud JSX-i abil, mis on JavaScripti süntaksi laiendus, mis lubab kasutada HTML-notatsiooni ja HTML-märgendite süntaksit alamkomponentide renderdamiseks.[14] See on Reacti spetsiifiline grammatikalaiendus JavaScriptile nagu nüüdseks vananenud E4X. HTML-i süntaks töödeldakse Reacti raamistiku JavaScripti väljakutseteks. Arendajad võivad kirjutada ka puhtas JavaScriptis. JSX sarnaneb ka PHP-le Facebooki poolt välja töötatud süntaksilaiendusega XHP. JSX näeb välja nagu tavaline HTML. Näide JSX-koodist:

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

export default App;
Mitmetasemelised elemendid

Elemendid peavad olema ümbritsetud konteinerelemendiga nagu <div> element üleval näidatuna. Alates Reacti versioonist 16.0 on võimalik tagastada massiiv elementidest, fragmentidest ja sõnedest.[15]

Atribuudid

Lisaks tavalistele HTML-i atribuutidele on võimalik kasutada vabalt valitud atribuute. Sellised parameetrid peavad olema lisatud data- eesliitega. Versioonist 16.0 lastakse vabalt valitud atribuudid läbi DOM-i ilma data- eesliiteta.[16]

JavaScripti väljendid

JavaScripti väljendeid (aga mitte avaldisi) saab kasutada JSX-i sees koos loogeliste sulgudega {}:

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>{10+1}</h1>
      </div>
    );
  }
}

export default App;

Ülalolev näide renderdub brauseris järgmiselt:

<div>
  <h1>11</h1>
</div>
Tingimuslikud avaldised

If-else avaldisi ei saa kasutada JSX-i sees, aga tingimuslikke avaldisi saab kasutada sellegipoolest kolmekomponendiliste väljenditena. Allolev näide renderdab { i === 1 ? 'true' : 'false' } sõnena 'true', sest i on võrdne arvuga 1.

import React from 'react';

class App extends React.Component {
  render() {
    const i = 1;
    return (
      <div>
        <h1>{ i === 1 ? 'true' : 'false' }</h1>
      </div>
    );
  }
}

export default App;

Lisaks sõnede tagastamisele läbi tingimuslike operaatorite saab tagastada funktsioone ja koodifragmente.

import React from 'react';

class App extends React.Component {
  render() {
    const arr = [1, 2, 3];
    return (
      <div>
        { 
          arr.length > 0 ?
            arr.map(function(int) {
              return (<div>Section {int}</div>)
            })
            : null
        }
      </div>
    );
  }
}

export default App;

Ülal näites kui arr massiiv sisaldab elemente (neid on näites 3), siis renderdub järgmine:

<div>
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

Mall:Sect-stub

ReactJS-i kriitika[muuda | muuda lähteteksti]

ReactJS-i murekohaks on suur mälu (RAM) kasutus, kuna see kasutab virtuaalse DOM-i kontseptsiooni. See tähendab, et kasutajaliidese kujutist hoitakse mälus ja sünkroonitakse reaalse DOM-iga, mille eest vastutab ReactDOM-i teek.[17]

Viited[muuda | muuda lähteteksti]

  1. "A JavaScript library for building user interfaces – React". facebook.github.io. Vaadatud 13. Aprill 2017. 
  2. Krill, Paul (15. Mai 2014). "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld. 
  3. Hemel, Zef (3. Juuni 2013). "Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews". InfoQ. 
  4. Dawson, Chris (25. Juuli 2014). "JavaScript’s History and How it Led To ReactJS". The New Stack. 
  5. "Angular vs React: Feature Comparison of JS Tools". ThinkMobiles. 22. Veebruar 2017. 
  6. "React (JS Library): How was the idea to develop React conceived and how many people worked on developing it and implementing it at Facebook?". Quora. 
  7. "Pete Hunt at TXJS". 
  8. Frederic Lardinois (18. Aprill 2017). "Facebook announces React Fiber, a rewrite of its React framework". TechCrunch. Vaadatud 19. Aprill 2017. 
  9. "React Fiber Architecture". Github. Vaadatud 19. Aprill 2017. 
  10. https://facebook.github.io/flux/docs/in-depth-overview.html#content
  11. https://medium.com/@cabot_solutions/flux-the-react-js-application-architecture-a-comprehensive-study-fd2585d06483
  12. https://stateofjs.com/2016/statemanagement/
  13. "Refs and the DOM". React Blog. 
  14. "JSX in Depth". Vaadatud 17. November 2015. 
  15. Clark, Andrew (26. September 2017). "React v16.0§New render return types: fragments and strings". React Blog. 
  16. Clark, Andrew (26. September 2017). "React v16.0§Support for custom DOM attributes". React Blog. 
  17. https://reactjs.org/docs/faq-internals.html