Hogyan használjuk a React-ben a document szintű eseménykezelőket?

A React alkalmazások fejlesztése során az egyik legfontosabb jellemző, amely megkülönbözteti a hagyományos JavaScript kódolástól, az a DOM kezelésének absztrakciója. A React egyedülálló megközelítést kínál, amely lehetővé teszi, hogy a fejlesztők ne kelljenek közvetlenül az alacsony szintű DOM manipulációval foglalkozniuk, mint például a createElement, appendChild vagy addEventListener használatával. Ehelyett a React egy virtuális DOM-ot épít fel, amely lehetővé teszi, hogy a fejlesztő a webalkalmazását az állapot (state) szempontjából tekintse. Minden egyes módosítás, amelyet az események tömbjéhez adunk, eltávolítunk vagy módosítunk, automatikusan kiváltja a React DOM frissítését.

A React kulcsa abban rejlik, hogy az alkalmazásunkat egy sor újrahasználható komponenst alkotó struktúrában gondolkodjuk el, amelyek a saját állapotuk alapján hoznak létre DOM fákat. A React ezen a területen igen kifinomult működést alkalmaz, hiszen a virtual DOM és a "reconciliation" (rekoncilációs) folyamat segítségével folyamatosan összehasonlítja az aktuális és az előző verziókat, és azok eltéréseinek megfelelően módosítja a böngésző DOM-ját.

Ennek ellenére a modern fejlesztés során az egyre bonyolultabb JavaScript keretrendszerek, mint a React, az alkalmazások rugalmasságának és karbantarthatóságának növelésére irányulnak. A React használata lehetővé teszi, hogy a fejlesztő a felhasználói felület teljes struktúráját összefogottan kezelje, miközben az alacsony szintű DOM műveletek elvégzését a keretrendszer végzi el.

A böngészők és a szerverek közötti kommunikációs sebesség és teljesítmény javítása érdekében érdemes odafigyelni arra, hogy az alkalmazás JavaScript-bundeltjei a lehető legkisebbek legyenek. Ha szükséges, a kódot szét lehet választani úgy, hogy az oldal elsődleges betöltődése gyorsabb legyen, és a nem szükséges kód csak később töltődjön be. A szerveroldali renderelés (SSR) alkalmazása szintén segíthet javítani a felhasználói élményt, mivel lehetővé teszi a teljes oldal kiszolgálását a JavaScript futtatása előtt.

A React és más modern JavaScript keretrendszerek legnagyobb előnyei mellett azonban fontos megérteni, hogy felelősségteljesen kell használni őket. A React egyik kulcsfontosságú jellemzője, hogy a felhasználói interakciók figyelésére és kezelésére szolgáló események hozzáadása nem történik meg azonnal. Az eseménykezelők csak akkor futnak le, amikor a JavaScript szál szabad, ami azt jelenti, hogy az események végrehajtása egy aszinkron folyamat, és így az alkalmazás teljesítményét befolyásolhatja, hogy miként kezeljük az események kezelését.

A React egy rendkívül erőteljes fejlesztői eszközkészletet biztosít, amelyet a megfelelő módon alkalmazva jelentősen javíthatjuk webalkalmazásaink teljesítményét, átláthatóságát és skálázhatóságát. Azonban a keretrendszer komplexitása azt is jelenti, hogy a fejlesztőknek tisztában kell lenniük a benne rejlő hátrányokkal, például a betöltési időkkel és a JavaScript-bundel méretével, valamint a felelősségteljes kódoptimalizálással és a különböző renderelési technikák alkalmazásával.

Hogyan kezeljük a funkciók kontextusát JavaScriptben?

A call és apply módszerek lehetővé teszik, hogy a funkciók számára meghatározzuk a végrehajtásuk kontextusát, azaz a this értékét, miközben egy másik objektumra hivatkozunk. Az alapvető különbség a két módszer között az, hogy míg az apply esetében az argumentumokat tömbként adjuk át, addig a call-nál közvetlenül az argumentumokat listázzuk a funkció hívásakor. Ez az elv segít abban, hogy egy funkciót "kölcsönvegyünk" más objektumok számára, anélkül, hogy hozzájuk csatolnánk.

Az alábbi példában bemutatjuk ezt a két módszert:

javascript
Copy code
function juggle(...numbers) { 
    let result = 0; 
    for (const number of numbers) { 
        result += number; 
    } 
    this.result = result; 
} 
const ninja1 = { result: 0 }; 
const ninja2 = { result: 0 }; 

juggle.apply(ninja1, [1, 2, 3, 4]); 

