Komentáře k článku

Redux + React – React

A je zde poslední díl seriálu. Dnes si napíšeme sadu zobrazovacích komponent pro náš pokusný todo list nad knihovnou React. Představíme si také rozšíření javascriptové syntaxe zvané ‚jsx‘ určené pro zapisování tagů přimo do kódu.

Zpět na článek

13 komentářů k článku Redux + React – React:

  1. Tomáš RandusAutor příspěvku

    Chápu jak to myslíte. Já se na to dívám tak, že nebýt JSX tak v tom těžko bude tolik lidí psát. Takže by to byla knihovna šikovná, ale ne významná. Ale je to opravdu jen o slovech.

    1. ivan

      Re:
      Jsx syntax je sice příjemná, ale důležitější je, že v reactu lze psát stylem jako na backendu – jednorázově vyrendruješ data a hotovo a při změně dat přerenderuješ. Nic se ti tam magicky nepodsouvá „ze zadu“ při změně dat.

  2. Jakub Vrána

    Inline event handlery
    Navěšování JavaScriptového kódu přímo do HTML přes atributy jako onclick a podobné se už docela dlouho považuje za anti-pattern. Je to v Reactu jinak? Kromě toho, že se míchá HTML kód s JS do jedněch špaget (k čemuž kvůli JSX tak jako tak dochází), tak prohlížeče pro každý takto navěšený kód vytvoří novou anonymní funkci s daným kódem, což je při opakování u každé položky seznamu neefektivní. Ve starém dobrém jQuery by se použil kód:

    $('#list').on('click', '.remove', function() {
      removeItem($(this).data('id'));
    });
    

    To vytvoří kód, který se v prohlížečích vykoná efektivně. Jak se něco takového dělá v Reactu?

    1. ivan

      Re: Inline event handlery
      Nevím jestli úplně rozumím, ale působí to na mě trochu jako omyl ohledně jsx. Jsx je javascript – respektive syntaktický cukr nad ním, který se zapisuje podobně jako html. Jsx je potom převedeno na javascript a ten generuje dom – není to žádná stringová šablona (tzn. ne .append(„[div onclick=’return false‘ /]“)) . Funkce, která je pak zapsána u onClick atributu v se pak navěsí na dom.

      Takže žádné míchání html a javascriptu tu není – to je trochu nedorozumění.
      Vše je javascript, který generuje dom když je třeba. V jquery jsi měl dom (např. ze souboru html) a v kódu jsi na něj věšel události. V reactu máš kód který ti vygeneruje dom (a následně do něj promítá jen potřebné změny – virtuálně vše překreslí, vypočte změny a promítne do domu).

    2. vojta tranta

      Re: Inline event handlery
      Přesně takhle to nefunguje :-)).

      React dělá něco jako jQuery#delegate() – to samé, co popisujete v jQuery příkladu. V žádném případě se neděje navěšování listenerů přímo na onClick= na element, to jenom tak vypadá v JSX.
      Ono by to totiž ani moc nešlo, kvůli globální scope, ve které pracují listenery na elementech.

      React přesně řeší případy, kdy máte listener na prvku v poli, kdy se eventa poslouchá pouze na rodiči. Více zde: https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

      Co se týče špaget – je antipattern udělat v reactu anonymní funkci jako posluchač. Je tomu proto, že při zavolání metody render() se pak vždycky vytvoří nová instance funkce, tudíž pak nejde použít slavná shouldComponentUpdate metoda. Z toho důvodu metoda React.createClass binduje přímo všechny property typu function právě proto, aby se mohlo jednoduše použít něco takového:

        var Component = React.createClass({
            _onClickHandler: function() { //pojmenovaný callback, no spagetty
              //this === Component, nikoliv Window, binduje se automaticky přes createClass
            },
      
            render() { 
              return React.DOM.div({ //je jedno,jeslti se použije JSX nebo ne, tohle je výsledek
                onClick: this._onClickHandler
              }, [])
      
            }
          })
      

      A tudíž nebylo potřeba vytváře anonymní funkce jako callbacky a případné metody nebylo potřeba bindovat.

    3. vojta tranta

      Re: Inline event handlery
      K tomu, co jsem napsal se ještě vztahuje jedna obrovská mýlka: JSX není HTML. JSX je Javascript, který pouze vypadá jako HTML.

      JSX vypadá tak jak vypadá proto, aby kodéři neprskali, ale není prakticky žádný jiný důvod JSX používat.
      Proto se neztotožňuje s tvrzením autora, že pokud by nebylo JSX, tak se o Reactu nemluví. JSX je pouze něco, čeho si laik na první pohled všimne a přijde mu to divné a je to předmětem prvních twitterových hejtů, aniž by si ten či onen React nastudoval.
      JSX se zkompiluje do JS a to nikoli v runtime jako tomu je třeba u Angularovských šablon (jde to dělat i za runtime, ale transpiler má 1.5MB a není k tomu probůh žádný důvod). Takže vám do browseru přijde prostě normální JS, jako jsem ukázal v příkladu.

  3. Tomáš RandusAutor příspěvku

    Tak samozřejmě můžeš použít úplně stejné delegování eventu i s reactem. Nemyslím že existuje jakýkoliv jiný způsob jak šetřit s eventy.

    React + Redux nesvádí ke špagetovým kódům.

    1. Tomáš RandusAutor příspěvku

      Re: A kde je Redux?
      React-redux v článku není, redux se neztratil nikam :)

      React-redux je fajn, ale do seriálu už se nevešel, stejně jako asynchronní akce s middlewarem. To se bohužel nedá nic dělat. Možná by mohl vzniknout ještě jeden díl zaměřený na tyhle věci.

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=18390