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

Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #30 kdy: 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:
  • může více událostí, které vyvolávají překreslení komponenty, sloučit do jednoho překreslení, (což ale tady nemůže nastat, protože tu je jen jedna událost),
  • nerenderuje komponenty rovnou do skutečného DOMu, ale vyrenderuje je do virtuálního DOMu, který porovná s předchozí verzí a pak na reálný DOM aplikuje pouze zjištěné rozdíly.

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


Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #31 kdy: 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"));

Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #32 kdy: 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.
« Poslední změna: 13. 06. 2021, 22:08:39 od registrovany123 »

Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #33 kdy: 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

Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #34 kdy: 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



Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #35 kdy: 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.

Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #36 kdy: 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...
« Poslední změna: 13. 06. 2021, 22:52:14 od registrovany123 »

L..

  • ***
  • 178
    • Zobrazit profil
    • E-mail
Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #37 kdy: 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.
« Poslední změna: 13. 06. 2021, 23:03:52 od L.. »

Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #38 kdy: 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.

L..

  • ***
  • 178
    • Zobrazit profil
    • E-mail
Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #39 kdy: 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.

Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #40 kdy: 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…

L..

  • ***
  • 178
    • Zobrazit profil
    • E-mail
Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #41 kdy: 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.

Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #42 kdy: 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.

L..

  • ***
  • 178
    • Zobrazit profil
    • E-mail
Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #43 kdy: 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 :)

Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« Odpověď #44 kdy: 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.