Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: registrovany123 11. 06. 2021, 23:35:18

Název: Jak v Reactu ci Vue modifikovat jen jeden řádek vykreslené tabulky?
Přispěvatel: registrovany123 11. 06. 2021, 23:35:18
Mam tady takovy principielni dotaz ohledne typu probemu, na ktery jsem narazil.

Rekneme ze mam nejaky list zaznamu v globalnim state, je jich 5000, a jsou vykreslene do tabulky. A nechci z nejakeho duvodu pouzit pagination - predstavte si ze je to neco na zpusob tabulky v excelu.

Vsiml jsem si ve vue, ze kdyz u jednoho zaznamu zmenim hodnotu nejakeho fieldu, tak ze dojde k prekresleni vsech ostatnich 4999 zaznamu v tabulce. Coz je vlastne docela logicke, a je to kupodivu docela rychle - nicmene lepsi by bylo to udelat jinak.

Chapu to spravne, ze jediny zpusob reseni je vytvorit pro radky v tabulce separatni komponentu, pres props ji predat hodnoty, uvnitr v komponente si z tech props nastavit vnitrni state, a nasledne render radku udelat z toho vnitrniho state, takze kdyz dojde ke zmene nejakeho sloupce, tak se zmena nepropise do globalniho stavu? A pridat k tomu radku tlacitko Ulozit, na ktere az kdyz se klikne tak se to propise ze state do globalniho stavu?

Ma to jeste nejake jine reseni, jak aktualizovat globalni stav ze ktereho se dela foreach, ale zabranit opetovnemu provedeni foreach?
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: A.P.Hacker 11. 06. 2021, 23:59:45
Vsiml jsem si ve vue, ze kdyz u jednoho zaznamu zmenim hodnotu nejakeho fieldu, tak ze dojde k prekresleni vsech ostatnich 4999 zaznamu v tabulce.

na to jste prisel jak? Jak Vue tak React delaji DOM diff komponenty a prekresluji jen zmenene nody.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 00:09:18
Vsiml jsem si ve vue, ze kdyz u jednoho zaznamu zmenim hodnotu nejakeho fieldu, tak ze dojde k prekresleni vsech ostatnich 4999 zaznamu v tabulce.

na to jste prisel jak? Jak Vue tak React delaji DOM diff komponenty a prekresluji jen zmenene nody.

Testoval jsem to tak, ze jsem si udelal metodu called(), dal ji do kazdeho radku, a ta vypise do konzole zaznam. Nasledne kdyz modifikuju "foodEntry.amount", tak dojde k zavolani metody called()  na vsech vykreslenych radcich. Takze kdyby jich bylo 1000, tak called() se zavola 1000x.

Kód: [Vybrat]

    <!--   Header   -->

    <table class="table-sm">
      <thead>
      <tr>
        <th class="table-date">Datum</th>
        <th class="table-food">Potravina</th>
        <th class="table-amount">Mnozstvi</th>
        <th class="table-calories">Energie</th>
        <th class="table-buttons"></th>
        <th class="table-buttons"></th>
      </tr>
      </thead>
      <tbody>

      <template v-for="(foodEntries, date) in this.$root.$data.foodEntriesByDate">
        <tr :key="date">
          <td>
            {{ date }} {{called()}}
          </td>
        </tr>

        <template v-if="date > '2021-06-10'" >
          <tr v-for="foodEntry in foodEntries" :key="foodEntry.id">
            <td>{{called()}}</td>
            <td>{{ foodEntry.food.name }}</td>
            <td><input class="form-control form-control-sm" type="number" step="20" v-model="foodEntry.amount"/></td>
            <td>{{ foodEntry.getTotalCalories() }}</td>
            <td>
            </td>
          </tr>
        </template>

      </template>
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: A.P.Hacker 12. 06. 2021, 00:29:46
To prokazuje jen, ze se vygeneruje virtualni DOM, ne ze se to cele prekresli.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: L.. 12. 06. 2021, 06:57:03
Radit ti je zbytečné, protože stejně všechny rady ignoruješ, ale kdyby to zajímalo někoho jiného:

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.

Když se změní řádek, tak pole klíčů se nemění, takže "for each" neproběhne. Změní se pouze asociativní pole. Proběhnou selektory pro každý řádek, ale až na jeden vrátí ten samý objekt, takže se vyvolá render pouze pro ten jeden změněný řádek.

Jinak co se týče řešení s kopií dat a tlačítkem "uložit", to je taky možnost.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 12. 06. 2021, 09:27:35
Jak píšou ostatní, snad to nejdůležitější, co dělají React i Vue (a další) „pod kapotou“, je to, že zjišťují, co se doopravdy změnilo, aby v DOMu prohlížeče změnili opravdu jen to, co je potřeba změnit. Proto po vás React chce přidávat atribut key a Vue bindování :key, když vypisujete seznam, protože bez toho nedokážou zjistit, co přesně se v seznamu změnilo.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 10:36:37
Kdyz udelam ve Vue toto:

