A React Component Data helye: állapot, tároló, statikus és ez

A React Component Data helye: állapot, tároló, statikus és ez

A React és Redux megjelenésével közös kérdés merült fel:

Mit kell tartanom a Redux üzletben, és mit kell mentenem a helyi államban ?

De ez a kérdés valójában túl leegyszerűsítő, mert két másik módon is tárolhatja az adatokat egy összetevőben történő felhasználásra: statikus és ez .

Nézzük át, mi minden ezek közül, és mikor érdemes használni őket.

Helyi állam

A React első bemutatásakor bemutattuk a helyi államokat . A helyi államról azt kell tudni , hogy ha egy államérték megváltozik, akkor az újbóli megjelenítést vált ki.

Ez az állapot átadható a gyerekeknek, mint kellék , ami lehetővé teszi, hogy elkülönítse az összetevőket az intelligens adatkomponensek és a hülye prezentációs komponensek között, ha úgy dönt.

Itt van egy alapvető számláló alkalmazás, amely a helyi államot használja :

Az Ön adatait (a számláló értéke) az App komponens tárolja , és továbbadhatja gyermekeinek.

Felhasználási esetek

Feltételezve, hogy a számláló fontos az alkalmazás számára, és olyan adatokat tárol, amelyek hasznosak lehetnek más komponensek számára, akkor nem szeretné a helyi állapotot használni ennek az értéknek a megőrzéséhez.

A jelenlegi legjobb gyakorlat az, hogy a helyi állapotot használja a felhasználói felület (UI) állapotának kezelése helyett az adatok. Például egy ellenőrzött összetevő használata egy űrlap kitöltéséhez a helyi állam tökéletesen érvényes használata .

Egy másik példa a felhasználói felületen, amelyet helyi állapotban tárolhat, az opciók listájából jelenleg kiválasztott fül lesz.

A helyi állapot használatának átgondolására jó módszer annak megfontolása, hogy a tárolt értéket egy másik összetevő fogja-e használni. Ha egy érték csak egyetlen összetevőre jellemző (vagy ennek az összetevőnek egyetlen gyermeke), akkor biztonságosan megtarthatja ezt az értéket helyi állapotban .

Elvihető: a felhasználói felület állapotát és az átmeneti adatokat (például űrlapbemeneteket) tartsa helyi állapotban .

Redux üzlet

Aztán egy idő elteltével, és mindenki kezdett elkényelmesedni az egyirányú adatáramlás gondolatában, megkaptuk a Redux-ot.

Redux segítségével globális üzletet kapunk . Ez az üzlet az alkalmazásod legmagasabb szintjén él, és minden gyermeknek továbbítja az adatokat. Csatlakozik a globális áruház a connect átalakító és mapStateToProps funkciót.

Eleinte az emberek mindent a Redux üzletbe raktak . Felhasználók, modálok, űrlapok, aljzatok ... Ön megnevezi.

Az alábbiakban ugyanaz a számláló alkalmazás található, de a Redux használatával. Fontos megjegyezni, hogy a számláló most a this.props.counter- ből származik, miután leképezték a mapStateToProps -ról a connect függvényben, amely elveszi a számláló értékét a globális áruházból, és feltérképezi az aktuális komponens kellékeinek .

Most, amikor rákattint a gombra, egy művelet küldésre kerül, és a globális áruház frissül. Az adatokat a helyi komponensünkön kívül kezeljük, és továbbítjuk.

Érdemes megjegyezni, hogy a kellékek frissítésekor az újrarendelést is kivált - akárcsak az állapot frissítésekor .

Felhasználási esetek

A Redux áruház kiválóan alkalmas az alkalmazás állapotának megtartására a felhasználói felület helyett. Tökéletes példa erre a felhasználó bejelentkezési állapota. Számos összetevőjének hozzáférést kell kapnia ezekhez az információkhoz, és amint a bejelentkezési állapot megváltozik, az összes összetevőt (legalább azokat, amelyeket rendereltek) újra meg kell adni a frissített információkkal együtt.

A Redux olyan események kiváltásához is hasznos, amelyekhez több összetevőn vagy több útvonalon kell hozzáférnie. Erre példa lehet egy bejelentkezési mód, amelyet számos gomb indíthat el az alkalmazásban. Ahelyett, hogy feltételesen megjelenítené a modált egy tucat helyen, feltételesen megjelenítheti azt az alkalmazás legfelső szintjén, és egy Redux művelettel aktiválhatja az érték megváltoztatásával a boltban .

Elvihető : tartani az adatokat, hogy kíván megosztásról komponensek boltban .

ez.

Az egyik legkevésbé használt tulajdonságok, amikor dolgozik reagálni az ezt . Az emberek gyakran elfelejtik, hogy a React csak egy JavaScript, ES2015 szintaxissal. Bármit megtehet JavaScript-ben, a React-ben is megteheti.

