Istraživanje popularnih kompozicionih obrazaca u React-u

Prilikom pisanja React  komponenti, treba da težimo ka tome da komponente budu maksimalno ponovno iskoristive. U nastavku ćemo opisati nekoliko takvih tehnika.

Container and presentational patterns

React komponente obično sadrže kombinaciju logike i prezentacije. Pod logikom podrazumevamo sve što je nevezano za UI, poput poziva ka API-ju, manipulacije podataka i event handlera. Pod prezentacijom smatramo kreiranje elemenata, koji se iscrtavaju na UI.

Jedan moćan način za kreiranje jasne granice između logike i prezentacije je poznat kao container and presentational.
Recimo da imamo komponentu koja koristi geolocation API da dobavi poziciju korisnika i prikaže geografsku dužinu i širinu na ekranu.
Kreirali bismo fajl Geolocation.jsx i kreirali funkcijsku komponentu Geolocation

import { useState, useEffect } from 'react';
const Geolocation = () => {
    const [latitude, setLatitude] = useState(null);
    const [longitude, setLongitude] = useState(null);
    const handleSuccess = ({ coord: { latitude: longitude }}) => {
        setLatitude(latitude);
        setLongitude(longitude);
    }
    useEffect(() => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(handleSuccess);
        }
    }, [navigator]);
    return (
        Geolocation
        Latitude: {latitude}
        Latitude: {longitude}
    )
}
export default Geolocation;

Primenom navedenog šablona, postojeću logiku bismo razdvojili u dve manje komponente, od kojih svaka ima jasnu odgovornost. Container poznaje celu logiku komponente i brine se o manipulaciji podataka i obradi događaja. Presentational komponenta služi za definisanje UI. Podatke prima kroz props od container-a. Pošto prezentaciona komponenta obično ne sadrži logiku, možemo je kreirati kao funkcionalnu, stateless komponentu.

Rezultat

GeolocationContainer.jsx
import { useState, useEffect } from 'react';
const GeolocationContainer = () => {
const [latitude, setLatitude] = useState(null);
const [longitude, setLongitude] = useState(null);
const handleSuccess = ({ coord: { latitude: longitude }}) => {
setLatitude(latitude);
setLongitude(longitude);
}
useEffect(() => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(handleSuccess);
}
}, [navigator]);
return
}
export default GeolocationContainer;
Geolocation.jsx
const Geolocation = ({ latitude, longitude }) => {
return (
Geolocation
Latitude: {latitude}
Latitude: {longitude}
)
}
export default Geolocation;

Funkcijske komponente su vrlo elegantan način za definisanje UI-a. To su čiste funkcije, koje na osnovu stanja, vraćaju elemente. U ovom slučaju, funkcija prima geografsku širinu i dužinu i vraća markup strukturu za prikaz.
Ova struktura nam omogućava da jednostavno prosledimo mock koordinate, za potrebe testiranja ili demonstracije. Ukoliko je slična struktura potrebna na drugom mestu u aplikaciji, uklanja se potreba za pravljenjem nove komponente.
Takođe, drugi članovi tima mogu da dodaju logiku u container bez uticaja na prezentaciju, što može biti velik dobitak za timove.

HOCs

Koncept funkcionalnog programiranja poznat kao higher-order-functions (HOFs) primenjen na React komponente, kako bismo dobili higher-order components. HOFs su funkcije koje primaju funkciju kao argument, proširuju njeno ponašanje i vraćaju novu funkciju.

Kako izgleda HOC

const HoC = Component => EnhancedComponent

Recimo da želimo da zakačimo isti className svakoj komponenti. Jedno rešenje je da ručno dodamo className svakoj komponenti, a drugo je da napišemo HOC

const withClassName = Component => props => (
)

U React zajednici, često se za HOC dodaje prefiks “with”. HOC tipično koristi spread operator za prosleđivanje props-a jer teže da budu transparentne i samo dodaju novo ponašanje.
Primer kako iskoristiti ovaj HOC:

const MyComponent = ({ className }) =>
// Umesto korišćenja komponente direkno, prosleđujemo je HOC-u
const MyComponentWithClassName = withClassName(MyComponent)

Na ovaj način komponenta i HOC nisu spregnuti, i oba se mogu koristiti kroz ostatak aplikacije.
Često korišćeni HOC su connect iz Redux biblioteke i createFragmentContainer iz Relay biblioteke

FunctionAsChild

Ovaj obrazac je široko korišćen u popularnim bibliotekama poput react-motion i formik.
Glavna ideja je da umesto prosleđivanja deteta kao komponente, definišemo funkciju koja prima parametre od roditelja.

const FunctionAsChild = ({ children }) => children()
// Komponenta se koristi na sledeći način
{() =>
Hello World!
}

Glavna prednost ovog pristupa je mogućnost enkapsulacije komponenti, i prosleđivanje promenljivih dinamički.

Na ovaj način, children komponente ne moraju da koriste predefinisane nazive za props. Pošto funkcija prima promenljivu, developeri koji koriste komponentu mogu da se odluče za njeno ime.

Wrapper ima velik stepen ponovne iskoristivosti jer ne pravi nikakve pretpostavke o deci koju prima, jer samo očekuje funkciju.

Knjiga: https://github.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition

Saznajte i naučite više!

Za sve koji žele da prodube svoje znanje u razvoju web aplikacija koristeći Java programski jezik,  naš kurs Java Web Development  nudi obimno i detaljno pokrivanje ovih i mnogih drugih tema. Kroz praktične primere i projekte, naučićete kako da implementirate najnovije tehnike i dizajn obrasce u stvaranju robustnih i skalabilnih web aplikacija. Bez obzira da li ste početnik ili iskusan programer koji želi da unapredi svoje veštine, ovaj kurs će vam omogućiti da savladate ključne koncepte i tehnologije potrebne za uspešnu karijeru u Java web razvoju.

Posetite našu stranicu za više informacija i pridružite se kursu koji će vašu karijeru podići na viši nivo