Kód: [Vybrat]

      <template v-for="idx in 10">
          <div :key="idx">{{$root.$data.foodEntries[idx].amount}} {{called()}} </div>
      </template>


A potom:

Kód: [Vybrat]
  mounted() {
    setInterval( () => {
      console.log(this.$root.$data.foodEntries[1].amount++);
    },1000);
  }

Tak vysup z logu:

Kód: [Vybrat]
Menu.vue?ae1e:172 386
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:169 387
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:172 389
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:169 390

Tzn. modifikace fieldu zpusobi prinejmensim zavolani vsech metod ve foreach.

Zatim se mi jako jedine vychodisko jevi resit to pres vnitrni stav komponenty.

Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 12. 06. 2021, 11:06:08
Rozumné východisko je naučit se ty frameworky používat a neřešit věci, které není potřeba řešit a kterým nerozumíte. Pokud do výpisu seznamu přidáte ke každému prvku volání funkce, o které Vue nic neví, nezbývá mu nic jiného, než tu funkci pro každý prvek zavolat. To je ovšem vaše chyba, že tam tu funkci úplně zbytečně voláte. Přitom to máte napsané přímo v dokumentaci: Computed Caching vs Methods (https://v3.vuejs.org/guide/computed.html#computed-caching-vs-methods).

Mimochodem, to je přesně ten důvod, proč jsem psal, že se mi víc líbí přístup Reactu, kde musíte každý stav explicitně změnit. Z vašeho komentáře vyplynulo, že se vám víc líbí magie Vue, kdy se to „děje samo“. Ale teď na to narážíte, protože nerozumíte tomu, jak ta magie funguje, děláte tam nesmysly a na základě těchhle nesmyslů se to snažíte nesmyslně optimalizovat.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 13:31:24
Compute jsem zkousel, ale to neni reseni. Me se jedna o metody volane uvnitr foreache, computed se nevola jako metoda, ale jako property.

A jak v tom pomuze React? Zkousel jsem to a chova se to stejne, upravim jen jeden radek z foreache, a metoda called() se zavola pro vsechny radky vzdy. Je to stejne chovani jako v magickem Vue.

Kód: [Vybrat]

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

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

  called() {
    console.log("Called");
  }

  componentDidMount() {
    // setInterval(
    //   () => this.setState({ arr: [...this.state.arr, this.i++] }),
    //   1000
    // );
    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}>
            {this.called()}
            {i.val}
          </div>
        ))}
      </div>
    );
  }
}

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




Citace
Rozumné východisko je naučit se ty frameworky používat a neřešit věci, které není potřeba řešit a kterým nerozumíte.

PS: Ja tady na to zakladam tema, a jak vidite, tak se to prave ucim pouzivat, a snazim se tomu rozumet - proto se tu na to ptam, proto tohle tema zakladam, jsem na diskuznm foru. Nevim, proc musite mit ustavicne takove utocne a curacke prupovidky - jste snad debil? Pokladam tady normalni, odrojakovany dotaz na vnitrni chovani tech frameworku.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 12. 06. 2021, 13:51:51
Compute jsem zkousel, ale to neni reseni. Me se jedna o metody volane uvnitr foreache, computed se nevola jako metoda, ale jako property.
Netuším, čemu říkáte „volat jako property“. Computed property je normální funkce, která závisí na aktuálním stavu a vrací hodnotu. Díky tomu, že závisí na aktuálním stavu, ji Vue zavolá jenom tehdy, když se změní stav, který funkci ovlivňuje.


A jak v tom pomuze React? Zkousel jsem to a chova se to stejne, upravim jen jeden radek z foreache, a metoda called() se zavola pro vsechny radky vzdy. Je to stejne chovani jako v magickem Vue.
Reat tomu pomůže tak, že když chcete změnit stav, musíte explicitně zavolat funkci, která stav změní. Takže ji snad nebudete volat v případě, kdy se stav nezměnil (a když ji i přesto zavoláte, React pozná, že se nic nezměnilo, a nebude renderovací funkci volat zbytečně).

PS: Ja tady na to zakladam tema, a jak vidite, tak se to prave ucim pouzivat, a snazim se tomu rozumet - proto se tu na to ptam, proto tohle tema zakladam, jsem na diskuznm foru. Nevim, proc musite mit ustavicne takove utocne a curacke prupovidky - jste snad debil? Pokladam tady normalni, odrojakovany dotaz na vnitrni chovani tech frameworku.
Ne, nepokládáte normální dotazy. Nepřečetl jste si ani základní návody, vymyslel jste nesmyslný kód a teď na tom nesmyslu trváte. V šabloně nemáte volat žádné funkce, máte tam pracovat jenom se stavem.

