Jak v Reactu ci Vue modifikovat jen jeden řádek vykreslené tabulky?

[Filip Jirsák]

A co volani getteru v radich tabulky? To je taky funkce. Pokud ani to nemuzu delat, tak v tom pripade nemuzu vubec pouzivat OOP.

Ano, v šablonách Reactu ani Vue nepoužíváte OOP. V šablonách používáte stav. Vue má computed properties, to je náhrada getterů pro šablony Vue. Stejně tak i v Reactu můžete volat jenom funcke závislé na stavu komponenty.

[Reklama]

[registrovany123]

Overil jsem, ze ustavicnemu volani metod z render funkce nezabrani ani zaobaleni do dalsi Component:

Kód: [Vybrat]

import React from "react";
import ReactDOM from "react-dom";

class A extends React.Component {
  constructor(props) {
    super();
    console.log("Constructor called ");
    this.state = {
      input: 1
    };
  }

  doSomething(input) {
    console.log("doSomething " + input);
    return input;
  }

  render() {
    return <div>Input {this.doSomething(this.state.input)}</div>;
  }
}

class App extends React.Component {
  i = 0;
  constructor() {
    super();
    this.state = {
      arr: [
        { id: 0, val: 0 },
        { id: 1, val: 0 },
        { id: 2, val: 0 }
      ]
    };
  }

  componentDidMount() {
    setInterval(
      () =>
        this.setState({
          arr: this.state.arr.map((item) =>
            item.id === 0 ? { id: 0, val: this.i++ } : item
          )
        }),
      1000
    );
  }

