A React események kezelésének új módja

Utolsó érvényesítés dátuma: 2020. április 16. Eredetileg 2017. szeptember 11-én jelent meg

react

Bár ez az oktatóanyag olyan tartalommal rendelkezik, amely véleményünk szerint nagy haszonnal jár a közösségünk számára, még nem teszteltük és nem szerkesztettük annak biztosítására, hogy hibátlan tanulási tapasztalattal rendelkezzen. Ez szerepel a listánkon, és ezen dolgozunk! Az oktatóanyag alján található "Hibabejelentés" gombra kattintva segíthet nekünk.

* A „Property Initializer Syntax” * divatosabban hangzik, mint amilyen valójában. Ebben a harapásméretű oktatóanyagban megtudhatja, hogy az eseménykezelőknek ez az alternatív módja hogyan segít kiküszöbölni a kazánlemezeket a kivitelezőben, és megvéd a komolytalan memóriahasználattól is.

A Facebook dokumentumaiban az események kezelése így fog történni:

Az ES6 osztályok nem adják meg automatikusan ezt a hatókört a handSmthng használatának, és mivel általában ezt szeretnénk hívni. SetState, vagy esetleg egy másik metódust kell meghívni a komponensbe, a "hivatalos" konvenció az, hogy az összes eseménykezelőt mindig lekötik a konstruktorban . Ez működik, de gyorsan úgy érezheti magát, mint a kazánlap kódja.

Úgy tűnik, hogy ez a minta egyre népszerűbb az online React oktatóprogramokban. Ezt a kontextust átadja a handleSmthng fájlnak, és elkerüli a kazánlap kódját a konstruktorban. A fene, ebben az összetevőben nincs állapot, így nem is kell konstruktor! Úgy gondolom, hogy ennek a megközelítésnek a motivációja megfelelő ... de van egy kis teljesítményköltség.

A nyílfüggvény használata mindig új referenciát hoz létre a JavaScript-ben, ami viszont növeli az alkalmazások memóriahasználatát. Míg a memória olcsó a JavaScript-ben, a megjelenítések költségesek a React-ben. Amikor a nyílfüggvényeket átadja a gyermekkomponenseknek, a gyermekkomponens válogatás nélkül újra megjelenít, mivel (amennyire csak lehet) ez a nyílfunkció új adat. Ez azt jelentheti, hogy a nagy React alkalmazások 60 vagy 50 kép/mp sebességet kapnak.

"... Ha azonban ezt a visszahívást javaslattételként viszik át az alacsonyabb összetevőkre, akkor ezek az alkatrészek extra újratervezést végezhetnek." Reagáljon a Dokumentumokra

Két kötés egy zárás

Sokkal tisztább módja van az eseménykezelők írásának, amely 1) elkerüli a kazántáblát, és 2) nem okoz további újratervezéseket: a tulajdonság inicializáló szintaxisa! Ez egy fantázianév, de az ötlet nagyon egyszerű ... csak használja a nyílfüggvényeket az eseménykezelők meghatározásához. Mint ez:

Meghatároztál két kezelőt, és ez nagyon szép. Nincs kazán. Könnyű elolvasni. Könnyen áttételezhető ... ha argumentumokat akar átadni:

Bumm! Argumentumokat adhat át anélkül, hogy a renderelési metódusokban vagy a konstruktorban a bindet használná! Minden nagyon türelmesnek és átfogónak tűnik.

Ha még nem szokta látni a nyíl funkciókat, ez valószínűleg furcsának tűnik. Ne feledje az ES6-tal, hogy a kövér nyíl szintaxis lehetővé teszi a göndör zárójelek mellőzését az egysoros utasításoknál ... ez implicit módon visszaadja a vonalat! A Bábel így transzponálná a kezelést

Ha azt szeretné, hogy a Babel a Property Initializer Syntax használatát konfigurálja, ellenőrizze, hogy telepítette-e a „transform-class-properties” plugint vagy engedélyezte-e a 2. lépést. Ha a „create-reagál-alkalmazást” használja ... akkor már ott van!

Van egy ESLint szabály, amely megmondja, hogy a renderelés során ne használja a „kötés” vagy a nyíl függvényeket

A Property Initializer Syntax használatának előnyei

A legjobb tippem, hogy a Facebook nem "hivatalosan" hagyta jóvá ezt a mintát a dokumentációjukban, az az, hogy a 2. szakasz ES6 még nem készült el, így a Property Initializereket továbbra is nem szabványosnak tekintik. Azonban a create-reagál-alkalmazás generátor már engedélyezi a 2. lépést, így ... nagyon valószínű, hogy a Property Initializers a közeljövőben de facto lesz az eseménykezelők meghatározása szempontjából.

Miután megismerte a Property Initializer alkalmazást és elkezdte használni őket a kezelő módszerek meghatározásához, két figyelemre méltó előnyre tehet szert:

  • Kevesebb írótábla írni Ha nem kell kötő utasításokat írni a konstruktorban, nagyon édes. Most csak meghatározza a módszert - és ez az ✨. Ha argumentumokat kell átadnia, egyszerűen csak zárjon be egy lezárást, és ne felejtse el meghívni ezt a kezelő funkciót a renderben. További előnyként, ha valahol máshol kell refrakterre az eseménykezelője, csak egy helyet kapott, ahonnan beillesztheti.
  • Alacsonyabb memóriahasználat A nyílfüggvények használata a renderelésben rossz ötlet, mert a „tervezés szerint” a megjelenítések nagy mennyiségben fordulnak elő az alkatrészek életciklusa alatt; minden nyílfüggvényhez új mutató hozzárendelése. A renderelésben a nyílfüggvényektől való tartózkodás biztosítja, hogy az összetevő memóriahasználatát diétán tartsa.

Nézze meg ezt a CodePen-t, hogy lássa, hogyan működik a Property Initializer Syntax