Unul dintre proiectele mele folosește o bibliotecă numită Tabel de date fixe-2 (FDT2) și este excelent pentru redarea eficientă a unor tone de rânduri de date.

Documentația lor demonstrează o masă receptivă care se redimensionează în funcție de lățimea și înălțimea browserului.

Cum se creeaza un tabel cu date fixe receptiv cu

M-am gândit că ar fi grozav să împărtășesc acest exemplu folosind React Hooks.

Ce sunt React Hooks?

Sunt funcții care vă oferă funcții React, cum ar fi cârlige de stare și ciclul de viață fără clase ES6.

Unele beneficii sunt

  • izolarea logicii de stare, facilitând testarea
  • partajarea logicii de stare fără elemente de redare sau componente de ordin superior
  • separarea preocupărilor aplicației pe baza logicii, nu a cârligelor ciclului de viață
  • evitând clasele ES6, pentru că sunt ciudate, nu chiar cursuriși crește chiar și dezvoltatori JavaScript cu experiență

Pentru mai multe detalii vezi Introducerea oficială a lui React, Hooks.

AVERTISMENT: Nu utilizați în producție!

La momentul scrierii acestui articol, Cârligele sunt în alfa. API-ul lor se poate modifica oricând.

Vă recomand să experimentați, să vă distrați și să utilizați Hooks în proiectele dvs. secundare, dar nu în codul de producție până când nu sunt stabili.

Scopul

1611238326 240 Cum se creeaza un tabel cu date fixe receptiv cu

Vom construi un tabel cu date fixe receptiv. Nu va fi prea îngust sau prea lat pentru pagina noastră, se va potrivi perfect!

Înființat

Aici sunt GitHub și CodeSandbox link-uri.

git clone https://github.com/yazeedb/Responsive-FDT2-Hooks/
cd Responsive-FDT2-Hooks
npm install

master sucursala are proiectul finalizat, așa că verificați start filiala dacă doriți să continuați.

git checkout start

Și rulați proiectul.

npm start

Aplicația ar trebui să ruleze localhost:3000. Să începem codarea.

Importul stilurilor de masă

Mai întâi veți dori să importați foaia de stil FDT2 în index.js, deci masa ta nu arata zguduit.

1611238326 325 Cum se creeaza un tabel cu date fixe receptiv cu

Generarea de date false

Tabelul nostru are nevoie de date, nu? Creați un fișier în src dosar numit getData.js.

Vom folosi minunatul faker.js bibliotecă pentru a genera datele noastre. A venit deja cu dumneavoastră npm install.

Iată sursa dacă doriți să copiați / lipiți.

import faker from 'faker';

const createFakeRowData = () => ({
  firstName: faker.name.firstName(),
  lastName: faker.name.lastName(),
  email: faker.internet.email(),
  city: faker.address.city(),
  salary: faker.random
    .number({
      min: 50000,
      max: 500000
    })
    .toLocaleString('en-US', {
      style: 'currency',
      currency: 'USD'
    })
});

export default () => Array.from({ length: 2000 }, createFakeRowData);

createFakeRowData returnează un obiect cu un nume complet, e-mail, oraș și salariu în dolari SUA.

Funcția noastră exportată returnează 2000 dintre ele.

Tabelul care nu răspunde

Avem datele noastre, să codificăm tabelul acum.

În partea superioară a index.js, importați datele noastre și componentele FDT2.

import { Table, Column, Cell } from 'fixed-data-table-2';
import getData from './getData';

Și folosește-le așa.

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

  return (
    <div className="App">
      <Table
        rowHeight={50}
        rowsCount={data.length}
        headerHeight={50}
        width={1000}
        height={500}
      >
        <Column
          columnKey="firstName"
          header={<Cell>First Name</Cell>}
          width={130}
          cell={({ rowIndex, columnKey }) => {
            return <Cell>{data[rowIndex][columnKey]}</Cell>;
          }}
        />
        <Column
          columnKey="lastName"
          header={<Cell>Last Name</Cell>}
          width={130}
          cell={({ rowIndex, columnKey }) => {
            return <Cell>{data[rowIndex][columnKey]}</Cell>;
          }}
        />
        <Column
          columnKey="email"
          header={<Cell>Email</Cell>}
          width={320}
          cell={({ rowIndex, columnKey }) => {
            return <Cell>{data[rowIndex][columnKey]}</Cell>;
          }}
        />
        <Column
          columnKey="city"
          header={<Cell>City</Cell>}
          width={180}
          cell={({ rowIndex, columnKey }) => {
            return <Cell>{data[rowIndex][columnKey]}</Cell>;
          }}
        />
        <Column
          columnKey="salary"
          header={<Cell>Salary</Cell>}
          width={180}
          cell={({ rowIndex, columnKey }) => {
            return <Cell>{data[rowIndex][columnKey]}</Cell>;
          }}
        />
      </Table>
    </div>
  );
}

Configurăm tabelul cu datele noastre și creăm un Column pentru fiecare câmp pe care îl dorim afișat.

getData obiectele conțin un nume / prenume, e-mail, oraș și salariu, deci avem nevoie de o coloană pentru fiecare.

UI-ul nostru arată acum așa.

1611238327 114 Cum se creeaza un tabel cu date fixe receptiv cu

Încercați să redimensionați fereastra browserului, veți observa că nu răspunde deloc. Este fie prea mare, fie prea mic pentru vizualizarea dvs. și poate lăsa spațiu în exces.

Evadare către impur