Pokud se chcete Vue nebo React naučit používat, přečtěte si dokumentaci na jejich webu. Pak z vašeho kódu odstraňte to nesmyslné volání funkce v šabloně a budete mít po problému.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 14:01:38
Dotaz neni stale zodpovezen. Ma se za to, ze jak React tak Vue udelaji vnitrne diff pri zmene stavu, a nasledne budou sahat jen do tech tagu, kterych se zmena stavu tyka. Muj kod dokazuje ze to tak uplne neni pravda jak pro React, tak pro Vue, a nikdo to tady neumi uplne vysvetlit.

Co se tyce volani funkci v template, asi tezko bude problem zavolat tam funkci napr. parseFloat(), je snad na to nekde nejake doporuceni, ze ani to se nema? Pokud bych mel tabulku o 1000 radku (coz bych klidne mohl), tak se mi bude 1000x volat parse float pri kazde jeden zmene Input Number ciselniku, kuprikladu. Proste upravim stav 1 itemu, a upravi se zbyvajicich 999 itemu.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 14:07:27
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:

Kód: [Vybrat]
import React from "react";
import ReactDOM from "react-dom";

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

  called() {
    console.log("Called");
  }

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

  render() {
    return (
      <div>
        {this.state.vals.map((i) => (
          <div key={i}>
            {this.called()}
            {this.state.arr[i].val}
          </div>
        ))}
      </div>
    );
  }
}

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

Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 14:10:57
Takze principialni problem, predlozeny na zacatku, ze totiz mam tabulku o 5000 radcich, upravim item v 1 radku, a dojte k zavolani metod v cele tabulce, je stale platny, a navrhovane reseni v Reactu pomoci foreache ktery iteruje nad necim jinym, nez nad polozkami jednotlivych radku, se miji ucinkem.

Proto zatim jako jedine vychodisko vidim vytvorit separatni komponenty pro kazdy radek, nakopirovani props do stavu, a pridani tlacitka ulozit.

Rovnez zatim nevidim vyhodu pouziti Reactu namisto Vue.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 12. 06. 2021, 14:31:32
Dotaz neni stale zodpovezen.
Odpověď na váš dotaz je, že máte chybně váš kód. V šabloně nemáte volat žádné funkce, jenom číst stav.

Ma se za to, ze jak React tak Vue udelaji vnitrne diff pri zmene stavu, a nasledne budou sahat jen do tech tagu, kterych se zmena stavu tyka.
Ne „m se za to“, ono to tak je.

Muj kod dokazuje ze to tak uplne neni pravda jak pro React, tak pro Vue, a nikdo to tady neumi uplne vysvetlit.
Ne, váš kód nic takového nedokazuje. Váš kód je za prvé špatně, za prvé se volá před vytvořením virtuálního DOMu, taže nevypovídá vůbec nic o tom, co se s virtuálním DOMem děje pak.

Co se tyce volani funkci v template, asi tezko bude problem zavolat tam funkci napr. parseFloat(), je snad na to nekde nejake doporuceni, ze ani to se nema?
Samozřejmě, že to bude problém. V šabloně máte jenom číst stav (ve Vue se tomu říká data), nic jiného.

První věta z dokumentace šablon Vue:
Citace
Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data.
Vidíte tam něco o renderování výsledku volání funkce? Ne, šablona slouží k renderování dat uložených v komponentě.

Pokud bych mel tabulku o 1000 radku (coz bych klidne mohl), tak se mi bude 1000x volat parse float pri kazde jeden zmene Input Number ciselniku, kuprikladu. Proste upravim stav 1 itemu, a upravi se zbyvajicich 999 itemu.
Ano, když to budete dělat svým špatným způsobem, bude se to volat tisíckrát.

Psal jste, že se to chcete naučit. Nebylo by tedy lepší udělat to správně, než trvat na svém špatném řešení?

Takze principialni problem, predlozeny na zacatku, ze totiz mam tabulku o 5000 radcich, upravim item v 1 radku, a dojte k zavolani metod v cele tabulce, je stale platny
Ano, stále platí, že váš kód je špatně, když při renderování šablony voláte funkce nezávislé na stavu.

Řešení je stále to stejné – nevolat tam tu nesmyslnou metodu, která nic nedělá. Žádné tlačítko uložit přidávat nemusíte.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 14:40:23
A co volani getteru v radcich tabulky? To je taky funkce. Pokud ani to nemuzu delat, tak v tom pripade nemuzu vubec pouzivat OOP.

Budu mit napriklad tridu FoodEntry, kde budu mit

getTotalCalories() {
  return this.amount / 100 * this.calories;
}

