Како створити одговарајућу табелу фиксних података са Реацт Хоокс-ом

Један од мојих пројеката користи библиотеку под називом Фикед-Дата-Табле-2 (ФДТ2) и сјајан је за ефикасно приказивање тона редова података.

Њихова документација приказује табелу која одговара, чија се величина мења на основу ширине и висине прегледача.

Мислио сам да би било кул поделити овај пример користећи Реацт Хоокс.

Шта су Реацт Хоокс?

То су функције које вам дају Реацт функције као што су куке стања и животног циклуса без класа ЕС6.

Неке су користи

  • изолујући логику стања, олакшавајући тестирање
  • дељење логике стања без приказивања реквизита или компоненти вишег реда
  • раздвајање забринутости ваше апликације на основу логике, а не кука животног циклуса
  • избегавајући часове ЕС6, јер су необични, а не заправо класе , и спотакну чак и искусне програмере ЈаваСцрипт-а

За више детаља погледајте Реацт-ов званични увод у Хоокс.

УПОЗОРЕЊЕ: Не користите у производњи!

У време писања овог текста, Куке су у алфа верзији. Њихов АПИ се може променити у било ком тренутку.

Препоручујем вам да експериментишете, забављате се и користите Хоокс у својим споредним пројектима, али не и у производном коду док не постану стабилни.

Циљ

Направићемо одговарајућу табелу фиксних података. Неће бити преуска или преширока за нашу страницу, баш ће се уклопити!

Подесити

Овде су везе ГитХуб и ЦодеСандбок.

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

masterГрана има готов пројекат, тако да преузмемо startграну ако желите да пратите.

git checkout start

И покрени пројекат.

npm start

Апликација би требало да ради localhost:3000. Почнимо са кодирањем.

Увоз стилова табеле

Прво ћете желети да увезете табелу стилова ФДТ2 index.js, тако да ваша табела не изгледа чудно.

Генерисање лажних података

Нашој табели су потребни подаци, зар не? Направите датотеку у srcфасцикли под називом getData.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 враћа предмет са пуним именом, е-поштом, градом и зарадом у америчким доларима.

Наша извезена функција враћа их 2000.

Табела која не реагује

Имамо своје податке, хајде да сада кодирамо табелу.

На врху index.jsувезите наше податке и компоненте ФДТ2.

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 објекти садрже име / презиме, е-пошту, град и плату, па нам је потребна колона за сваку.

Наш кориснички интерфејс сада изгледа овако.

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

Сад кад је наш ефекат постављен, само се вратите windowSize. Како се прегледачу буде мењала величина, windowSizeбиће ажуриран.

Користећи нашу прилагођену Куку

Време је да бацимо нашу удицу на Фикед-Дата-Табле2!

Вратите index.jsсе и увезите useWindowSize.

И искористите га тако.

Из забаве можете console.log(windowSize)гледати како се ажурира у реалном времену.

Супер, враћамо предмет прозора widthи height!

Уместо да тешко кодирамо ширину и висину наше табеле, можемо да користимо изложено стање нашег Хоок-а.

Сада би се табела требала прилагодити димензијама прозора.

Надам се да вам се свидео овај водич!