După cum am aflat, natura declarativă a lui React vă permite să scrieți interfața dvs. utilizând funcții pure, deterministe și ușor de testat.

Aceeași intrare ar trebui să returneze întotdeauna aceeași ieșire.

Cu toate acestea, uneori trebuie să vizităm lumea „impură”, pentru manipularea DOM, adăugând evenimente precum ascultători, abonamente și cronometre.

HOCS și recuzită

Accesoriile de redare și componentele de ordin superior (HOCS) sunt soluția standard, dar au unele compromisuri pe care Hooks încearcă să le rezolve acum.

Folosind Hooks

Cârligele sunt noua trapă de evacuare care folosește codul imperativ. În cazul nostru, obținerea dimensiunii ferestrei este efectul pe care îl urmărim.

Creați un fișier nou numit useWindowSize.js.

Pentru a realiza acest lucru vom avea nevoie de două lucruri:

  1. Ascultă ferestrele resize eveniment, așa că suntem anunțați când se modifică
  2. Salvați lățimea / înălțimea pentru a le partaja cu masa noastră

Două cârlige pot ajuta:

  1. useEffect
  2. useState

useEffect

Acest lucru vă va înlocui probabil componentDidMount, componentDidUpdate, și componentWillUnmount cârligele ciclului de viață odată stabilizat.

useEffectEste perfect pentru majoritatea logicii de inițializare și pentru citirea DOM.

Acolo ne vom aranja fereastra resize ascultători de evenimente.

Pentru mai multe detalii, a se vedea documentele oficiale.

useState

Super simplu, acest Hook returnează o valoare de stare și o funcție de actualizare. Odată ce captăm lățimea / înălțimea ferestrei, vom avea useState Urmărește-o.

Scriindu-ne obiceiul Cârlig

Conform documentele oficiale:

Un Hook personalizat este o funcție JavaScript al cărui nume începe cu „use” și care poate apela și alte Hooks.

Cârligul nostru personalizat va fi numit useWindowSize, și va apela la useState și useEffect cârlige.

Acest Hook este în principal din Gabe Ragland‘s useWindowSize pe useHooks.com.

// `useWindowSize.js`

import { useState, useEffect } from 'react';

export default () => {
  const getSize = () => {
    return {
      width: window.innerWidth,
      height: window.innerHeight
    };
  };

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

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

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return windowSize;
};

Să descompunem asta.

Obținerea dimensiunii ferestrei

const getSize = () => {
  return {
    width: window.innerWidth,
    height: window.innerHeight
  };
};

getSize returnează pur și simplu fereastra innerWidth și innerHeight.

Inițializarea useState

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

useState poate lua o valoare inițială sau o funcție care returnează o valoare.

În acest caz, dorim să înceapă dimensiunile ferestrei, deci getSize este inițializatorul perfect.

useState apoi returnează o matrice, primul index este valoarea și al doilea index este funcția de actualizare.

Configurarea useEffect

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

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

useEffect preia o funcție care va rula efectul dorit.

Ori de câte ori dimensiunea ferestrei se schimbă, handleResize stabilește statul dând setWindowSize cea mai recentă lățime / înălțime.

Logică de curățare

Funcția noastră de efect returnează apoi un funcție nouă, care useEffect recunoaște ca logică de curățare.

return () => {
  window.removeEventListener('resize', handleResize);
};

Când părăsim pagina sau cumva ne demontăm componenta, această funcție de curățare rulează și elimină resize ascultător de evenimente. Acest lucru ajută la prevenirea scurgerilor de memorie.

useEffect’s Argument al doilea

useEffectPrimul argument este funcția care ne gestionează logica, dar i-am dat și un al doilea argument: un tablou gol.

useEffect(() => { ... }, []); // empty array

De ce un tablou gol?

useEffectAl doilea argument este o serie de valori de supravegheat. Dacă se schimbă oricare dintre aceste valori useEffect aleargă din nou.

Setăm / eliminăm ascultătorii de evenimente, ceea ce trebuie să se întâmple o singură dată.

O matrice goală este modul în care comunicăm „doar aleargă o dată” către useEffect.

Matrice goală = nu se schimbă niciodată valori = doar rulează o dată

Returnează dimensiunea ferestrei

Acum că efectul nostru este configurat, trebuie doar să ne întoarcem windowSize. Pe măsură ce browserul a fost redimensionat, windowSize va fi actualizat.

1611238327 356 Cum se creeaza un tabel cu date fixe receptiv cu

Folosind Hook-ul nostru personalizat

E timpul să ne aruncăm Hook-ul la Fixed-Data-Table2!

Înapoi în index.js, continuați și importați useWindowSize.

1611238328 37 Cum se creeaza un tabel cu date fixe receptiv cu

Și folosește-o așa.

1611238328 306 Cum se creeaza un tabel cu date fixe receptiv cu

Pentru distracție poți console.log(windowSize) și urmăriți-l actualizându-se în timp real.

Cum se creeaza un tabel cu date fixe receptiv cu

Mișto, recuperăm un obiect al ferestrei width și height!

În loc să codificăm lățimea și înălțimea mesei noastre, putem folosi starea expusă a Hook-ului nostru.

1611238329 512 Cum se creeaza un tabel cu date fixe receptiv cu

Acum, masa dvs. ar trebui să se adapteze la dimensiunile ferestrei.

1611238330 423 Cum se creeaza un tabel cu date fixe receptiv cu

Sper că v-a plăcut acest tutorial!