Kuidas kasutada Reaketi uut eksperimentaalset profiilifunktsiooni

React 16.4.0 ilmus hiljuti! Ja mõnikord on nii, et saate aru, kui suur osa JavaScripti nohikust on teie lemmikraamistiku väiksemate versioonide väljalasketest vaimustuses. Tere!

Kui peaksite Reatsi meeskonna postitatud märkmete üle järele mõtlema, tundub see enamasti igava värskendusena. Pointeriüritused tunduvad üsna soised, kuid ausalt, ma olin neist seni seni vaid ebamääraselt kuulnud.

Peale selle on veaparandus meetodil new-ish getDerivedStateFromProps (seda kutsutakse nüüd igale renderdusele). Ma pole seda veel suuresti kasutusele võtnud, nii et minu jaoks oli selle värskenduse mõju üsna väike.

Siis maetud pealkirjade alla, nägin teadaannet, et nad on lisanud uue eksperimentaalse komponendi ebastabiilne_profiil. Kuna minu elu on praegu üsna ebastabiilne_, otsustasin, et loen RFC-d ja proovin seda.

TLDR;

Reaketi meeskonnas olevad inimesed üritavad renderdamist asünkroonseks muuta. See võib muuta keerukaks usaldusväärse mõõtmise, kui kaua komponendid paigaldamise / värskendamise ajal valmistuvad. Seetõttu segavad nad seda läikivat uut Profileri komponenti.

Mida saate seda asja tänapäeval kasutada?

Noh, kui oskate oma Reaxi rakenduste toimivust jälgida, on see kindlasti veel üks hea tööriist, mida oma vööle lisada. Kui see pole teie asi, peaksite selle lugemise lõpetama ja alustama lahedate rakenduste loomist.

Kasutades

Kohustustest loobumine: tõenäoliselt ei peaks te seda tootekoodis veel kasutama (ma mõtlen, et see ütleb ebastabiilsena_ kohe, tulge peale!), Kuigi ilmselt võetakse see toodetest valmis. Hiljem uurivad nad tootmise + profileerimise ehituse seadistust, mis võimaldaks teil ka tootmiskoodi profileerida.

Põhimõtteliselt on Profiler komponent, mille saate välja tõmmata vaikimisi pakutavast Reacti paketist. Kuna sellel on funky väiketäht / alajoon, millele paljud rullid kulmu kortsutavad, peate tegema ühe järgmistest:

impordi Reakt, {ebastabiilne_profiil kui profiiliprofiil} kaustast "reageeri";
...
const Profiler = React.unstable_Profiler;

Nüüd, kui olete saanud oma profiiliprofiili, paneme mõned komponendid profiilile! Võite JSX-i puu mis tahes osa mähkida profiilile, et näha, mis selle puuosaga toimub. Profiil aktsepteerib funktsiooni onRender, mis hõlmab andmeid renderdamise aja kohta. Siin on lihtne vastunäide:

impordi Reakt, {ebastabiilne_profiil kui profiiliprofiil} kaustast "reageeri";
klass ComponentWithProfiling laiendab React.Component {
    osariik = {
        arv: 0
    };
    logProfile = (id, faas, actualTime, baseTime, startTime, CommitTime) => {
        console.log (`$ {id} '$ {etapp} faas:`);
        console.log (`Tegelik aeg: $ {actualTime} ');
        console.log (`Põhiaeg: $ {baseTime} ');
        console.log (`Algusaeg: $ {startTime}`);
        console.log (`Kohandamisaeg: $ {activTime} ');
    };
    mine = suund => () => this.setState (({arv}) => ({
        arv: suund === "üles"? arv + 1: arv - 1
    }));
renderdama () {
        tagasi (
            
                 ️ 
                
arv on {this.state.count}
                                      );     } }

Pange tähele, et peate komponentide puu igale jaotisele andma ID, mille järgi profiili koostate. Nagu näete allpool, saab onRenderi meetod hunniku huvitavaid mõõdikuid:

https://7jroojkv30.codesandbox.io/

Esiteks näete, mis järgus see renderdus oli (kas installimisel või värskendamisel), mida võib-olla saab kasutada teie puu osade tuvastamiseks, mida ootamatult värskendatakse (sarnaselt suurepärase paketiga, miks te tegite värskendust, mida Olen mitu korda kasutanud ja soovitan väga).

Järgmisena saame tegeliku aja ja baasaja. Need on seotud tegeliku ajaga, mille React kulutab renderdamise arvutamisel; st. aru saada, mis on muutunud. Pange tähele, et esialgse paigaldamise tegelik aeg võtab kauem aega kui värskendused. Põhjus on see, et esialgsel kinnitusel on kõik tehniliselt "uus". Kui värskendustega peaksid arvutused olema odavamad, sest loodetavasti värskendatakse puu komponente ainult siis, kui need tegelikult vajavad (st kui rekvisiidi / oleku väärtused on muutunud).

Suuremas / reaalmaailma rakenduses võivad need väärtused aidata paljastada teie rakenduse osi, kus peaks olemaComponentUpdate alakasutatud / valesti kasutusel, kohtades, kus tugiprofiilid muudavad palju / antakse edasi „uusi“ rekvisiite, või lihtsalt kohtades, kus te viibisite Ei oota, et värskendused võtaksid nii kaua aega.

Lõplikud väärtused, mille me onRenderis saame, on startTime ja CommitTime. Need on sisuliselt „ajatempel” alates esimesest käivitamisest. startTime on aeg, mil puu hakkas tegema oma renderdusarvutusi, seevastu commitTime viitab ajale, millal React need muudatused renderdajale tegelikult rakendas.

Kui jälgite muid ajatemplisündmusi (nagu klõpsud või klahvivajutused), siis võivad need mõõdikud aidata leida täpseid andmeid kasutaja sündmuste toimumise ja renderdamiste tegeliku toimumise vahel. Kui vahe on suur, võib see mahajäämus olla kasutajate poolt tajutav ja see peaks olema valdkond, kus saate toimivuse parandamist uurida.

Järeldus

Ma tean, et minu jaoks pole see tööriist veel eriti kasulik. Kuid see on üks neist asjadest, millest on hea teada, sest kui ma taban kunagi need jõudluse kitsaskohad, on see heaks mõõdupuuks.

Oluline on kõigepealt mõõta toimivusprobleeme, nii et „täiustuste“ tegemisel saate öelda, kas see parandab asju tegelikult või teeb asi ainult halvemaks. Olen leidnud, et jõudluse optimeerimine on üks neist asjadest, mis võib hõlpsasti ajaliselt imeda, nii et veenduge, et proovite optimeerida ainult siis, kui teil on tegelik probleem.

Ootan huviga, mida Reacti meeskond Profileriga edasi teeb. Tänu @bvaughnile selle vahva funktsiooni lisamise eest!