juggle.call(ninja2, 5, 6, 7, 8); 

console.assert(ninja1.result === 10, "juggled via apply");

console.assert(ninja2.result === 26, "juggled via call");

Manapság a szórás operátor és a bind módszerek egyszerűbb és olvashatóbb szintaxist biztosítanak, de ha valaki a call vagy apply módszereket használja, annak tudnia kell, hogy ezek lehetővé teszik a metódusok rugalmas kezelését és a kódunk tisztán tartását. A bind módszerről egy későbbi részben részletesebben is szót ejtünk, mivel az egy elegáns módja a funkciók kontextusának kezelésére.

A this értékének kezelése egy másik fontos aspektusa a JavaScript programozásnak, amely gyakran problémákat okoz. Gyakori hiba, hogy egy metódust callback-ként adunk át egy másik funkciónak, miközben azt várjuk, hogy a metódust ugyanúgy hívja meg, mint az őt tartalmazó objektum. Ennek elkerülése érdekében egy hatékony megoldás a bind módszer.

javascript
Copy code
buttonElement.addEventListener("click", buttonObject.clickHandler.bind(buttonObject));

Ez biztosítja, hogy a this értéke mindig a buttonObject marad, még akkor is, ha a funkciót más módon hívják meg. A bind által létrehozott új funkció viselkedése azonos marad az eredeti funkcióéval, de a kontextusa állandó.

A modern JavaScript-ban az ES2022 szabvány már lehetővé teszi a bind szintaxist osztályokon belül is, ami jelentősen csökkenti a kód bonyolultságát. Például a következő kódot használhatjuk:

javascript
Copy code
class Button {

    #clickCount = 0;
    clickHandler = () => {
        this.#clickCount++;
        appendToEventList(`Click count: ${this.clickCount}`);
    }
}

Ebben az esetben a clickHandler metódus egy nyílt (arrow) funkció, amely automatikusan megtartja a this kontextust, amely az osztály példányának a belső környezetéből származik.

A nyílt funkciók használata azért hasznos, mert azok mindig az őket körülvevő környezetben található this értéket használják, függetlenül attól, hogy hogyan hívják meg őket. Ez megoldja azt a problémát, amit a hagyományos funkciók esetében gyakran tapasztalhatunk, amikor a this értéke a hívási kontextustól függően változik.

Azonban fontos megjegyezni, hogy a JavaScript ezen eszközeinek alkalmazása akkor a leghatékonyabb, ha megértjük, hogyan működik a this a különböző hívási kontextusokban, és hogyan használhatjuk ezeket az eszközöket a kódunk tisztán tartására. Az újabb JavaScript funkciók, mint a szórás operátor és az arrow funkciók, nemcsak egyszerűsítik a kódot, hanem biztosítják, hogy a programunk megbízhatóan és helyesen kezelje a funkciók kontextusát minden esetben.

Hogyan kezeld a globális változókat és memória szivárgásokat a JavaScript-ben?

A globalThis az ECMAScript 2020-ban bevezetett új kifejezés, amely a globális objektumra való hivatkozást egységesíti különböző JavaScript környezetekben. A JavaScript kezdeti korszakában, amikor a kódok elsősorban böngészőkben futottak, a globális objektum neve mindig window volt. Később, amikor a Node.js megjelent, a globális objektumot global-nak nevezték el. Ez racionális döntés volt, de bonyolulttá tette a globális változók kezelését olyan kódban, amely különböző környezetekben futott, például egy böngészőben vagy egy önálló futtató környezetben.

A globalThis ezt a problémát oldja meg: ez egy cross-környezeti standard a globális objektum elérésére. Ha a kód böngészőben fut, akkor a globalThis a window-ra mutat, míg a Node.js esetében a globalThis a global-ra. A JavaScript környezetek közötti határok elmosódása miatt a globalThis használata előnyösebb, mint a korábbi globális objektum nevek alkalmazása. Az eslint-plugin-unicorn is kínál egy prefer-global-this szabályt, amely elősegíti a globalThis használatát a kódokban.

A változókhoz való hozzáférés a JavaScript-ben a scope láncán keresztül történik. A változó feloldásának algoritmusát a következő lépésekben foglalhatjuk össze:

1. Ellenőrizd, hogy az aktuális scope tartalmaz-e olyan változót, amely megfelel a keresett névnek. Ha igen:
   a. Ha a változó inicializálva van (vagy hoisting révén elérhető), akkor azt az értéket rendeljük hozzá.
   b. Ha a változó nincs inicializálva, akkor ReferenceError-t dobunk.

