A reagálás és az adattárak integrálása

Néhány hónappal ezelőtt egy React komponenst keresett, hogy megjelenítsen egy adattáblát az egyik webes alkalmazásunkban a Undertone-ban. Az előző projektben, amely nem magas szintű könyvtáron alapult, mint például a React, a jQuery-plugin DataTables-t használtuk. és nagyon elégedettek voltunk az általa kínált rugalmassággal. Most olyan dolgot kerestem, amely könnyen integrálható React komponensként az új alkalmazásban.

Nagyon kiterjedt kutatás után két dolgot megtanultam. Először is, nem ajánlott a DataTables with React használata, mivel mindkét könyvtár irányítja a DOM-ot. Másodszor, nem létezett olyan könyvtár, amely a webes alkalmazáshoz szükséges rugalmasságot biztosította (a kutatásom óta). A projekt megvalósításának határideje közeledt, és valamit választottam. Úgy döntöttem, hogy népszerűtlen úton haladok és integrálom a DataTables projektet. Az eredmény sokkal jobb volt, mint amire számítottam, és az egész integrációs folyamat valójában nagyon sima volt. A következő szakaszokban leírom a projektcsomagot, amelyben a React + DataTables integráció működik.

előbeállítás

A projekt állványozásához a Create-React-App (CRA) -ot használjuk. Ha nem ismeri a CRA-t, alapvetően egy eszköz a React alkalmazások létrehozás nélküli létrehozásához. Az első dolog, amire szükségünk van, telepítse a CRA-t (ha még nem telepítette), és inicializálja az új projektet a create-react-app paranccsal (lásd a CRA dokumentációját a projekt inicializálásának és indításának részleteiről).

Telepítésünket a jQuery és a Datatables modulok hozzáadásával dev függésekkel egészítjük ki.

Miután a modulok telepítése befejeződött, töröljük azokat a felesleges fájlokat, amelyeket a CRA automatikusan létrehoz a repositoryból. A projekt végső eredményét, amelyet itt készítünk ebben a cikkben, megtalálható a GitHub-ban lévő reagens-adattárak repositoryjában.

Egyszerű felhasználói felület

Nagyon egyszerű felületet valósítunk meg. A felhasználóknak olyan beviteli területük van, ahol nevet és álnevet adhatnak a megfelelő szövegmezőkbe. Amikor megnyomja a "Hozzáadás" gombot, a szövegmezőkbe bevitt adatok az adattáblába kerülnek. A név egy egyedi "kulcsa" minden egyes rekordhoz - ha a felhasználó beír egy már létező nevet, akkor nem hoz létre új beceneveket, és csak a meglévő pár aliasja frissül a táblázatban.

Adatkészletek konfigurálása

A CRA által létrehozott üres tartalmakkal már rendelkezünk forrásfájlokkal. Új fájlt hozunk létre, amely a táblázatos összetevőnket tartalmazza - ez az összetevő felelős a táblázat megjelenítéséért és kezeléséért. Először importáljuk mind a jQuery-t, mind a DataTables-et, és összerendeljük őket, hogy a DataTables hozzáférjen a jQuerey függvényekhez. Ezt a következő két sorban lehet elvégezni:

Két oszlopot definiálunk, amelyek kivonják a megfelelő értékeket a névnévpárból, amelyet a táblázathoz adunk:

Végül, az összetevő legfontosabb definíciója:

Néhány megjegyzés. A render funkcióban egy HTML táblázatot hozunk létre. Ez egy DataTables követelmény, mivel szüksége van egy táblázatos elemre a DOM feltöltéséhez. A React soha nem fogja tudni, hogy több DOM lesz az asztalelemen belül. Garantáljuk, hogy a React részéről ismétlődő kísérletek nem merülnek fel, és mindig a falseComponentUpdate módszerrel tér vissza. A táblázat inicializálását csak egyszer kell végrehajtani, amikor a komponensünk fel van szerelve, mert a DOM minden belső manipulációját el szeretnénk hagyni az adatlapokon. Végül el kell pusztítanunk az asztalt, ha az összetevőt le kell szerelni. Ez a componentWillUnmount módszerrel történik a megfelelő DataTables API hívással.

Jelenleg az Asztali összetevő az adatokat a props.names segítségével veszi át. de nem vezettük be a nevek hozzáadásának vagy frissítésének módját. Ezt a következő részben fogjuk megtenni.

A táblázat frissítése

Kétféleképpen módosíthatja a tömb-nick párokat. Először új névpár hozzáadásával. Másodszor, a meglévő név-nick párt egy új párral helyettesítve ugyanazzal a névvel és egy másik becenévvel. Ezt egy másik komponensben végezzük, amely az asztal összetevőjén kívül van. (Nem fogok részletekbe menni a frissítések terjesztéséről - további információért lásd a projekttárat a GitHub-on.) Itt kétféle frissítést vizsgálunk két különböző módszerrel.

1) Új név-név pár hozzáadása esetén az egész táblát újratölti:

A standard jQuery szelektor használatával megtaláljuk a táblázat egy példányát a komponensDidMount (adat-táblázat-csomagoló) által megadott osztály használatával. Ezután töröljük az összes korábbi adatot és új adatokat töltünk be (a rövidség kedvéért, nem adtam hozzá egy új név-nick párt - ez akkor is működik, ha töröl egy pár vagy több pár).

2) A pár frissítésével meg szeretnénk találni ezt a párat, és megváltoztatnánk a megváltoztatott adatok egy bizonyos részét (a nick mező a példánkban):

Ne feledje, hogy az API-módszerrel rajzolja át a táblázatot. ha bármilyen adat megváltozott, vagy a változtatások nem láthatók a felhasználó számára.

Csak a két eset megkülönböztetése és a megfelelő módszer felhívása, amikor az asztali összetevő megjelenik a React-ban. Ezt a shouldComponentUpdate kódban tesszük. A változás típusának ellenőrzése és a megfelelő módszer végrehajtása.

Most, amikor a props.names fájlban lévő párok száma megváltozik, újra megjelenítjük az egész táblát vagy frissítjük a megfelelő elemeket. Megjegyezzük, hogy egy igazi alkalmazásban a teljes tömb tartalma megváltoztatható, és az elemek száma változatlan maradhat - egy olyan esemény, amely nem jelenhet meg a példánkban.

A React és a DataTables integrálására mindenképpen lehetséges, sőt egyszerűen integrálható, ha megvédi a Reactot a DOM-ban található adatállományok kezelésétől. A jelen cikkben alkalmazott alkalmazás meglehetősen egyszerű, de biztosítja az összes olyan építőelemet, amely szükséges ahhoz, hogy a munkát valódi projektbe integrálhassuk.

Kérem, ossza meg tapasztalatait - mely React-összetevőket használnak a táblázatok rendeltetésszerűségének végrehajtására a rendezés és a lapozással, hogy nagy mennyiségű adatot manipuláljon?