Πώς να δημιουργήσετε έναν αποκριτικό πίνακα σταθερών δεδομένων με React Hooks

Ένα από τα έργα μου χρησιμοποιεί μια βιβλιοθήκη που ονομάζεται Fixed-Data-Table-2 (FDT2) και είναι ιδανικό για αποτελεσματική απόδοση τόνων σειρών δεδομένων.

Η τεκμηρίωσή τους δείχνει έναν αποκριτικό πίνακα που αλλάζει το μέγεθος με βάση το πλάτος και το ύψος του προγράμματος περιήγησης.

Νόμιζα ότι θα ήταν ωραίο να μοιραστώ αυτό το παράδειγμα χρησιμοποιώντας το React Hooks.

Τι είναι τα React Hooks;

Είναι λειτουργίες που σας δίνουν χαρακτηριστικά React, όπως άγκιστρα κατάστασης και κύκλου ζωής χωρίς κλάσεις ES6.

Μερικά οφέλη είναι

  • απομόνωση της κρατικής λογικής, διευκολύνοντας τον έλεγχο
  • κοινή χρήση λογικής λογικής χωρίς στοιχεία απόδοσης ή στοιχεία υψηλότερης τάξης
  • διαχωρίζοντας τις ανησυχίες της εφαρμογής σας με βάση τη λογική και όχι τα άγκιστρα του κύκλου ζωής
  • αποφεύγοντας τις τάξεις ES6, επειδή είναι ιδιότροπες, όχι στην πραγματικότητα τάξεις και ανεβάζουν ακόμη και έμπειρους προγραμματιστές JavaScript

Για περισσότερες λεπτομέρειες, δείτε την επίσημη εισαγωγή της React Hooks.

ΠΡΟΕΙΔΟΠΟΙΗΣΗ: Μην το χρησιμοποιείτε στην παραγωγή!

Τη στιγμή αυτής της γραφής, οι γάντζοι είναι άλφα. Το API τους μπορεί να αλλάξει ανά πάσα στιγμή.

Σας προτείνω να πειραματιστείτε, να διασκεδάσετε και να χρησιμοποιήσετε Hooks στα πλάγια έργα σας, αλλά όχι στον κώδικα παραγωγής μέχρι να είναι σταθερά.

Ο στόχος

Θα φτιάξουμε έναν ανταποκρινόμενο πίνακα σταθερών δεδομένων. Δεν θα είναι πολύ στενό ή πολύ ευρύ για τη σελίδα μας, θα ταιριάζει ακριβώς!

Ρύθμιση

Ακολουθούν οι σύνδεσμοι GitHub και CodeSandbox.

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

Το masterυποκατάστημα έχει ολοκληρώσει το έργο, οπότε ελέγξτε το startυποκατάστημα εάν θέλετε να ακολουθήσετε.

git checkout start

Και εκτελέστε το έργο.

npm start

Η εφαρμογή θα πρέπει να λειτουργεί localhost:3000. Ας ξεκινήσουμε την κωδικοποίηση.

Εισαγωγή στυλ πίνακα

Πρώτα θα θελήσετε να εισαγάγετε το φύλλο στυλ του FDT2 index.js, έτσι ώστε ο πίνακας σας να μην φαίνεται τραχύς.

Δημιουργία πλαστών δεδομένων

Ο πίνακας μας χρειάζεται δεδομένα, σωστά; Δημιουργήστε ένα αρχείο στο srcφάκελο που ονομάζεται getData.js.

Θα χρησιμοποιήσουμε τη φοβερή βιβλιοθήκη faker.js για να δημιουργήσουμε τα δεδομένα μας. Ήρθε ήδη με το δικό σας npm install.

Εδώ είναι η πηγή εάν θέλετε να αντιγράψετε / επικολλήσετε.

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 επιστρέφει ένα αντικείμενο με πλήρες όνομα, email, πόλη και μισθό σε δολάρια ΗΠΑ.