Az alábbi példa egy funkcionális számláló alkalmazás, hasonló a fenti két példához.

Tároljuk a számláló értékét az összetevőben, és a forceUpdate () segítségével újra megjelenítjük, ha az érték változik. Ez azért van, mert az állapoton és a kellékeken kívül másra történő változtatások nem váltanak ki újrarendezést .

Ez valójában egy példa arra, hogyan ne használja ezt . Ha a forceUpdate () használatát tapasztalja , valószínűleg valamit rosszul csinál. Azoknál az értékeknél, amelyeknél a változásnak újraterveret kell indítania, használja a helyi állapotot vagy a props / Redux tárolót .

Felhasználási esetek

A használat esetében ez az, hogy tárolja értékeket, amelyek a változás nem váltják ki az újra-render. Például a konnektorok tökéletesek ezen tárolni .

Továbbá sokan nem veszik észre, hogy ezt már mindig használják a funkciódefiníciókban. A render () definiálásakor valóban meghatározza ezt: prototípus.render = függvény () , de ez el van rejtve az ES2015 osztály szintaxisa mögött.

Elvihető: használja ezt olyan dolgok tárolására, amelyek nem indíthatnak újrarendelést.

Statikus

A statikus módszerek és tulajdonságok az ES2015 osztályok talán legkevésbé ismert aspektusai (nyugodj meg, igen, tudom, hogy nem igazán osztályok a motorháztető alatt) , főleg azért, mert nem használják őket olyan gyakran. De valójában nem különösebben bonyolultak. Ha a PropTypes-t használta , akkor már definiált egy statikus tulajdonságot.

A következő két kódblokk azonos. Az első az, hogy a legtöbb ember hogyan határozza meg a PropTypes-t. A második az, hogyan lehet statikusan meghatározni őket .

Mint látható, a statikus nem is olyan bonyolult. Ez csak egy másik módja annak, hogy értéket rendeljünk egy osztályhoz. A fő különbség a statikus és ez között az, hogy az érték eléréséhez nem kell példányt adnia az osztálynak.

A fenti példában láthatja, hogy a staticProperty érték megszerzéséhez csak egyenesen az osztályból hívhatnánk, anélkül, hogy példányosítanánk, de a prototypeProperty megszerzéséhez egy új App () alkalmazással kellett példányosítanunk .

Felhasználási esetek

A statikus módszereket és tulajdonságokat ritkán használják, és olyan segédfunkciókhoz kell használni, amelyekre egy adott típusú összes komponensnek szüksége lenne.

A PropTypes egy olyan segédfunkció példája, amelyhez csatolhat valamit, például egy Button komponenst, mivel minden egyes előállított gombra ugyanazokra az értékekre lesz szükség.

Egy másik felhasználási eset az, ha aggódik az adatok túlhúzása miatt. Ha GraphQL vagy Falcor programot használ, megadhatja, hogy mely adatokat kívánja visszaküldeni a szerverről. Így végül nem kap sokkal több adatot, mint amennyire az alkatrészéhez valójában szüksége van.

Tehát a fenti példakomponensben , mielőtt lekérné az adatokat egy adott összetevőre, gyorsan megszerezheti a lekérdezéshez szükséges értékek tömbjét az App.requiredData alkalmazással. Ez lehetővé teszi, hogy kérést tegyen be túlhúzás nélkül.

Elvihető: valószínűleg soha nem fog statikusat használni .

Ez a másik lehetőség…

Valójában van egy másik lehetőség, amelyet szándékosan hagytam ki a címből, mert takarékosan kell használni: tárolhatja a dolgokat egy modul hatókörű változóban .

Vannak speciális helyzetek, amelyekben van értelme, de többnyire csak nem szabad megtenni.

Láthatja, hogy ez majdnem megegyezik a használatával , azzal a különbséggel, hogy az értéket az összetevőn kívül tároljuk, ami problémákat okozhat, ha fájlonként több összetevő van. Lehet, hogy szeretné használni ezt a beállítási alapértékeket, ha az értékek nem kötődnek a boltba , különben egy statikus alapértelmezett kellékek jobb lenne.

Ha meg kell osztania az adatokat az összetevők között, és az adatokat minden modul számára elérhetővé szeretné tenni, akkor szinte mindig jobb a Redux áruház használata .

Elvihető: ne használjon modul hatókörű változókat, ha elkerülheti.

Sam Corcos a vezető fejlesztője és társalapítója a 3D-s topográfiai térképek leg intuitívabb platformjának, a Sightline Maps-nek, valamint a LearnPhoenix.io, egy közepesen fejlett oktató webhelynek, amelynek segítségével méretezhető gyártási alkalmazásokat készíthet a Phoenix és a React segítségével. Szerezzen 20 dollárt a LearnPhoenix-től a kuponkóddal: free_code_camp