Kuinka käyttää Reaktin kokeellista uutta Profiler-ominaisuutta

React 16.4.0 julkaistiin äskettäin! Ja on niin, että tajuat kuinka paljon JavaScript-nörtistä olet innostunut suosikkikehyksesi pienimuotoisista versioista. Welp!

Jos haluaisit hullua Reakt-tiimin julkaisemien julkaisutietojen yli, se tuntuu enimmäkseen tylsältä päivitykseltä. Osoitintapahtumat vaikuttavat melko groveilta, mutta olin rehellisesti kuullut niistä epämääräisesti tähän asti.

Paitsi, että on olemassa virheen korjaus new-ish getDerivedStateFromProps -menetelmälle (se kutsutaan jokaiselle hahmonnukselle nyt). En ole vielä suurelta osin omaksunut tätä käyttämällä, joten tämän päivityksen vaikutus henkilökohtaisesti oli melko vähäinen.

Sitten hautettuani otsikoiden alle, näin ilmoituksen, että he ovat lisänneet uuden kokeellisen uuden epävakaan_profiilikomponentin. Koska elämäni on melko epävakaa_ tällä hetkellä, päätin lukea RFC: n ja kokeilla sitä.

TLDR;

Reakt-joukkueen henkilöt yrittävät tehdä renderoinnista asynkronisen. Tämä voi tehdä vaikeaksi mitata luotettavasti kuinka kauan komponentit tuottavat asennuksen / päivityksen aikana. Siksi he sekoittavat tätä kiiltävää uutta Profiler-komponenttia.

Joten mitä voit käyttää tätä asiaa tänään?

No, jos osaat seurata React-sovellustesi suorituskykyä, tämä on ehdottomasti toinen hyvä työkalu vyöllesi lisäämiseen. Jos tämä ei ole sinun asiasi, sinun pitäisi lopettaa tämän lukeminen ja palata takaisin rakentamaan hienoja sovelluksia.

Käytä

Vastuuvapauslauseke: Sinun ei todennäköisesti pitäisi vielä käyttää tätä tuotekoodissa (tarkoitan, että siinä sanotaan epävakaa_ oikein, tule ihminen!), Vaikka se ilmeisestikin erotetaan prod-rakennuksista. Myöhemmin he tutkivat tuotantoa + profilointirakenneasetuksia, joiden avulla voit myös profiloida tuotantokoodin.

Periaatteessa Profiler on komponentti, jonka voit purkaa oletusreaktiopaketista. Koska sillä on tuo funky pieni kirjain / alaviiva, jonka monet linterit paheksuttavat, sinun on tehtävä yksi seuraavista:

Tuo reagoi, {epävakaa_profiili profiloijana} "reagoi";
...
const Profiler = React.unstable_Profiler;

Nyt kun sinulla on profiilisi, profiilisi joitain komponentteja! Voit kääri minkä tahansa JSX-puun osan profiloijaan nähdäksesi mitä puun kyseisellä osalla tapahtuu. Profiler hyväksyy onRender-toiminnon, jossa yksityiskohdat renderöintiajasta otetaan talteen. Tässä on yksinkertainen laskiesimerkki:

Tuo reagoi, {epävakaa_profiili profiloijana} "reagoi";
luokka ComponentWithProfiling laajentaa React.Component {
    tila = {
        laskettu: 0
    };
    logProfile = (id, vaihe, currentTime, baseTime, startTime, CommitTime) => {
        console.log (`$ {id}: n $ {vaihe} -vaihe:`);
        console.log (`Todellinen aika: $ {actualTime}`);
        console.log (`Perusaika: $ {baseTime} ');
        console.log (`Aloitusaika: $ {startTime} ');
        console.log (`Sitoutumisaika: $ {activTime} ');
    };
    mene = suunta => () => this.setState (({count}) => ({
        laskea: suunta === "ylös"? count + 1: count - 1
    }));
tehdä () {
        palata (
            
                <-painike onClick = {this.go ("ylös")}> ️ 
                
Luku on {this.state.count}
                <-painike onClick = {this.go ("down")}>                      );     } }

Huomaa, että jokaiselle komponenttipuun osalle on annettava tunnistettava profiili. Kuten alla näet, onRender-menetelmä vastaanottaa joukon mielenkiintoisia mittareita:

https://7jroojkv30.codesandbox.io/

Ensinnäkin voit nähdä, missä vaiheessa sen renderointi oli (joko asennettuna tai päivitettävänä), jota voitaisiin ehkä käyttää tunnistamaan puusi osia, jotka päivittyvät odottamatta (aivan kuten erinomainen miksi teit -päivit-paketti, joka Olen käyttänyt monta kertaa ja suosittelen voimakkaasti).

Seuraavaksi saamme todellisen ajan ja baseTime. Ne liittyvät todelliseen aikaan, jonka React kuluttaa laskentalaskujen tekemiseen; toisin sanoen. selvittää, mikä on muuttunut. Huomaa, että alkuperäisen asennuksen todellinen aika vie kauemmin kuin päivitykset. Tämä johtuu siitä, että alkuperäisessä asennuksessa teknisesti kaikki on ”uutta”. Päivityksillä laskelmien tulisi olla halvempia, koska toivottavasti puun komponentteja päivitetään vain, jos niiden todella tarvitaan (ts. Kun prop / tila-arvot ovat muuttuneet).

Suuremmassa / reaalimaailman sovelluksessa nämä arvot voivat auttaa paljastamaan sovelluksesi osia, joissa shouldComponentUpdate-sovellusta käytetään / käytetään väärin, paikoissa, joissa tukivaroitukset muuttuvat paljon / “uudet” rekvisiitta siirretään, tai vain paikoissa, joissa olit Odotan, että päivitykset vievät niin kauan.

Lopulliset arvot, jotka saamme onRenderissä, ovat startTime ja CommitTime. Nämä ovat lähinnä ”aikaleimaa” alkuperäisen käynnistyksen jälkeen. startTime on aika, jolloin puu aloitti sen tekemien laskelmien tekemisen, kun taas activTime viittaa aikaan, jolloin React tosiasiallisesti sitoutui muutoksiin renderoijaan.

Jos seuraat muita aikaleimattuja tapahtumia (kuten napsautuksia tai näppäinpainalluksia), nämä muuttujat voivat auttaa paljastamaan viiveitä käyttäjän tapahtumien ja hahmontamisten välillä. Jos aukko on suuri, tämä viive saattaa olla havaittavissa käyttäjille ja sen tulisi olla alue, jolla voit tutkia suorituskyvyn parantamista.

johtopäätös

Tiedän henkilökohtaisesti, että tämä työkalu ei ole vielä erittäin hyödyllinen. Mutta se on yksi niistä asioista, josta on hyvä tietää, koska jos osun noihin suorituskyvyn pullonkauloihin, tämä on hyvä mittapuikko.

On tärkeää mitata suorituskykyongelmasi ensin, sillä tavalla, kun teet “parannuksia”, voit kertoa, parantavatko se tosiasioita vai vain vaikeuttavat asioita. Olen huomannut, että suorituskyvyn optimointi on yksi niistä asioista, joista voi helposti tulla aikaa imevää, joten varmista, että yrität optimoida vain, jos sinulla on todellinen ongelma.

Odotan innolla, mitä React-tiimi tekee Profilerin kanssa eteenpäin. Kiitos @bvaughnille tämän upean ominaisuuden lisäämisestä!