Sådan oprettes en responsiv Fixed-Data-tabel med React Hooks

Krog på hovedtavlen ved Rphillip3418.

Et af mine projekter bruger et bibliotek kaldet Fixed-Data-Table-2 (FDT2), og det er fantastisk til effektivt at gengive mange rækker med data.

Deres dokumentation demonstrerer en lydhør tabel, der ændrer størrelse på baggrund af browserens bredde og højde.

Jeg troede, det ville være cool at dele dette eksempel ved hjælp af React Hooks.

Hvad er React Hooks?

Det er funktioner, der giver dig React-funktioner som stati- og livscykluskroge uden ES6-klasser.

Nogle fordele er

  • isolering af tilstødende logik, hvilket gør det lettere at teste
  • deling af statlig logik uden gengivelse af rekvisitter eller komponenter med højere orden
  • at adskille din app's bekymringer baseret på logik og ikke livscykluskroge
  • at undgå ES6-klasser, fordi de er sære, ikke faktisk klasser, og tur til og med erfarne JavaScript-udviklere

For flere detaljer, se Reacts officielle Hooks-introduktion.

ADVARSEL: Brug ikke i produktionen!

På dette tidspunkt skrives kroge i alfa. Deres API kan ændres når som helst.

Jeg anbefaler dig at eksperimentere, have det sjovt og bruge kroge i dine sideprojekter, men ikke i produktionskode, før de er stabile.

Målet

Vi bygger en lydhør Fixed-Data-tabel. Det vil ikke være for smalt eller for bredt til vores side, det passer helt rigtigt!

Opsætning

Her er linkene GitHub og CodeSandbox.

git klon https://github.com/yazeedb/Responsive-FDT2-Hooks/
cd Responsive-FDT2-Hooks
npm installation

Mastergrenen har det færdige projekt, så check af startgrenen, hvis du ønsker at følge med.

git checkout start

Og køre projektet.

npm start

Appen skal køre på localhost: 3000. Lad os begynde at kode.

Import af tabelformater

Først vil du importere FDT2s stilark i index.js, så din tabel ser ikke ud til at være uheldig.

Generering af falske data

Vores tabel har brug for data, ikke? Opret en fil i src-mappen kaldet getData.js.

Vi bruger det fantastiske faker.js-bibliotek til at generere vores data. Det fulgte allerede med din npm-installation.

Her er kilden, hvis du vil kopiere / indsætte.

import faker fra 'faker';

const createFakeRowData = () => ({
  firstName: faker.name.firstName (),
  sidste navn: faker.name.lastName (),
  e-mail: faker.internet.email (),
  by: faker.address.city (),
  løn: faker.random
    .nummer({
      min: 50000,
      max: 500000
    })
    .toLocaleString ('da-USA', {
      stil: 'valuta',
      valuta: 'USD'
    })
});

eksport standard () => Array.from ({længde: 2000}, createFakeRowData);

createFakeRowData returnerer et objekt med et fuldt navn, e-mail, by og løn i amerikanske dollars.

Vores eksporterede funktion returnerer 2000 af dem.

Det reagerende bord

Vi har vores data, lad os kode op i tabellen nu.

Øverst på index.js skal du importere vores data og FDT2-komponenter.

import {Tabel, kolonne, celle} fra 'fast-datatabel-2';
importer getData fra './getData';

Og brug dem sådan.

funktion App () {
  const data = getData ();

  Vend tilbage (
    
                Fornavn }           width = {130}           cell = {({rækkeIndex, columnKey}) => {             returner {data [rowIndex] [columnKey]} ;           }}         />          Efternavn }           width = {130}           cell = {({rækkeIndex, columnKey}) => {             returner {data [rowIndex] [columnKey]} ;           }}         />          E }           width = {320}           cell = {({rækkeIndex, columnKey}) => {             returner {data [rowIndex] [columnKey]} ;           }}         />          By }           width = {180}           cell = {({rækkeIndex, columnKey}) => {             returner {data [rowIndex] [columnKey]} ;           }}         />          Løn }           width = {180}           cell = {({rækkeIndex, columnKey}) => {             returner {data [rowIndex] [columnKey]} ;           }}         />               ); }

Vi konfigurerer tabellen med vores data og opretter en kolonne for hvert felt, vi vil have vist.

getData-objekter indeholder et fornavn / efternavn, e-mail, by og løn, så vi har brug for en kolonne for hver.

Vores UI ser nu sådan ud.

Prøv at ændre størrelsen på dit browservindue, vil du bemærke, at det slet ikke reagerer. Det er enten for stort eller for lille til dit synspunkt og kan efterlade overflødig plads.

Flygt til det urene

Som vi har lært, giver React's erklærende karakter dig mulighed for at skrive dit UI ved hjælp af rene, deterministiske og let testbare funktioner.

Den samme input skal altid returnere den samme output.

Vi er dog undertiden nødt til at besøge den ”urene” verden for DOM-manipulation og tilføje begivenheder som lyttere, abonnementer og timere.

HOCS og gengiv rekvisitter

Render-rekvisitter og komponenter med højere orden (HOCS) er standardløsningen, men har nogle afvejninger, som Hooks nu prøver at løse.

Brug af kroge

