Diskuze: Aplikace v reactu si bere příliš výkonu

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Martin Suchodol

Člen

Martin Suchodol:19.11.2021 20:33

Ahoj, učím se s Reactem. Prošel jsem si zdejší seriál. A mám menší s aplikací databází filmů ze zdejšího seriálu. A sice že pokud chci zdata nového herce/režiséra tak vše je ok. Ale jakmile se pokusím přidat film, tak si aplikace začne už9rat moc výkonu procesoru. Až do takové míry že je počítač nepoužitelný.

Problém jsem se pokoušel odhalit i pomocí profilleru, pripadne funkce component v react dev tools. A tady se vse tvari jako by bylo vse OK. Nejake vykyvy tam jsou, ve chvili kdy kliknu do formularoveho pole, ale neni to nic kritickeho. V podstate stejne vykyvy to ma i kdyz chci pridat herce/rezisera.

Kód formuláře:

import React, { useState, useEffect  } from 'react';
import FlashMessage from '../common/FlashMessage';
import { ApiGet, ApiPost, ApiPut } from "../common/Api";import Genre from './Genre';
import InputField from '../common/InputField';
import InputSelect from '../common/InputSelect';
import InputCheck from '../common/InputCheck';
import { useHistory } from 'react-router-dom';

const MovieForm =  (props, hooks) => {

    const [movieIdState, setMovieId] = useState(null);
    const [directorListState, setDirectorList] = useState([]);
    const [actorListState, setActorList] = useState([]);
    const [genreListState, setGenreList] = useState([]);
    const [movieNameState, setMovieName] = useState('');
    const [yearState, setYear] = useState(0);
    const [directorState, setDirector] = useState('');
    const [actorsState, setActors] = useState([]);
    const [genresState, setGenres] = useState([]);
    const [availableState, setAvailable] = useState(false);
    const [sentState, setSent] = useState(false);
    const [successState, setSuccess] = useState(false);
    const [errorState, setError] = useState()
    const history = useHistory();

    const handleChange = (e) => {
        const target = e.target;

        let temp;
        if (['actors', 'genres'].includes(target.name)) {
            temp = Array.from(target.selectedOptions, (item) => item.value);
        }
        else if (target.name === 'available') {
            temp = target.checked;
        }
        else {
            temp = target.value;
        }

        const name = target.name;
        const value = temp;

        if (name === 'movieName') { console.log(value); setMovieName(value);}
        else if (name === 'year') {console.log(value); setYear(value);}
        else if (name === 'director'){console.log(value); setDirector(value);}
        else if (name === 'actors') {console.log(value); setActors(value);}
        else if (name === 'genres') {console.log(value); setGenres(value);}
        else if (name === 'available'){console.log(value); setAvailable(value)};
    };

    const handleSubmit = (e) => {
        e.preventDefault();

        const body = {
            name: movieNameState,
            year: yearState,
            directorID: directorState,
            actorIDs: actorsState,
            genres: genresState,
            isAvailable: availableState,
        };


        (movieIdState
                ? ApiPut('/api/movies/' + props.match.params.id, body)
                :  ApiPost('/api/movies/', body)
        )
            .then((data) => {
                console.log('succcess', data)
                setSent(true);
                setSuccess(true);
                history.push('/movies')

            })
            .catch(async (error) => {
                const er = await error
                console.log(er.message);
                setError(er.message);
                setSent(true);
                setSuccess(false);
            });
    };

    useEffect(() => {
        const id = props.match.params.id || null;

        if (id) {
            setMovieId(id);

            ApiGet("/api/movies/" + id).then((data) => {
                setMovieName(data.name);
                setYear(data.year);
                setDirector(data.directorID);
                setActors(data.actorIDs);
                setGenres(data.genres);
                setAvailable(data.isAvailable);
            });
        }
    }, []);

    ApiGet('/api/directors').then((data) => setDirectorList(data));
    ApiGet('/api/actors').then((data) => setActorList(data));
    ApiGet('/api/genres').then((data) => setGenreList(data));

    const sent = sentState;
    const success = successState;
    return (
        <div>
            <h1>{props.match.params.id ? "Upravit" : "Vytvořit"} film</h1>
            <hr />
            {errorState ? <div className="alert alert-danger">{errorState}</div> : ""}
            {sent && (
                <FlashMessage
                    theme={success ? "success" : ""}
                    text={success ? "Uložení filmu proběhlo úspěšně." : ""}
                />
            )}

            <form onSubmit={handleSubmit}>
                <InputField
                    required={true}
                    type="text"
                    name="movieName"
                    min="3"
                    label="Název"
                    prompt="Zadejte název díla"
                    value={movieNameState}
                    handleChange={handleChange}
                />

                <InputField
                    required={true}
                    type="number"
                    name="year"
                    label="Rok vydání"
                    prompt="Zadejte rok vydání"
                    min="0"
                    value={yearState}
                    handleChange={handleChange}
                />

                <InputSelect
                    required={true}
                    name="director"
                    items={directorListState}
                    label="Režie"
                    prompt="Vyberte režiséra"
                    value={directorState}
                    handleChange={handleChange}
                />

                <InputSelect
                    required={true}
                    name="actors"
                    items={actorListState}
                    multiple={true}
                    label="Hrají"
                    prompt="Označte herce"
                    value={actorsState}
                    handleChange={handleChange}
                />

                <InputSelect
                    required={true}
                    name="genres"
                    items={genreListState}
                    multiple={true}
                    enum={Genre}
                    label="Žánr"
                    prompt="Označte žánry"
                    value={genresState}
                    handleChange={handleChange}
                />

                <InputCheck
                    type="checkbox"
                    name="available"
                    label="Dostupný"
                    value={availableState}
                    checked={availableState}
                    handleChange={handleChange}
                />

                <input type="submit" className="btn btn-primary" value="Uložit" />
            </form>
        </div>
    );


}