  render() {
    return (
      <div>
        {this.state.arr.map((i) => (
          <div key={i.id}>
            <A></A>
            {i.val}
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));


K cemu potom je, ze si Vue a React vnitrne delaji diff mezi stavy, kdyz ocividne stejne vsem renderum znovu zas a znova natstavuji hodnoty. Muj kod je toho dukazem. To, ze nebudu volat zadnou metodu uvnitr renderu, nic nemeni na faktu, ze se porad dokolecka vsechny hodnoty setuji znovu a znovu.

Navic vyse uvedeny priklad ukazuje, jak podivny mechanismus to je.

1. Ta vnitrni komponenta A nebere zadne properties z vnejsku.
2. Zmenou fieldu v arr nemohlo nikterak dojit k uprave vnitrniho stavu komponenty A. Nemelo k tomu jak dojit, kdyz do A nestrkam zadne values.
3. Presto React zavola metody uvnitr komponenty A.

Otazka do pranice podporujici konstruktivni debatu: tak co je to sakra za shit?

Jedine vysvetleni je, ze to React cele znovu renderuje.

Vyse uvedene je dulezity principialni priklad, a zadam mistni javascriptare, aby to vysvetlili.

[Filip Jirsák]

Váš kód je důkazem toho, že když to napíšete blbě, blbě to funguje. Nevím, co vás stále překvapuje na tom, že když zavoláte funkci, provede se kód v těle té funkce. To je normální, takhle se chovají všechny programovací jazyky.

Evidentně se nic naučit nechcete a jenom tu trollíte. Že je váš kód špatně jste se dozvěděl už asi desetkrát, a stejně na něm pořád trváte. Kdybyste se to chtěl naučit, ten špatný kód dávno zahodíte.

[Filip Jirsák]

Presto React zavola metody uvnitr komponenty A.

Ne, metody uvnitř komponenty A voláte vy.

Otazka do pranice podporujici konstruktivni debatu: tak co je to sakra za shit?

Vždyť vám to tu několik lidí říká celou dobu, že ten váš kód je shit.

Jedine vysvetleni je, ze to React cele znovu renderuje.

Jistě že to celé znovu renderuje, když ho k tomu nutíte.

Vyse uvedene je dulezity principialni priklad, a zadam mistni javascriptare, aby to vysvetlili.

Výše uvedené je akorát příklad toho, že to máte napsané špatně. Vysvětlení je jednoduché. Když v JavaScriptu zavoláte funkci, provede se kód, který je v těle té funkce. Když v Reactu změníte stav komponenty, vyrenderuje se znova ta komponenta.

[registrovany123]

A ja nevim, proc jste vy prekvapen, ze nekdo je prekvapen zavolanim funkce v komponente, ktere se vubec nezmenil stav. Vite moc dobre o co se tady snazim, nedokazate to vysvetlit, ocividne tomu sam poradne nerozumite.

Udelam tohle:

{{ foodEntry.getTotalCalories() }}

Jaky je rozdil mezi vyuse uvedenym a timto:

{{ foodEntry.amount / 100 * foondEntry.calories }}

Od toho ty slozene zavorky hergot jsou! Vue to ma i v dokumentaci, ze se v tom delaji takovehle veci, od toho to sakra je. Muj kod je dukazem toho, ze vyse uvedeny vyraz se vykona 4999x.

Zase se tu rozciluju s Jirsakem...

[Reklama]

[registrovany123]

Ba dokonce se ta metoda porad vola, ikdyz komponentu A dam uplne ven z toho foreache:

Kód: [Vybrat]


import React from "react";
import ReactDOM from "react-dom";

class A extends React.Component {
  constructor(props) {
    super();
    console.log("Constructor called ");
    this.state = {
      input: 1
    };
  }

  doSomething(input) {
    console.log("doSomething " + input);
    return input;
  }

  render() {
    return <div>Input {this.doSomething(this.state.input)}</div>;
  }
}

class App extends React.Component {
  i = 0;
  constructor() {
    super();
    this.state = {
      arr: [
        { id: 0, val: 0 },
        { id: 1, val: 0 },
        { id: 2, val: 0 }
      ]
    };
  }

  componentDidMount() {
    setInterval(
      () =>
        this.setState({
          arr: this.state.arr.map((item) =>
            item.id === 0 ? { id: 0, val: this.i++ } : item
          )
        }),
      1000
    );
  }

  render() {
    return (
      <div>
        <A></A>
        {this.state.arr.map((i) => (
          <div key={i.id}>{i.val}</div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));




[registrovany123]

A jedna pro Jirsaka. Jirsaku, chapes vubec, ze kdyz udelam:

Kód: [Vybrat]

render() {
    return (
      <div>
        {this.state.arr.map((i) => (
          <div key={i.id}>
            <A></A>
            {i.val}
          </div>
        ))}
      </div>
    );
  }

ze this.state.arr.map() je volani metody, ktere ty zakazujes?

A chapes, Jirsaku, ze ten tag <A>[/url] je sam o sobe vlastne taky volani metody?

Jirsaku a chapes, ze to volani metody <A>[/url] se provede zbytecne 4999 krat, kdyz zmenis stav, ikdyz vnitrni stav A s tim nema nic spolecneho?

Jirsaku, bez jim do Ractu vynadat, ze udelali framework, kde uvnitr {} se musi volat metody, ze tak to byt nema.

[Filip Jirsák]

A ja nevim, proc jste vy prekvapen, ze nekdo je prekvapen zavolanim funkce v komponente, ktere se vubec nezmenil stav.

React se o žádné stavy nestará. Komponenta v Reactu je funkce, která vrací virtuální DOM. Ten následně Reat porovná se skutečným domem a aplikuje na něj změny. React vám akorát poskytuje hooky, kterými můžete signalizovat, že teď je potřeba tu funkci zavolat znovu. Je jenom na vás, kdy budete tu funkci volat. Ale když ji zavoláte, musí se provést, celá – React samozřejmě nemá žádné prostředky, jak by mohl zařídit, aby se provedlo půl kódu funkce a půlka se vynechala.

Vite moc dobre o co se tady snazim

Ne, nevím. Zatím mi to připadá, že akorát trollíte.

nedokazate to vysvetlit, ocividne tomu sam poradne nerozumite.

Nedokážu vysvětlit co?

{{ foodEntry.getTotalCalories() }}

Tady voláte nějakou metodu na objektu. Tedy možná, netuším, co znamenají ty dvojité závorky. Není to ani Vue, protože tam byste nevolal žádnou metodu, jen byste četl stav. Není to ani React, protože ani tam byste nevolal metodu.

{{ foodEntry.amount / 100 * foondEntry.calories }}

Tady může být foodEntry stav jak ve Vue tak v Reactu.

Od toho ty slozene zavorky hergot jsou!

Složené závorky jsou ve Vue proto, abyste mohl do šablony vložit data. V Reactu proto, abyste mohl do šablony vložit kód.

Vue to ma i v dokumentaci, ze se v tom delaji takovehle veci, od toho to sakra je.

Ne, Vue má v dokumentaci, že se takovýmhle věcem máte vyhnout.

Muj kod je dukazem toho, ze vyse uvedeny vyraz se vykona 4999x.

Asi byste se neměl pouštět do programování, když vás překvapuje, že počítač udělá přesně to, co mu řeknete. Když mu řeknete, že má nějaký výraz vykonat 4999×, tak ho vykoná 4999×. Pokud se tolikrát vykonávat nemá, je to vaše chyba, že takový příkaz dáváte, ne chyba počítače, že váš příkaz přesně vykoná.

[Filip Jirsák]

ze this.state.arr.map() je volani metody, ktere ty zakazujes?

Nezakazuju.

A chapes, Jirsaku, ze ten tag <A>[/url] je sam o sobe vlastne taky volani metody?

Já to chápu. Ovšem nechápu, co vás tak překvapuje na tom, že když zavoláte metodu, provede se kód té metody.

Jirsaku a chapes, ze to volani metody <A>[/url] se provede zbytecne 4999 krat, kdyz zmenis stav, ikdyz vnitrni stav A s tim nema nic spolecneho?

Samozřejmě, že to chápu. Proč teda tu metodu 4999× voláte, když je to volání zbytečné?

Vy tu stále dokola naříkáte, že jste 5000× zavolal funkci a ona se 5000× provedla. A pořád si stěžujete, že se 5000× volat neměla. Tak proč ji pořád 500× voláte?

[registrovany123]

To snad neni pravda. Tak jeste jednou.

Budu mit 5000 FoodEntries, ktere vykreslim do tabulky o 5000 rows. Zmenim 1 FoodEntry:

Kód: [Vybrat]

foodEntries[0].amount = 500

1. Jak Vue, tak React, mi 5000x zavola vsechny metody, ktere se vyskytuji v tech 5000 rows, misto aby upravily jenom ten 1 row.
2. Ract mi 5000x zavola metody kazdeho row, ikdyz kazdy row bude zaobalen do vlastni Component, a tedy React prokazatelne muze vedet, ze dovnitr neprosla zadna zmena props.

Ad. 2: React tedy vi, ze do komponenty A dal props X, a ze zmenou "foodEntries[0].amount" nedoslo k zadne zmene property X, tudiz ze vnitrni stav komponenty A se nemohl nikterak zmenit, a ten blbec presto zbytecne zavola render komponenty A.

[Filip Jirsák]

React nic nevolá, tu komponentů voláte vy. Že nedošlo ke změně propad neznamená, že se komponenta nema znovu vyrenderovat. V hlavní komponentě voláte setInterval, takže chcete něco měnit každou sekundu - přitom se props nemeni. Už jsem vám psal několikrát, že React nemá žádnou skrytou magii. Prostě když zavoláte komponentů, vyrenderuje ji, výsledek porovná s aktuálním DOMem a ten upraví tak, aby odpovídal výsledků komponenty. Pokud tedy někdo volá renderování komponenty, jste to jen vy, nikdo jiný.

[BoneFlute]

Co takhle?

V šabloně se má číst stav/props. Díky tomu, že to nejsou funkce, React ví, že že je to cajk. Když je ta prop computed, tak React ví, že je computed, a tranzitivně projde všechen stav, který ta prop zasahuje. Tím má React vše pod kontrolou, a je schopen udělat diff a překreslit jen něco. Pokud není tato podmínka splněna, nemůže React spolupracovat. Tudíž není překvapující, že se to bude chovat neoptimalizovaně. Není to chyba Reactu, je to šikovné chování, vzhledem k tomu, že porušujete pravidla - ačkoliv já bych tam vyřval výjimku a vůbec se s váma nebavil.

Poučení:
- nepoužívejte v šabloně funkce
- v prvé řadě používejte to, co je v dokumentaci doporučované, funkce tam doporučované nejsou
- nevyvozujte kategorické závěry, když nedosáhnete nohama na dno

[L..]

Nevím jak ve Vue, v Reactu se to řešit dá. Například tak, že si člověk dá do Reduxu jednak objekt (asociativní pole) s obsahem klíč => řádek a pak pole klíčů, které určuje pořadí řádků. Pro každý řádek je komponenta a jako property má klíč řádku, který zobrazuje. Je napojená na Redux a z něj si z mapy příslušný řádek vyzvedne.

Tebou navrhovane reseni neni funkcni, zkousel jsem to a i React zavola metody ve foreach pri kazde aktualizaci stavu:

Mnou navrhované řešení samozřejmě funkční je. Ten kód, který jsi tu napsal, s ním totiž nemá nic společného, proto "nefunguje".

Jinak ano, pokud se změní stav nějaké komponenty, React by default vyrenderuje celý podstrom komponent, i když se jejich props nezměnily. To je feature a dá se tomu samozřejmě zabránit.

[registrovany123]

Co takhle?

A dukaz pro to mas? Nebo to je tve prani aby to tak bylo? Pripadne bych prosil zdroj. Protoze ty jsi z toho udelal Schrodingerovu kocku ted.

[BoneFlute]

Co takhle?

A dukaz pro to mas? Nebo to je tve prani aby to tak bylo? Pripadne bych prosil zdroj. Protoze ty jsi z toho udelal Schrodingerovu kocku ted.

Jaká Schrodingerova kočka? Jakej důkaz? Důkaz čeho? Se obávám, že ti vůbec nerozumím.

Jirsák je tradičně agresivní, ty zase línej přemejšlet, a tak jste se tu krapet porafali. Přišlo mi užitečné vytáhnout z toho marastu invektiv to podstatné. Přirozeně přemýšlet už musíš sám.