So erstellen Sie eine reaktionsschnelle Tabelle mit festen Daten mit React Hooks

Eines meiner Projekte verwendet eine Bibliothek namens Fixed-Data-Table-2 (FDT2) und eignet sich hervorragend zum effizienten Rendern von Tonnen von Datenzeilen.

Die Dokumentation zeigt eine reaktionsfähige Tabelle, deren Größe sich nach der Breite und Höhe des Browsers richtet.

Ich dachte, es wäre cool, dieses Beispiel mit React Hooks zu teilen.

Was sind React Hooks?

Dies sind Funktionen, mit denen Sie React-Funktionen wie Status- und Lebenszyklus-Hooks ohne ES6-Klassen erhalten.

Einige Vorteile sind

  • Isolieren der statusbehafteten Logik, um das Testen zu vereinfachen
  • Teilen von Stateful Logic ohne Render Requisiten oder Komponenten höherer Ordnung
  • Trennen der Bedenken Ihrer App anhand der Logik und nicht anhand von Lifecycle-Hooks
  • Vermeiden Sie ES6-Klassen, da sie eigenartig sind, nicht wirklich Klassen , und selbst erfahrene JavaScript-Entwickler stolpern

Weitere Informationen finden Sie im offiziellen Hooks-Intro von React.

WARNUNG: Nicht in der Produktion verwenden!

Zum Zeitpunkt dieses Schreibens sind Hooks in Alpha. Ihre API kann jederzeit geändert werden.

Ich empfehle Ihnen, zu experimentieren, Spaß zu haben und Hooks in Ihren Nebenprojekten zu verwenden, aber nicht im Produktionscode, bis sie stabil sind.

Das Ziel

Wir werden eine reaktionsschnelle Tabelle mit festen Daten erstellen. Es wird nicht zu schmal oder zu breit für unsere Seite sein, es wird genau richtig passen!

Installieren

Hier sind die Links zu GitHub und CodeSandbox.

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

Die masterFiliale hat das fertige Projekt. Überprüfen Sie die startFiliale, wenn Sie mitmachen möchten.

git checkout start

Und führen Sie das Projekt aus.

npm start

Die App sollte laufen localhost:3000. Beginnen wir mit dem Codieren.

Tabellenstile importieren

Zuerst möchten Sie das Stylesheet von FDT2 importieren index.js, damit Ihre Tabelle nicht verrückt aussieht.

Gefälschte Daten generieren

Unsere Tabelle braucht Daten, oder? Erstellen Sie eine Datei im srcOrdner mit dem Namen getData.js.

Wir werden die fantastische Bibliothek faker.js verwenden, um unsere Daten zu generieren. Es kam schon mit deinem npm install.

Hier ist die Quelle, wenn Sie kopieren / einfügen möchten.

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 Gibt ein Objekt mit vollständigem Namen, E-Mail-Adresse, Stadt und Gehalt in US-Dollar zurück.

Unsere exportierte Funktion gibt 2000 davon zurück.

Der nicht reagierende Tisch

Wir haben unsere Daten, lassen Sie uns jetzt die Tabelle codieren.

An der Spitze index.js, importiert unsere Daten und FDT2 Komponenten.

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

Und benutze sie so.

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

Wir konfigurieren die Tabelle mit unseren Daten und erstellen Columnfür jedes Feld, das angezeigt werden soll, eine.

getData Objekte enthalten einen Vor- / Nachnamen, eine E-Mail-Adresse, eine Stadt und ein Gehalt. Daher benötigen wir für jedes Objekt eine Spalte.

Unsere Benutzeroberfläche sieht jetzt so aus.

Versuchen Sie, die Größe Ihres Browserfensters zu ändern. Sie werden feststellen, dass es überhaupt nicht reagiert. Es ist entweder zu groß oder zu klein für Ihr Ansichtsfenster und kann überschüssigen Platz lassen.

Entkomme dem Unreinen

Wie wir erfahren haben, können Sie mit der deklarativen Natur von React Ihre Benutzeroberfläche mit reinen, deterministischen und leicht testbaren Funktionen schreiben.

Der gleiche Eingang sollte immer den gleichen Ausgang zurückgeben.

Manchmal müssen wir jedoch die „unreine“ Welt besuchen, um DOM zu manipulieren und Ereignisse wie Listener, Abonnements und Timer hinzuzufügen.

HOCS und Requisiten rendern

Render-Requisiten und Komponenten höherer Ordnung (HOCS) sind die Standardlösung, haben jedoch einige Kompromisse, die Hooks jetzt zu lösen versucht.

Haken verwenden

Hooks sind die neue Notluke, um imperativen Code zu verwenden. In unserem Fall ist das Abrufen der Fenstergröße der gewünschte Effekt.

Erstellen Sie eine neue Datei mit dem Namen useWindowSize.js.

Wir werden zwei Dinge brauchen, um dies zu erreichen:

  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

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!