export default MovieForm;

Muj dotaz tedy zni, na co se mam zameřit, popr. Zda by mi někdo poradil nějaký další nástroj pro analýzu běhu programu.

Jeste doplnim ze pouzivam knihovnu react-router-dom ve ve verzi 5.2.0.

Odpovědět

19.11.2021 20:33

Peter Mlich

Člen

Peter Mlich:19.11.2021 21:28

Do reactu moc nedelam. Jen takovy pokus s vampire-character-generator. takze poznamky ber s rezervou. Ale znam spis stary js. Zkus si zobrazit konzoli nebo tam pridej developer-react.js . To by mohlo vic vypisovat chyby

Array.from - mam pocit, ze tohle neni zrovna nejrychlesi js funkce
(item) => item.value - tyto iterace cyklem jsou tez nove v js a tez jim moc neverim

target.selectedOptions - nikde nekontrolujes typeof, pouziti takove promene v cyklu muze znamenat nepredvidatelne veci

if (name === 'movieName') { console.log(value); setMovieName(value);}
        else if (name === 'year')
- pokud vim, tak if-else se musi zavorkovat v js. if () {} else { if () {} else {} }. Ale v react ten zapis asi mozny je
- nevim, zda to neco zmeni, ale da se pouzit indexovani pres asociativni pole
name_list = {'movieName': 1}
index = name_list[name]
if (index==1) ... - melo by to byt rychlejsi

ApiGet("/api/movies/" - to asi loaduje nejaky soubor. Tomu bych se vyhnul v pripade, ze to mas v handle-event
loadovani souboru v js obvykle probiha asynchroni cestou. Takze spustis star stahovani a hned jde dalsi js,
 jeste nez se stahovani dokonci. To muze vest k nepredvidatelnym stavum, pokud to neumis spravne zapsat
- jestli to pouzivas k nahravani filmu, no, tak by asi bylo rychlejsi na zacatku nacist jedno velke asociativni pole.

Vim ,ze jsem si v react hral s eventy a darilo se mi je uspesne zacyklovat.
Zapis, jaky pouzivas ty, nepoznavam.
Muzes se zkusit jeste podivat, jaky html kod to vygeneruje. Vidim, ze tam mas jakysi dom-react. Mozna, ze tam mas spatny html kod a ono to pak dela psi kusy pri jeho cteni tou knihovnou. Ve firefoxu, kdyz to mas vyklikane, tak kliknes do stranky, ctral+a, prave tl mysi, zobrazit zdrojovy kod vyberu, ctral+a, ctrl+c, google= html validator, klik na w3c, direct-input, ctrl+v, check code... To by melo najit potize

Nahoru Odpovědět

19.11.2021 21:28

Peter Mlich

Člen

Peter Mlich:19.11.2021 21:31

S tim loadovanim souboru, abych to upresnil. Zkus se prihlasit na xchat.cz, mistnost, kde je vic lidi nez 10. Tam, kdyz najedes na nick na skle, tak to loaduje takovy miniprofil s fotkou v IFRAME. Je to resene asi pres iframe. Zkus prejizdet a vsimni si, jak pomalu jim to jede. Tak to bude prave tim, ze misto toho, aby ta data nacetli pro vsechny lidi v mistnosti, tak to pokazde loaduji znovu. I stejnou fotku. Browser to samozrejme zahodi

Nahoru Odpovědět

19.11.2021 21:31

Peter Mlich

Člen

Peter Mlich:19.11.2021 21:41

jakoze, takhle s tou knihovnou. Na zacatku mam zakomentvane ty develover knihovny, ktere jsem zjistil, ze jsou pro mne na nic. Firefox pomerne slusne posledni dobou popisuje chyby, pise z jakeho radku to prislo od prvni funkce.
https://mlich.zam.slu.cz/…r/index2.htm

<!--script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script-->
<!--script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script-->
<script src="../react/react.js"></script>
<script src="../react/react-dom.js"></script>
<script src="../react/babel.js"></script>

A tez se v develop-toos firefoxu muzes podivat na grafy stahovani. Kdyz kliknes, jak dlouho se to stahovalo z webu. Treba tam mas nejaky problem se soubory nebo omezeni hostingu, kdyz jich stahujes hodne za kratky cas.

Nahoru Odpovědět

19.11.2021 21:41

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.

Nejčastěji vyhledáváné

Diskuze: Aplikace v reactu si bere příliš výkonu