Miksi Nuolitoiminnot ja sidonta Reactin renderissä ovat ongelmallisia

(Vihje: Se tekee shouldComponentUpdate- ja PureComponent -tuotteista kammottavia)

Edellisessä viestissä selitin, kuinka React-lapsikomponentit puretaan, jotta vältetään sidonta- tai nuolitoimintojen käyttäminen renderöinnissä. Mutta en toimittanut selkeää esittelyä osoittamaan, miksi tämä on hyödyllistä.

Tässä on nopea esimerkki.

Tässä esimerkissä käytän nuolitoimintoa renderöinnissä sitomaan asianmukainen käyttäjätunnus kuhunkin poistopainikkeeseen.

Rivillä 35 käytän nuolitoimintoa välittääksesi arvon deleteUser-funktiolle. Se on ongelma.

Jos haluat nähdä miksi, tutustu User.js-tiedostoon (napsauta hampurilaiskuvaketta vasemmassa yläkulmassa valitaksesi erilaisia ​​tiedostoja esimerkissä). Kirjaudun konsoliin joka kerta kun render kutsutaan. Olen julistanut käyttäjän PureComponentiksi. Joten käyttäjän tulisi tehdä uudelleen vain, kun rekvisiitta tai tila muuttuu. Mutta kun napsautat käyttäjän poistamista, huomaa, että renderöinti vaaditaan kaikille käyttäjän esiintymille .

Tästä syystä: Pääkomponentti siirtää nuolitoiminnon rekvisiittaan. Nuolitoiminnot jaetaan uudelleen jokaiselle renderöinnille (sama tarina sidonnan avulla). Joten vaikka olen julistanut User.js: n PureComponentiksi, Käyttäjän ylätason nuolitoiminto saa User-komponentin näkemään uuden toiminnon lähettämisen rekvisiittaan kaikille käyttäjille. Joten jokainen käyttäjä renderöi uudelleen, kun mitä tahansa poistopainiketta napsautetaan. ?

Yhteenveto:

Vältä nuolitoimintoja ja sitoumuksia renderöinnissä. Se rikkoo suorituskyvyn optimointeja, kuten shouldComponentUpdate ja PureComponent.

Mitä minun pitäisi tehdä sen sijaan?

Sen sijaan tässä on esimerkki, joka ei käytä nuolitoimintoa renderöinnissä.

Tässä esimerkissä index.js: llä ei ole nuolitoimintoa renderöinnissä. Sen sijaan asiaankuuluvat tiedot välitetään User.js: lle. Käyttäjä.js-tiedostossa onDeleteClick kutsuu onClick-toiminnon, joka välitetään rekvisiittaan asianomaisen user.id-tunnuksen kanssa.

Kun teet tämän muutoksen, kun napsautat poistoa, huomaa, että renderöintiä ei vaadita muille käyttäjille! ?

Yhteenveto

Parhaan suorituskyvyn saavuttamiseksi

  1. Vältä nuolitoimintoja ja sido renderöinnissä.
  2. Miten? Pura alikomponentit tai välitä tietoja HTML-elementille.

Etsitkö lisää Reactista? ⚛️

Olen kirjoittanut useita React- ja JavaScript-kursseja Pluralsightissa (ilmainen kokeilu). Viimeisin julkaisuni "Uudelleenkäytettävien reaktiokomponenttien luominen" juuri julkaistu! ?

Cory House on kirjoittanut useita kursseja JavaScriptistä, Reactista, puhtaasta koodista, .NETistä ja muusta Pluralsightista. Hän on pääkonsultti osoitteessa reactjsconsulting.com, VinSolutionsin ohjelmistoarkkitehti, Microsoft MVP, ja kouluttaa ohjelmistokehittäjiä kansainvälisesti ohjelmistokäytännöistä, kuten käyttöliittymäkehitys ja puhdas koodaus. Cory twiitti JavaScriptiä ja käyttöliittymäkehitystä Twitterissä nimellä @housecor.