Hooks er den nye flugtluge, der bruger imperativ kode. I vores tilfælde er det at få vinduet størrelse den effekt, vi har efter.

Opret en ny fil kaldet useWindowSize.js.

Vi har brug for to ting for at opnå dette:

  1. Lyt til vindueets størrelse af hændelse, så vi får besked om, hvornår det ændres
  2. Gem bredden / højden, der skal deles med vores bord

To kroge kan hjælpe:

  1. useEffect
  2. useState

useEffect

Dette vil sandsynligvis erstatte dine componentDidMount, componentDidUpdate og componentWillUnmount livscykluskroge, når det er stabiliseret.

useEffect er perfekt til mest initialiseringslogik og læsning af DOM.

Det er her, vi vil oprette vores vindue med størrelse på begivenhedslyttere.

For yderligere detaljer, se de officielle dokumenter.

useState

Superenkelt, denne krog giver en statusfuld værdi og en funktion til at opdatere den. Når vi fanger vinduets bredde / højde, vil vi have useState at spore det.

Skrivning af vores brugerdefinerede krog

I henhold til de officielle dokumenter:

En brugerdefineret krog er en JavaScript-funktion, hvis navn starter med ”brug”, og som muligvis kalder andre kroge.

Vores brugerdefinerede krog kaldes useWindowSize, og den kaldes useState og useEffect-kroge.

Denne krog er hovedsageligt fra Gabe Raglands brugWindowSize på useHooks.com.

// useWindowSize.js
import {useState, useEffect} fra 'react';

eksportstandard () => {
  const getSize = () => {
    Vend tilbage {
      bredde: vindue.vinderbredde,
      højde: windows.innerHeight
    };
  };

  const [windowsSize, setWindowSize] = useState (getSize);

  useEffect (() => {
    const handleResize = () => {
      setWindowSize (getSize ());
    };

    windows.addEventListener ('ændre størrelse', håndtere størrelse);

    retur () => {
      windows.removeEventListener ('ændre størrelse', håndtere størrelse);
    };
  }, []);

  retur vindue Størrelse;
};

Lad os nedbryde dette.

Få vinduet størrelse

const getSize = () => {
  Vend tilbage {
    bredde: vindue.vinderbredde,
    højde: windows.innerHeight
  };
};

getSize returnerer ganske enkelt vinduets indre bredde og indre højde.

Initialisering af useState

const [windowsSize, setWindowSize] = useState (getSize);

useState kan tage en startværdi eller en funktion, der returnerer en værdi.

I dette tilfælde ønsker vi, at vinduesdimensionerne skal starte, så getSize er den perfekte initializer.

useState returnerer derefter en matrix, det første indeks er værdien, og det andet indeks er opdateringsfunktionen.

Konfiguration af useEffect

useEffect (() => {
  const handleResize = () => {
    setWindowSize (getSize ());
  };

  windows.addEventListener ('ændre størrelse', håndtere størrelse);
  retur () => {
    windows.removeEventListener ('ændre størrelse', håndtere størrelse);
  };
}, []);

useEffect tager en funktion, der kører den ønskede effekt.

Hver gang vinduesstørrelsen ændres, indstiller grebstørrelse staten ved at give setWindowSize den seneste bredde / højde.

Oprydningslogik

Vores effektfunktion returnerer derefter en ny funktion, som useEffect genkender som oprydningslogik.

retur () => {
  windows.removeEventListener ('ændre størrelse', håndtere størrelse);
};

Når vi forlader siden eller på en eller anden måde afmonterer vores komponent, kører denne oprydningsfunktion og fjerner lytteren til ændring af størrelsesbegivenhed. Dette hjælper med at forhindre lækager.

useEffects andet argument

useEffects første argument er funktionen, der håndterer vores logik, men vi gav den også et andet argument: et tomt array.

useEffect (() => {...}, []); // tom matrix

Hvorfor en tom matrix?

useEffects andet argument er en række værdier man skal holde øje med. Hvis nogen af ​​disse værdier ændres, køres useEffect igen.

Vi indstiller / fjerner bare begivenhedslyttere, som kun behøver at ske en gang.

En tom matrix er, hvordan vi kommunikerer “bare kør en gang” for at brugeEffect.

Tom array = ingen værdier ændres nogensinde = kør bare én gang

Returner vindue Størrelse

Nu hvor vores effekt er indstillet, skal du bare returnere windowsSize. Når browserens størrelse ændres, opdateres windowsSize.

Brug af vores brugerdefinerede krog

Tid til at kaste vores krog på Fixed-Data-Table2!

Tilbage i index.js, gå videre og importer useWindowSize.

Og brug det sådan.

For sjov kan du console.log (windowsSize) og se det opdateres i realtid.

Cool, vi får tilbage et objekt med vindueets bredde og højde!

I stedet for at kode vores bords bredde og højde, kan vi bruge vores kroks eksponerede tilstand.

Nu skal din tabel tilpasse sig vinduesdimensionerne.

Jeg håber du nød denne tutorial!

Jeg er på Twitter, hvis du gerne vil tale. Og glem ikke at holde den klap -knap 50x!

Indtil næste gang.

Pas på,
Yazeed Bzadough

chinthaka.org © 2020