2. Ha az aktuális scope-ban nincs megfelelő változó:
   a. Ha globális scope-ban vagyunk, akkor ReferenceError-t dobunk.
   b. Egyébként ismételjük meg a keresést a szülő scope-ban.

De mi van akkor, ha olyan változóra szeretnél hivatkozni, amely lehet, hogy nincs inicializálva? Ebben az esetben egy try/catch blokk használata segíthet, de elegánsabb megoldás lehet a typeof kulcsszó alkalmazása. A typeof használata előtt, ha egy nem deklarált változót hivatkozunk, ahelyett, hogy ReferenceError-t kapnánk, inkább a "undefined" stringet fogjuk visszakapni. Például:

javascript
Copy code
const initializeGlobalName = () => {
  if (typeof ninjaName === "undefined") {
    globalThis.ninjaName = "Naruto";
  }
}

Mivel a globális objektum egy objektum, ellenőrizhetjük, hogy létezik-e a ninjaName kulcs benne: if ("ninjaName" in globalThis). Azonban a typeof vizsgálat általában elterjedtebb. Fontos megjegyezni, hogy a legtöbb esetben a typeof ninjaName === "undefined" ugyanazt az eredményt adja, mint a ninjaName === undefined, kivéve, ha a ninjaName nem globális változóként van deklarálva, mivel a nem deklarált globális változó hivatkozása ReferenceError-t eredményezne.

Ugyanakkor a typeof kulcsszót kizárólag a globális változók ellenőrzésére használhatjuk. Ha helyi scope-ban deklarált változóra alkalmazzuk, akkor a rettegett Temporal Dead Zone-nal (TDZ) találkozunk:

javascript
Copy code
console.log(typeof x); // ReferenceError

const x = 1;

A helyi változó inicializálásának állapotát kizárólag try/catch blokk használatával tudhatjuk meg. Ha el akarjuk kerülni ezt a problémát, akkor célszerű a változó deklarációját a scope blokk tetejére helyezni.

A JavaScript rugalmassága a scope szabályokban számos előnyt biztosít, de ugyanakkor potenciális problémákat is eredményezhet, például memória szivárgásokat.

A JavaScript egy szemétgyűjtő (garbage-collected) nyelv, amely automatikusan felszabadítja a memóriát azokból az objektumokból, amelyek már nem rendelkeznek hivatkozással. De mit is jelent pontosan az, hogy „már nincs rá hivatkozás”? Mint azt az előzőekben láttuk, egy JavaScript funkció képes hivatkozni minden változóra a környezetében. A zárványok (closures) révén ez a funkció képes hozzáférni az olyan változókhoz is, amelyek egy külső scope-ban lettek definiálva, és amely már nem fut. A scope azáltal marad „élő”, hogy a funkció hozzáfér ezekhez a változókhoz.

De mi történik akkor, ha egy objektum már nincs közvetlenül hivatkozva, de a hozzá tartozó scope továbbra is él? A válasz: néha igen, néha nem! A szemétgyűjtés pontos viselkedését nem írja elő az ECMAScript specifikáció, így minden JavaScript motor saját heuristikáját követi. Jake Archibald egy példát mutatott be, amelyben a major JavaScript engine-ek mindegyike úgy tart egy objektumot élve, hogy az már nem lenne szükséges, ezzel memória szivárgást okozva.

javascript
Copy code
import { writeHeapSnapshot } from "v8";
const prepareNinjaPower = () => {

  const powerBuffer = new ArrayBuffer(99_000_000);

  (() => {
    console.log(`Ninja power level: ${powerBuffer.byteLength.toLocaleString()}`);
  })();
  return () => {
    console.log("The ninja power is safe.");
  };
};
const reportNinjaPower = prepareNinjaPower();
reportNinjaPower();
writeHeapSnapshot("1-before-gc.heapsnapshot");
if (global.gc) {
  global.gc(true);
  writeHeapSnapshot("2-after-gc.heapsnapshot");
}

A példában látható, hogy a powerBuffer objektum nem kerül szemétgyűjtésre, mert a zárvány továbbra is él, annak ellenére, hogy a funkció már végrehajtódott. Az ilyen problémák orvoslása érdekében célszerű explicit módon törölni a nem használt objektumokat, hogy biztosak legyünk abban, hogy a szemétgyűjtő felszabadítja őket. A TypeScript 5.2-ben egy új using kulcsszó is bevezetésre került, amely egyszerűsíti az explicit erőforrás-kezelést.