Podle vas tedy nemuzu delat ani tady to. A v tom pripade se mi zkomplikuje uplne vsechno.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 12. 06. 2021, 14:48:15
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.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 15:02:01
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.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 12. 06. 2021, 15:09:17
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.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 12. 06. 2021, 15:19:45
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.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 15:19:56
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...
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 15:36:07
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"));


Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 15:42:05
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.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 12. 06. 2021, 15:44:14
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á.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 12. 06. 2021, 15:48:43
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?
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 15:54:45
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.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 12. 06. 2021, 16:29:09
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ý.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: BoneFlute 12. 06. 2021, 18:36:49
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
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: L.. 12. 06. 2021, 19:56:39
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.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 12. 06. 2021, 19:59:53
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.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: BoneFlute 12. 06. 2021, 22:24:57
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.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 13. 06. 2021, 00:24:42
Když máte pořád takový problém s Reactem, protože tam hledáte nějakou magii (která tam není), třeba vám pomůže, když uvidíte to samé v JavaScriptu.

Tady je původní kód v Reactu:
Kód: [Vybrat]
import React, { useState, useEffect } from "react";
import { render } from "react-dom";

const Row = ({ foodEntry }) => {
  console.log('Velké překvapení, vykresluji řádek tabulky.')

  return (
  <tr>
    <td>{foodEntry.date}</td>
    <td>{foodEntry.name}</td>
    <td>{foodEntry.amount}</td>
    <td>{foodEntry.totalCalories}</td>
  </tr>
  );
}

const App = () => {
  const [foodEntries, setFoodEntries] = useState(() => {
    const foodEntries = [];
    for (let i = 0; i < 5000; i++) {
      foodEntries.push({ date: "2021-06-12", name: "brokolice", amount: 1, caltotalCaloriesories: 0 });
    }
    return foodEntries;
  });

  useEffect(() => {
    const intervalHandle = setInterval(() => {
      setFoodEntries((oldState) => {
        const newState = [...oldState];
        newState[0].amount++;
        return newState;
      });
    }, 1000);
    return () => clearInterval(intervalHandle);
  }, []);

  return (
    <table class="table-sm">
      <thead>
        <tr>
          <th class="table-date">Datum</th>
          <th class="table-food">Potravina</th>
          <th class="table-amount">Mnozstvi</th>
          <th class="table-calories">Energie</th>
        </tr>
      </thead>
      <tbody>
        {foodEntries.map((foodEntry, index) => (
          <Row foodEntry={foodEntry} key={index} />
        ))}
      </tbody>
    </table>
  );
};

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

A tady je to samé v JavaScriptu:
Kód: [Vybrat]
const Row = ({ foodEntry }) => {
  console.log('Velké překvapení, vykresluji řádek tabulky.')

  const trElm = document.createElement("tr");

  const dateElm = document.createElement("td");
  dateElm.innerText = foodEntry.date;
  trElm.appendChild(dateElm);

  const nameElm = document.createElement("td");
  nameElm.innerText = foodEntry.name;
  trElm.appendChild(nameElm);

  const amountElm = document.createElement("td");
  amountElm.innerText = foodEntry.amount;
  trElm.appendChild(amountElm);

  const totalCaloriesElm = document.createElement("td");
  totalCaloriesElm.innerText = foodEntry.totalCalories;
  trElm.appendChild(totalCaloriesElm);

  return trElm;
};

const foodEntries = [];
for (let i = 0; i < 5000; i++) {
  foodEntries.push({ date: "2021-06-12", name: "brokolice", amount: 1, totalCalories: 0 });
}
const appElm = document.getElementById("app");

const App = () => {
  const tableElm = document.createElement("table");
  tableElm.className = "table-sm";

  const theadElm = document.createElement("thead");
  tableElm.appendChild(theadElm);

  const trElm = document.createElement("tr");
  theadElm.appendChild(trElm);

  const dateElm = document.createElement("td");
  trElm.appendChild(dateElm);
  dateElm.className = "table-date";
  dateElm.innerText = "Datum";

  const foodElm = document.createElement("td");
  trElm.appendChild(foodElm);
  foodElm.className = "table-food";
  foodElm.innerText = "Potravina";

  const amountElm = document.createElement("td");
  trElm.appendChild(amountElm);
  amountElm.className = "table-amount";
  amountElm.innerText = "Mnozstvi";

  const caloriesElm = document.createElement("td");
  trElm.appendChild(caloriesElm);
  caloriesElm.className = "table-calories";
  caloriesElm.innerText = "Energie";

  const tbodyElm = document.createElement("tbody");
  tableElm.appendChild(tbodyElm);

  foodEntries.forEach((foodEntry) => tbodyElm.appendChild(Row({ foodEntry })));

  return tableElm;
};

setInterval(() => {
  foodEntries[0].amount++;
  appElm.firstChild.remove();
  appElm.appendChild(App());
}, 1000);

appElm.appendChild(App());

Ten kód dělá principiálně to samé, jako výše uvedený kód v Reactu, React jenom navíc:

Snad už je vám teď jasné, proč se při změně jediné položky pole vyvolá renderovací funkce pro všechny řádky, a také jakým způsobem tomu zamezit, pokud by to tedy bylo potřeba optimalizovat
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: mareolan 13. 06. 2021, 00:36:29
(pro React) Dlouhé seznamy se obvykle optimalizují tak, že se pro položky udělá samostatná komponenta, tato bude navíc memoizovaná pomocí React.memo a při vykreslování seznamu se každé položce nastaví key. Díky té memoizaci se to renderování skutečně uřízne před voláním render-u na jednotlivých položkách (když se jim nezměnily propsy).

