Reagoivan kiinteän tietotaulukon luominen React Hooksilla

Yksi projekteistani käyttää kirjastoa nimeltä Fixed-Data-Table-2 (FDT2), ja se on hieno renderoida tehokkaasti tonnia rivejä tietoja.

Heidän dokumentaationsa osoittaa reagoivan taulukon, jonka kokoa muutetaan selaimen leveyden ja korkeuden perusteella.

Luulin, että olisi hienoa jakaa tämä esimerkki React Hooksin avulla.

Mitä ovat React Hooks?

Ne ovat toimintoja, jotka antavat sinulle React-ominaisuuksia, kuten tila- ja elinkaarikoukut ilman ES6-luokkia.

Jotkut edut ovat

  • eristää tilallinen logiikka, mikä helpottaa testaamista
  • tilallisen logiikan jakaminen ilman renderöintiä tai korkeamman asteen komponentteja
  • erotetaan sovelluksesi huolenaiheet logiikan, ei elinkaarikoukkujen perusteella
  • välttää ES6-luokkia, koska ne ovat omituisia, eivät oikeastaan ​​luokkia , ja häiritsevät jopa kokeneita JavaScript-kehittäjiä

Katso lisätietoja Reactin virallisesta Hooks-johdannosta.

VAROITUS: Älä käytä tuotannossa!

Tämän kirjoituksen aikaan koukut ovat alfaa. Niiden sovellusliittymä voi muuttua milloin tahansa.

Suosittelen, että kokeilet, pidät hauskaa ja käytät koukkuja sivuprojekteissasi, mutta et tuotantokoodissa ennen kuin ne ovat vakaita.

Maali

Rakennamme reagoivan Fixed-Data-taulukon. Se ei ole liian kapea tai liian leveä sivullemme, se sopii juuri oikeaan!

Perustaa

Tässä ovat GitHub- ja CodeSandbox-linkit.

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

masterHaara on valmiin projektin, joten kassalle starthaara, jos haluat seurata pitkin.

git checkout start

Ja suorita projekti.

npm start

Sovelluksen pitäisi olla käynnissä localhost:3000. Aloitetaan koodaus.

Tuodaan taulukon tyylit

Ensin haluat tuoda FDT2: n tyylitaulukon sisään index.js, jotta taulukko ei näytä hassulta.

Tuotetaan väärennettyjä tietoja

Taulukomme tarvitsee tietoja, eikö? Luo tiedosto srckansioon nimeltä getData.js.

Käytämme mahtavaa faker.js-kirjastoa tietojemme luomiseen. Se tuli jo sinun npm install.

Tässä on lähde, jos haluat kopioida / liittää.

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 palauttaa objektin, jolla on täydellinen nimi, sähköpostiosoite, kaupunki ja palkka Yhdysvaltain dollareina.

Viedetty toiminto palauttaa niistä 2000.

Vastaamaton taulukko

Meillä on tietomme, koodataan taulukko nyt.

index.jsTuo yläreunassa tiedot ja FDT2-komponentit.

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

Ja käytä niitä niin.

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]}; }} />
        
       
      
     
    
    
); }

Määritämme taulukon tietojemme avulla ja luomme Columnjokaiselle kentälle, jonka haluamme näyttää.

getData objektit sisältävät etu- / sukunimen, sähköpostiosoitteen, kaupungin ja palkan, joten tarvitsemme sarakkeen kullekin.

Käyttöliittymämme näyttää nyt tältä.

Try resizing your browser window, you’ll notice it isn’t responsive at all. It’s either too big or too small for your viewport and can leave excess space.

Escape to the impure

As we’ve learned, React’s declarative nature lets you write your UI using pure, deterministic, and easily testable functions.

The same input should always return the same output.

However, we sometimes need to visit the “impure” world, for DOM manipulation, adding events such as listeners, subscriptions, and timers.

HOCS and render props

Render props and higher-order components (HOCS) are the standard solution, but have some tradeoffs that Hooks are now trying to solve.

Using Hooks

Hooks are the new escape hatch to use imperative code. In our case, getting the window size is the effect we’re after.

Create a new file called useWindowSize.js.

We’ll need two things to achieve this:

  1. Listen to the window’s resize event, so we’re notified of when it changes
  2. Save the width/height to share with our table

Two hooks can help:

  1. useEffect
  2. useState

useEffect

This will likely replace your componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle hooks once it’s stabilized.

useEffect's perfect for most initialization logic and reading the DOM.

It’s where we’ll set up our window resize event listeners.

For more detail, see the official docs.

useState

Super simple, this Hook returns a stateful value and a function to update it. Once we capture the window’s width/height, we’ll have useState track it.

Writing our custom Hook

According to the official docs:

A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks.

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

Nyt kun vaikutuksemme on asetettu, palaa vain windowSize. Kun selaimen kokoa muutetaan, windowSizese päivitetään.

Käyttämällä mukautettua koukkua

Aika heittää koukku Fixed-Data-Table2: een!

Palaa sisään index.js, mene eteenpäin ja tuo useWindowSize.

Ja käytä sitä niin.

Hauskanpidon vuoksi voit console.log(windowSize)katsella päivitystä reaaliajassa.

Siistiä, saamme takaisin kohteen ikkunoista widthja height!

Sen sijaan, että koodaisimme pöydän leveyttä ja korkeutta kovalla koodilla, voimme käyttää Hookin altistettua tilaa.

Nyt pöydän pitäisi sopeutua ikkunan mittoihin.

Toivottavasti pidit tästä opetusohjelmasta!