Kako stvoriti responzivnu tablicu s fiksnim podacima s React kukama

Programiranje

Jedan od mojih projekata koristi knjižnicu pod nazivom Fixed-Data-Table-2 (FDT2) i izvrsna je za učinkovito generiranje tona redaka podataka.

Njihova dokumentacija prikazuje odgovarajuću tablicu koja se mijenja na temelju širine i visine preglednika.

Mislio sam da bi bilo cool podijeliti ovaj primjer koristeći React Hooks.

Što su reakcijske kuke?

To su funkcije koje vam daju React značajke poput stanja i kuka životnog ciklusa bez ES6 klasa.

Neke su prednosti

  • izolirajući logiku stanja, olakšavajući testiranje
  • dijeljenje logike stanja bez prikazivanja rekvizita ili komponenti višeg reda
  • razdvajanje zabrinutosti vaše aplikacije na temelju logike, a ne kukica životnog ciklusa
  • izbjegavajući predavanja ES6, jer su neobični, a ne zapravo predavanja , i spotaknu čak i iskusne programere JavaScript-a

Za više detalja pogledajte Reactov službeni uvod u Hooks.

UPOZORENJE: Ne koristiti u proizvodnji!

U vrijeme pisanja ovog članka, Kuke su u alfa verziji. Njihov se API može promijeniti u bilo kojem trenutku.

Preporučujem vam da eksperimentirate, zabavljate se i koristite udice u svojim sporednim projektima, ali ne u produkcijskom kodu dok ne postanu stabilni.

Cilj

Izgradit ćemo odgovarajuću tablicu s fiksnim podacima. Neće biti preuska ili preširoka za našu stranicu, uklopit će se baš kako treba!

Postaviti

Ovdje su veze GitHub i CodeSandbox.

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

masterGrana ima gotov projekt, pa naplata startgranu ako želite slijediti zajedno.

git checkout start

I voditi projekt.

npm start

Aplikacija bi trebala biti pokrenuta localhost:3000. Počnimo s kodiranjem.

Uvoz stilova tablice

Prvo ćete htjeti uvesti FDT2 tablicu stilova index.js, kako vaša tablica ne bi izgledala čudno.

Generiranje lažnih podataka

Naša tablica treba podatke, zar ne? Stvorite datoteku u srcmapi pod nazivom getData.js.

Za generiranje podataka upotrijebit ćemo strašnu biblioteku faker.js. Već je došlo s vašim npm install.

Evo izvora ako želite kopirati / zalijepiti.

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 vraća objekt s punim imenom, e-poštom, gradom i plaćom u američkim dolarima.

Naša izvožena funkcija vraća ih 2000.

Neodgovarajuća tablica

Imamo svoje podatke, hajde da sada kodiramo tablicu.

Pri vrhu index.jsuvezite naše podatke i komponente FDT2.

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

I koristite ih tako.

function App() { const data = getData(); return ( 
    
      { return {data[rowIndex][columnKey]}; }} />
     
       { return {data[rowIndex][columnKey]}; }} />
      
        { return {data[rowIndex][columnKey]}; }} />
       
         { return {data[rowIndex][columnKey]}; }} />
        
          { return {data[rowIndex][columnKey]}; }} />
        
       
      
     
    
    
 ); }

Tablu konfiguriramo s našim podacima i izrađujemo Columnza svako polje koje želimo prikazati.

getData objekti sadrže ime / prezime, e-poštu, grad i plaću, pa nam je potreban stupac za svaki.

Naše korisničko sučelje sada izgleda ovako.

Pokušajte promijeniti veličinu prozora preglednika, primijetit ćete da uopće ne reagira. Ili je prevelik ili premalen za vašu vizuru i može ostaviti višak prostora.

Pobjeći nečistom

Kao što smo saznali, React-ova deklarativna priroda omogućuje vam pisanje korisničkog sučelja koristeći čiste, determinističke i lako provjerljive funkcije.

Isti ulaz uvijek treba vraćati isti izlaz.

Međutim, ponekad moramo posjetiti "nečisti" svijet, radi DOM manipulacije, dodajući događaje poput slušatelja, pretplata i odbrojavanja.

HOCS i renderirani rekviziti

Reperski rekviziti i komponente višeg reda (HOCS) standardno su rješenje, ali imaju neke kompromise koje Hooks sada pokušava riješiti.

Korištenje udica

Kuke su novo grotlo za uporabu imperativnog koda. U našem slučaju, dobivanje veličine prozora je učinak za kojim tragamo.

Stvorite novu datoteku pod nazivom useWindowSize.js.

Za to ćemo trebati dvije stvari:

  1. Slušajte resizedogađaj prozora , tako da ćemo biti obaviješteni kada se promijeni
  2. Spremite širinu / visinu za dijeljenje s našom tablicom

Dvije kuke mogu pomoći:

  1. useEffect
  2. useState

useEffect

To će vjerojatno zamijeniti componentDidMount, componentDidUpdatei componentWillUnmountživotnog ciklusa kuke nakon što je stabiliziran.

useEffectje savršen za većinu logike inicijalizacije i čitanja DOM-a.

Tu ćemo postaviti resizeslušatelje prozorskih događaja.

Za više detalja pogledajte službene dokumente.

useState

Izuzetno jednostavno, ova Kuka vraća vrijednost sa statusom i funkciju za njezino ažuriranje. Jednom kad zabilježimo širinu / visinu prozora, morat ćemo ga useStatepratiti.

Pisanje naše prilagođene Kuke

Prema službenim dokumentima:

Prilagođena udica je JavaScript funkcija čije ime počinje s "koristi" i koja može pozvati druge udice.

Our custom hook will be called useWindowSize, and it’ll call the useState and useEffect hooks.

This Hook’s mainly from Gabe Ragland’s useWindowSize on 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; };

Let’s break this down.

Getting the window size

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

getSize simply returns the window’s innerWidth and innerHeight.

Initializing useState

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

useState can take an initial value or a function that returns a value.

In this case we want the window’s dimensions to start, so getSize is the perfect initializer.

useState then returns an array, the first index is the value and the second index is the updater function.

Configuring useEffect

useEffect(() => { const handleResize = () => { setWindowSize(getSize()); }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }, []);

useEffect takes a function that will run your desired effect.

Whenever the window size changes, handleResize sets the state by giving setWindowSize the latest width/height.

Cleanup Logic

Our effect function then returns a new function, which useEffect recognizes as cleanup logic.

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

When we leave the page or somehow unmount our component, this cleanup function runs and removes the resize event listener. This helps prevent memory leaks.

useEffect’s Second Argument

useEffect's first argument is the function handling our logic, but we also gave it a second argument: an empty array.

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

Why an empty array?

useEffect's second argument is an array of values to watch over. If any of those values change useEffect runs again.

We’re just setting/removing event listeners, which only needs to happen once.

An empty array is how we communicate “just run once” to useEffect.

Empty array = no values ever change = just run once

Return windowSize

Now that our effect’s set up, just return windowSize. As the browser’s resized, windowSize will be updated.

Using our custom Hook

Time to throw our Hook at Fixed-Data-Table2!

Back in index.js, go ahead and import useWindowSize.

And use it like so.

For fun you can console.log(windowSize) and watch it update in real-time.

Cool, we get back an object of the window’s width and height!

Instead of hardcoding our table’s width and height, we can use our Hook’s exposed state.

Now your table should adjust to the window’s dimensions.

I hope you enjoyed this tutorial!