V upraveném příkladu se tedy bude opakovaně renderovat jenom první řádek (a App samozřejmě).

Kód: [Vybrat]
class A0 extends React.Component {
  constructor(props) {
    super();
    console.log("Constructor called ");
    this.state = {
      input: 1
    };
  }

  render() {
    console.log("A render, props: " + JSON.stringify(this.props));
    return <div>Input {this.state.input}</div>;
  }
}
const A = React.memo(A0);

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() {
  console.log("App render");
    return (
      <div>
        {this.state.arr.map((i) => (
          <A key={i.id} data={i} />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 13. 06. 2021, 22:06:31
(pro React) Dlouhé seznamy se obvykle optimalizují tak, že se pro položky udělá samostatná komponenta, tato bude navíc memoizovaná pomocí React.memo a při vykreslování seznamu se každé položce nastaví key. Díky té memoizaci se to renderování skutečně uřízne před voláním render-u na jednotlivých položkách (když se jim nezměnily propsy).

V upraveném příkladu se tedy bude opakovaně renderovat jenom první řádek (a App samozřejmě).

Kód: [Vybrat]
class A0 extends React.Component {
  constructor(props) {
    super();
    console.log("Constructor called ");
    this.state = {
      input: 1
    };
  }

  render() {
    console.log("A render, props: " + JSON.stringify(this.props));
    return <div>Input {this.state.input}</div>;
  }
}
const A = React.memo(A0);

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() {
  console.log("App render");
    return (
      <div>
        {this.state.arr.map((i) => (
          <A key={i.id} data={i} />
        ))}
      </div>
    );
  }
}

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

Ano, zkousel jsem memo, a je to jediny zpusob, ktery zabrani vykresleni komponentypri updatu nadrazeneho stavu. Akorat jsem to nepouzil, protoze jsem si rozdelil FoodEntries do komponent FoodEntryDay, a pridal jsem tlacitko Ulozit, takze ted uz nemusi kazda zmena vyvolat update cele tabulky, ale jen FoodEntryDay, navic zbytecnym volanim metod jsem zabranil pres useState, kdy se mi dela diff na vstupni props.

Bohuzel vsak me to stalo duplikovani props do vnitrniho stavu.

Ale co je zajimave, tak ikdyz udelam:

Kód: [Vybrat]
const FoodEntriesTableDayRow = (props) => {
    const [totalCalories, setTotalCalories] = useState(FoodEntry.getTotalCalories(props.foodEntry));

    useEffect(() => {
        console.log(FoodEntriesTableDayRow.name, useEffect.name)
        setTotalCalories(FoodEntry.getTotalCalories(props.foodEntry))
    }, [props.foodEntry])

    const called = () => {
        console.log('Called!')
    }

    return (
        <tr>
            <td><input type="date" value={props.foodEntry.date}/></td>
            <td><Searchbox value={props.foodEntry.food.name}/></td>
            <td>
                <input type="number"
                       value={props.foodEntry.amount}
                       step={20}
                       onChange={(val) =>
                           props.onChange({...props.foodEntry, amount: val.target.value})
                       }/>
            </td>
            <td>{props.foodEntry.food.calories}</td>
            <td>{totalCalories}</td>
            <td>
                <input type="button" value="-" onClick={() => props.onRemove({...props.foodEntry})}/>
            </td>
        </tr>
    )
}

Konkretneji:

Kód: [Vybrat]
    useEffect(() => {
        console.log(FoodEntriesTableDayRow.name, useEffect.name)
        setTotalCalories(FoodEntry.getTotalCalories(props.foodEntry))
    }, [props.foodEntry])

Jeste kokretneji:

Kód: [Vybrat]
    }, [props.foodEntry])

Tak se mi sice neprovede funkce useEffect, kdyz se nikterak nezmenil props.foodEntry, ale stale se mi zbytecne zavola testovaci metoda called() volana z renderingu. Tomu dokaze zabranit jedine to Memo. Moc z toho nejsem moudry, proc React tu Render funkci znovu zavola, protoze nejsem uplne presvedcen, ze Memo je spravny zpusob reseni. Perfromance issues s tim nemam, jen mi to prijde jako skoda ze to React dela, a nechapu proc.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 13. 06. 2021, 22:16:34
SLAVA, ZAHADA ROZRESENA!!!


CELOU DOBU jsem to tu resil, s *** Jirsakem jsem tu marnil cas, a konecne mam odpoved, kterou zjevne adny mistni javascriptar nevi, ackoliv by teda mel.



https://stackoverflow.com/questions/40819992/react-parent-component-re-renders-all-children-even-those-that-havent-changed
Citace
React: Parent component re-renders all children, even those that haven't changed on state change

Citace
If a parent component is updated, does React always update all the direct children within that component?

No. React will only re-render a component if shouldComponentUpdate() returns true. By default, that method always returns true to avoid any subtle bugs for newcomers (and as William B pointed out, the DOM won't actually update unless something changed, lowering the impact).

Takze Filipe Jirsaku, oprav si svoji znalosti. Omlouvat se mi, pokud neches, nemusis, uz jsem ti vynadal dost.


Regards,
Registrovany123, Backend Software Engineer
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: A.P.Hacker 13. 06. 2021, 22:28:27
(and as William B pointed out, the DOM won't actually update unless something changed, lowering the impact).

prekreslenim rozumim update DOM, ne zavolani render

Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 13. 06. 2021, 22:40:51
SLAVA, ZAHADA ROZRESENA!!!
Nerozřešena. Pořád tomu nerozumíte.


CELOU DOBU jsem to tu resil, s *** Jirsakem jsem tu marnil cas, a konecne mam odpoved, kterou zjevne adny mistni javascriptar nevi, ackoliv by teda mel.

https://stackoverflow.com/questions/40819992/react-parent-component-re-renders-all-children-even-those-that-havent-changed
Citace
React: Parent component re-renders all children, even those that haven't changed on state change

Napsal jsem vám to minimálně třikrát:

Citace: 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ý.

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

Citace: Filip Jirsák
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.

A v historii je toho určitě ještě víc.

Takze Filipe Jirsaku, oprav si svoji znalosti.
Zatím jste nenapsal nic, co by bylo v rozporu s mými znalostmi.

Omlouvat se mi, pokud neches, nemusis, uz jsem ti vynadal dost.
Omlouvám se, že jsem vás dávno nepřidal na seznam trollů. Jdu to napravit.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 13. 06. 2021, 22:48:28
Ja jsem tu problem ktery resim, jasne napsal, do detailu popsal, jediny "mareolan" poskytl spravnou odpoved - memo. Jasne jsem se ptal, proc se znova vola render, kdyz props vstupujici do komponenty se nezmenily, jakou to ma logiku, jak je to mozne.

Odpoved je, ze componentShouldUpdate() vraci by default true, aby s tim nemeli problem zacatecnici. A ze se ma pouzit PureComponent nebo Memo nebo pretizit componentShouldUpdate. Tohle byla odpoved na muj dotaz, proc se mi porad vola metoda called() uvnitr render funkce.

Ja si te na seznam niceho davat nebudu, chodim na tohle forum uz dobrych 15 let, ty na jistem "seznamu" uz davno jsi.

Val na https://stackoverflow.com/questions/40819992/react-parent-component-re-renders-all-children-even-those-that-havent-changed, a napis jim tam jako odpoved ty svoje rozumy - odpovez mu, ze se mu vsechny childy prerenderujouz duvodutoho, ze je vsechny prerendruje, protoze poitac dela to, co se mu zada. Uvidime kolik dostanes minus bodu - jestli uz nejsi davno na Stackoverflow vybodovany.

OK Systems zrovna rozjel inzerci, jestli tam nekdy pujdu, tak si dam hodne dobry pozor, abych na tebe nemusel narazit, protoze profesni interakce s tebou to musi byt opravdu zazitek...
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: L.. 13. 06. 2021, 22:58:39
CELOU DOBU jsem to tu resil, s *** Jirsakem jsem tu marnil cas, a konecne mam odpoved, kterou zjevne adny mistni javascriptar nevi, ackoliv by teda mel.

Pochopitelně ví. Dokonce ti ji tu i psal. Problém je v tom, že ty z těch odpovědí čteš akorát půlku a o to víc trolíš:

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.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 13. 06. 2021, 23:10:02
CELOU DOBU jsem to tu resil, s *** Jirsakem jsem tu marnil cas, a konecne mam odpoved, kterou zjevne adny mistni javascriptar nevi, ackoliv by teda mel.

Pochopitelně ví. Dokonce ti ji tu i psal. Problém je v tom, že ty z těch odpovědí čteš akorát půlku a o to víc trolíš:

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.

Prestan lhat, tos napsal az po tady tomhle nesmyslu, ktery jsem vyzkousel a on nefungoval.

Citace
Radit ti je zbytečné, protože stejně všechny rady ignoruješ, ale kdyby to zajímalo někoho jiného:

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.

Když se změní řádek, tak pole klíčů se nemění, takže "for each" neproběhne. Změní se pouze asociativní pole. Proběhnou selektory pro každý řádek, ale až na jeden vrátí ten samý objekt, takže se vyvolá render pouze pro ten jeden změněný řádek.

Jinak co se týče řešení s kopií dat a tlačítkem "uložit", to je taky možnost.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: L.. 13. 06. 2021, 23:20:49

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.

Prestan lhat, tos napsal az po tady tomhle nesmyslu, ktery jsem vyzkousel a on nefungoval.

Obviňovat někoho ze lži, když si kdokoli může kliknout na link a přesvědčit se, že jsem to fakt napsal, to už je hodně zoufalý pokus zabránit vlastnímu ztrapnění ;D ;D ;D

Stejně jako lhát, že jsi něco vyzkoušel, když jsi to nevyzkoušel.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: Filip Jirsák 14. 06. 2021, 21:03:05
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.
Pravda, úplně se zapomnělo na Vue. Když se ve Vue použije šablona, může Vue sledovat, která část šablony je závislá na které části modelu. Takže když se změní model, překreslí Vue jenom odpovídající část šablony. Samozřejmě to funguje jenom když se s modelem pracuje pomocí prostředků, které Vue dokáže sledovat. Pokud tomu někdo nerozumí, snadno tuhle „magii“ rozbije, jako se to povedlo registrovanemu123, a donutí Vue překreslovat vše (nebo v horším případě bude Vue aktualizace modelu ignorovat).

App.vue
Kód: [Vybrat]
<template>
  <table class="table-sm">
    <thead>
      <tr>
        <th class="table-date">Datum</th>
        <th class="table-food">Potravina</th>
        <th class="table-amount">Mnozstvi</th>
        <th class="table-calories">Energie</th>
      </tr>
    </thead>
    <tbody>
      <Row v-for="(foodEntry, index) in foodEntries" :key="{ index }" :foodEntry="foodEntry" />
    </tbody>
  </table>
</template>

<script>
import Row from "./Row.vue";

export default {
  components: {
    Row,
  },
  data() {
    const foodEntries = [];
    for (let i = 0; i < 5000; i++) {
      foodEntries.push({ date: "2021-06-12", name: "brokolice", amount: 1, totalCalories: 1 });
    }
    return {
      foodEntries,
    };
  },
  created() {
    this.intervalHandle = setInterval(() => this.foodEntries[0].amount++, 1000);
  },
  beforeDestroy() {
    clearInterval(this.intervalHandle);
  },
};
</script>

Row.vue
Kód: [Vybrat]
<template>
  <tr>
    <td>{{ foodEntry.date }}</td>
    <td>{{ foodEntry.name }}</td>
    <td>{{ foodEntry.amount }}</td>
    <td>{{ calories }}</td>
  </tr>
</template>

<script>
let rendered = 0;

export default {
  props: ["foodEntry"],
  computed: {
    calories() {
      console.log(`Vypočítávám kalorie po ${rendered++}.`);
      return this.foodEntry.totalCalories * this.foodEntry.amount;
    },
  },
};
</script>

Tohle vypíše 5000× „vypočítávám kalorie“, a pak to každou sekundu přidá jeden další řádek. Kdyby nebyla property calories závislá na foodEntry.amount, nebude se při změně ta počítaná property volat vůbec.

Stejně jako lhát, že jsi něco vyzkoušel, když jsi to nevyzkoušel.
Já bych mu i věřil, že to zkoušel. Ale když vůbec neví, co dělá, neví ani, co zkoušel a co zjistil…
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: L.. 15. 06. 2021, 08:33:29
Stejně jako lhát, že jsi něco vyzkoušel, když jsi to nevyzkoušel.
Já bych mu i věřil, že to zkoušel. Ale když vůbec neví, co dělá, neví ani, co zkoušel a co zjistil…

On hodil v tom příspěvku i kód, který zkoušel. Nejen, že v něm nebyla ani stopa po Reduxu, ale vůbec neměl ani extra komponentu pro každý řádek. Prostě arogantní mimoň.

Nedivil bych se, kdyby to byl takový ten nafoukaný backendista, co frontend vidí jako jednoduchou hračku pro malé děti nehodnou jeho úrovně. A když ho zkusil a zjistil, že to není zdaleka tak triviální, tak ho to poněkud vykolejilo.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: black3r 15. 06. 2021, 12:51:38
SLAVA, ZAHADA ROZRESENA!!!


CELOU DOBU jsem to tu resil, s *** Jirsakem jsem tu marnil cas, a konecne mam odpoved, kterou zjevne adny mistni javascriptar nevi, ackoliv by teda mel.



https://stackoverflow.com/questions/40819992/react-parent-component-re-renders-all-children-even-those-that-havent-changed
Citace
React: Parent component re-renders all children, even those that haven't changed on state change

Citace
If a parent component is updated, does React always update all the direct children within that component?

No. React will only re-render a component if shouldComponentUpdate() returns true. By default, that method always returns true to avoid any subtle bugs for newcomers (and as William B pointed out, the DOM won't actually update unless something changed, lowering the impact).

Takze Filipe Jirsaku, oprav si svoji znalosti. Omlouvat se mi, pokud neches, nemusis, uz jsem ti vynadal dost.


Regards,
Registrovany123, Backend Software Engineer

Gratulujem k vyrieseniu zahady, par tipov do buducna:

- JS pohlad na svet sa lisi od vacsiny backendov s ktorymi som robil ako fullstack tym, ze neexistuje jedno spravne riesenie, neda sa povedat, ci je lepsi React alebo Vue, neda sa povedat ci je lepsie shouldComponentUpdate alebo useMemo, neda sa povedat, ci je lepsi redux, alebo mobx, su to ine sposoby riesenia toho isteho problemu a v JS svete je podstatne ze kazdy si vie vybrat to, ktore mu viac vyhovuje.
- Dobre kniznice a frameworky maju dobru dokumentaciu, plati to aj o Reacte a Vue. Ja som tiez zacinal na backende a jQuery a z toho presiel na React, ale ako jedna z prvych veci bolo, ze som si precital komplet vsetky dokumentacne clanky okrem API reference, ostatne to robim pri kazdej kniznici/frameworku s ktorym zacinam robit, a o shouldComponentUpdate som vedel hned zo zaciatku.
- Dalsi koncept nielen z JS sveta je, ze "Premature optimization is the root of all evil". Problem re-rendrovania 5000 itemov nemusi mat az taky zmysel riesit, lebo to nie je az tak pomale. A ked sa dostanes na miliony tak bude pomaly uz prvy render a budes to cele chciet vyriesit nejak inak. Tak si pozries v kvalitnej dokumentacii React-u kapitolu "Optimizing Performance" tuna https://reactjs.org/docs/optimizing-performance.html a tam si najdes info o technike zvanej "windowing".
- Okrem toho, ze JS svet ponuka viacero moznosti riesenia pripadov ktore su si ekvivalentne sa este aj velmi rychlo a casto vynaraju nove, vacsinou s cielom ulahcit bud zrozumitelnost alebo zmensit potrebny balast naokolo. Takto vznikli aj React Hooks, ktore vdaka tomu ze su pisane ako obycajne funkcie tak je pri nich intuitivnejsie, ze sa volaju vzdy, pokial tomu nejakym sposobom (useMemo) nezabranis. Pre to sa vela JS developerov casto chyta noviniek aj ked sa neskor mozno ukaze ze ta novinka nie je uplne vhodna na jeho use-case. Ale aj tak ak sa chces ako JS dev uchytit odporucam sledovat nove trendy a changelogy, neraz sa mi stalo, ze som narazil na problem, o ktoreho rieseni som rok predtym cital v popise novej verzie Reactu.

tl;dr: svet JavaScriptu je zradny, a ak sa v nom chces vediet dobre orientovat, je potrebne vela citat s porozumenim. Namiesto hadania sa s Jirsakom si si v tomto pripade mohol precitat dokumentaciu Reactu, najst v nej 3 rozne riesenia a vybrat si, ktore ti najviac vyhovuje.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: L.. 15. 06. 2021, 13:44:55
- Dalsi koncept nielen z JS sveta je, ze "Premature optimization is the root of all evil".

Já říkám, že předčasná optimalizace je horší, než předčasná ejakulace :)
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: registrovany123 16. 06. 2021, 13:02:49
Stejně jako lhát, že jsi něco vyzkoušel, když jsi to nevyzkoušel.
Já bych mu i věřil, že to zkoušel. Ale když vůbec neví, co dělá, neví ani, co zkoušel a co zjistil…

On hodil v tom příspěvku i kód, který zkoušel. Nejen, že v něm nebyla ani stopa po Reduxu, ale vůbec neměl ani extra komponentu pro každý řádek. Prostě arogantní mimoň.

Nedivil bych se, kdyby to byl takový ten nafoukaný backendista, co frontend vidí jako jednoduchou hračku pro malé děti nehodnou jeho úrovně. A když ho zkusil a zjistil, že to není zdaleka tak triviální, tak ho to poněkud vykolejilo.

jde videt uz ponekolikate ze jsi obycejny arogantni pitomecek. Kdyz se nekdo uci React, tak asi tezko tam bude hned zfleku pouzivat Redux. Zrovna tak mit komponentu zvlast pro kazdy radek nema co docineni s resenym problemem.
Název: Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
Přispěvatel: L.. 16. 06. 2021, 14:07:07
jde videt uz ponekolikate ze jsi obycejny arogantni pitomecek.

Jo, zhodnotil ses dobře.

Kdyz se nekdo uci React, tak asi tezko tam bude hned zfleku pouzivat Redux.

Takže uznáváš, že jsi mnou popsané řešení nevyzkoušel a lživě jsi mě urážel že tomu nerozumím a že to řešení nefunguje?

Zrovna tak mit komponentu zvlast pro kazdy radek nema co docineni s resenym problemem.

A co asi dělá to řešení s PureComponent / memoizací? Ano, má komponentu pro každý řádek. "Nemá co do čínení s řešením problémem" ;D ;D ;D Ano, každým příspěvkem ze sebe děláš čím dál tím většího vola. Jen tak dál.