Η εξαγόμενη συνάρτηση μας επιστρέφει 2000 από αυτά.

Ο πίνακας που δεν ανταποκρίνεται

Έχουμε τα δεδομένα μας, ας κωδικοποιήσουμε τον πίνακα τώρα.

Στην κορυφή index.js, εισαγάγετε τα στοιχεία μας και τα στοιχεία FDT2.

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

Και χρησιμοποιήστε τα έτσι.

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

Διαμορφώνουμε τον πίνακα με τα δεδομένα μας και δημιουργούμε ένα Columnγια κάθε πεδίο που θέλουμε να εμφανίζεται.

getData Τα αντικείμενα περιέχουν ένα όνομα / επώνυμο, email, πόλη και μισθό, οπότε χρειαζόμαστε μια στήλη για κάθε ένα.

Το περιβάλλον εργασίας μας μοιάζει τώρα με αυτό.

Δοκιμάστε να αλλάξετε το μέγεθος του παραθύρου του προγράμματος περιήγησής σας, θα παρατηρήσετε ότι δεν ανταποκρίνεται καθόλου. Είναι είτε πολύ μεγάλο είτε πολύ μικρό για τη θύρα προβολής σας και μπορεί να αφήσει υπερβολικό χώρο.

Αποδράστε στα ακάθαρτα

Όπως μάθαμε, η δηλωτική φύση του React σάς επιτρέπει να γράφετε το περιβάλλον εργασίας σας χρησιμοποιώντας καθαρές, ντετερμινιστικές και εύκολα ελεγχόμενες λειτουργίες.

Η ίδια είσοδος πρέπει πάντα να επιστρέφει την ίδια έξοδο.

Ωστόσο, μερικές φορές πρέπει να επισκεφτούμε τον «ακάθαρτο» κόσμο, για χειρισμό DOM, προσθέτοντας συμβάντα όπως ακροατές, συνδρομές και χρονόμετρα.

HOCS και απόδοση στηρίγματα

Τα στηρίγματα απόδοσης και τα συστατικά υψηλότερης τάξης (HOCS) είναι η τυπική λύση, αλλά έχουν κάποιες ανταλλαγές που προσπαθούν τώρα να λύσουν οι Hooks.

Χρησιμοποιώντας γάντζους

Οι γάντζοι είναι η νέα καταπακτή διαφυγής για χρήση υποχρεωτικού κώδικα. Στην περίπτωσή μας, η λήψη του μεγέθους παραθύρου είναι το αποτέλεσμα που επιδιώκουμε.

Δημιουργήστε ένα νέο αρχείο που ονομάζεται useWindowSize.js.

Θα χρειαστούμε δύο πράγματα για να το επιτύχουμε:

  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

Τώρα που έχει ρυθμιστεί το εφέ μας, απλώς επιστρέψτε windowSize. Καθώς το μέγεθος του προγράμματος περιήγησης αλλάζει, windowSizeθα ενημερωθεί.

Χρησιμοποιώντας το προσαρμοσμένο γάντζο μας

Ώρα να ρίξουμε το γάντζο μας στο Fixed-Data-Table2!

Πίσω index.js, προχωρήστε και εισαγάγετε useWindowSize.

Και χρησιμοποιήστε το έτσι.

Για διασκέδαση μπορείτε console.log(windowSize)και παρακολουθήστε το να ενημερώνεται σε πραγματικό χρόνο.

Ωραία, παίρνουμε πίσω ένα αντικείμενο του παραθύρου widthκαι height!

Αντί να κωδικοποιήσουμε το πλάτος και το ύψος του τραπεζιού μας, μπορούμε να χρησιμοποιήσουμε την εκτεθειμένη κατάσταση του Hook.

Τώρα ο πίνακας σας πρέπει να προσαρμοστεί στις διαστάσεις του παραθύρου.

Ελπίζω να απολαύσατε αυτό το σεμινάριο!