Sådan udvikler du dine React-superkræfter med Container Pattern

Hej allesammen! ?

Denne gang vil jeg fortælle dig om dette meget nyttige mønster i React kaldet container mønster eller container komponent mønster .

Dette er et af de første mønstre, jeg lærte. Det hjalp mig meget med at adskille problemer i mindre og løse dem ad gangen.

Det hjalp bestemt med at gøre min kode meget mere genanvendelig og selvstændig på én gang.

Det kan virke som et paradoks! Hvordan får du din kode til at være genanvendelig og selvstændig på samme tid?

Nå, genanvendelig, fordi du lærer at lave små dummy (præsentations) komponenter, som du kan genbruge meget.

Selvstændig, fordi containeren, udsigten eller hvad du bruger til at beholde al din logik let kan løsnes fra ét sted og fastgøres til ethvert andet uden store ændringer / refactoring i din hovedapp.

Så dette er en win-win og en hemmelig supermagt, du har brug for at erhverve, så snart du kan!

Sandheden er, at når du vil lave en funktion, starter du altid enkel og ren.

Dage går forbi, og du får tilføjet endnu en lille funktion her, en mere funktion der. Du laver en patch her, en patch der, og hele din kode bliver rodet og uhåndterbar.

Tro mig, jeg har været der. Og jeg er der stadig i dag! Vi er alle på et bestemt tidspunkt, fordi programmering er et håndværk. Men vi kan minimere det meget med øvelse og med dette fantastiske designmønster.

Men hvad er et designmønster?

01. Hvad er et softwaredesignmønster?

Et designmønster er intet andet end en generel, genanvendelig løsning på et almindeligt forekommende problem inden for en given kontekst i softwaredesign. Det er ikke et færdigt design, der kan omdannes direkte til kilde- eller maskinkode. Det er en beskrivelse eller skabelon til, hvordan man løser et problem, der kan bruges i mange forskellige situationer.

Designmønstre er formaliserede bedste praksis, som programmøren kan bruge til at løse almindelige problemer, når de designer et program eller et system.

Kender du MVC-softwaredesignmønsteret?

02. Hvad er MVC-designmønsteret?

Nå, MVC står for Model-View-Controller. Det er et arkitektonisk mønster, der bruges til at udvikle brugergrænseflader. Det opdeler applikationen i tre sammenkoblede dele.

Traditionelt blev det brugt til desktop GUI (grafiske brugergrænseflader). Denne arkitektur er blevet populær til design af webapplikationer og endda mobile.

Forestil dig, at du har en trekant med tre hjørner: View , Controller og Model .

Visningen er, hvad brugeren ser på skærmen (klientsiden).

Brugeren, der ser udsigten, kan producere ændringer, kan trykke på en knap, udfylde en formular, trykke på play for at se en video, udløse et panoply af ting sammen.

Controlleren håndterer de ændringer, som brugeren promoverede, og al logikken bagved. (Det fungerer som et relay, det beder om og håndterer alt mellem visningen og modellen.)

Modellen er manager. Den indeholder det, der kaldes forretningslogikken, dataene. Modellen modtager information fra controlleren og fortsætter med de nødvendige ændringer. Det giver opdateringerne tilbage til controlleren og visningen.

React er "et JavaScript-bibliotek til opbygning af brugergrænseflader" (pr. Definition?). Det meste af tiden blandes og håndteres V og en del af C.

Og det er denne V og denne C, som vi ønsker at adskille tydeligt fra containermønsteret.

03. Hvad er beholdermønsteret?

Containermønsteret er en løsning til at adskille V ganske godt fra C. I stedet for kun at gøre en /> med logikken og udsigten adskiller du den i to: taine r /> og & lt; komponent />. Førstnævnte vil udføre alle de nødvendige logiske operationer og fremme kommunikation med virksomheden, mens sidstnævnte vil være en dummy præsentationskomponent, der vil gengive det, som hans forælder Container kræver.

Præsentationskomponenter beskæftiger sig med, hvordan ting ser ud . Mens containerkomponenter er optaget af, hvordan ting fungerer .

04. Lad os få vores hænder beskidte

Forestil dig, at vi vil lave en Superhero List-komponent, der viser nogle data om dem. Vi henter dataene fra en API, og vi vil vise dem på skærmen.

Okay, for at simulere vores model (database) har jeg oprettet et falsk dataobjekt. Dette objekt indeholder info om superheltene. Det har også en fetchFarAwayAPI () -funktion, der returnerer objektet.

Så har jeg oprettet en stateful komponent til at hente API'en, gemme svaret i vores komponents tilstand og gengive dataene i en bootstrap-tabel på skærmen.

Okay, vi har helt adskilt controlleren fra udsigten. Dette er hovedideen, du skal huske på containermønsteret.

Hvis du tager et tankevækkende blik, har vi lavet en komponent, hvor vi henter data, gemmer dem i tilstand og gengiver dem på skærmen. Vi har blandet C og V. Er du enig?

Okay, hvordan løser vi dette? Jep! Containermønster!

Følg mig!

Det første trin er at oprette en præsentationskomponent, der gengiver visningen. Denne komponent modtager rekvisitter og gengiver den. Det er helt dummy. Se:

For at håndtere Controller (logiske) ting har jeg omformuleret vores gamle SuperHeroList, der omdøber den til SuperHeroListContainer.

Okay, vi har fuldstændigt adskilt controlleren fra udsigten, og det er den vigtigste idé, du skal huske på, hvad der er containermønsteret.

Men…

Vi kan gå længere og tage række kompleksiteten ud af den nye SuperHeroList komponent. Hvordan gør vi det? Lad os oprette en ny SuperHeroRow-komponent:

Hvad har vi gjort her? Vi har afkoblet rækken, der gengiver kompleksitet uden for SuperHeroList-komponenten. Vi lader førstnævnte kun gengive bordet og påberåbe sig SuperHeroRow for at gengive hver enkelt af rækkerne alene.

Vi har ekstraheret række kompleksitet til en anden komponent. Husk altid, at containermønsteret er der (inde i SuperHeroListContainer). Vi har netop spredt gengivelsen i to forældre / underordnede komponenter, der er helt dummy og præsentationsmæssige ved hjælp af React foretrukne måde at arbejde på: komposition!

Du har friheden til at udtrække ansvar / kompleksitet i mindre komponenter. Sådan skal du arbejde med React! Du skal justere det til det, der er bedst for appen, for teamet og for den kontekst, du er i.

Nogle gange kan vi abstrahere det lidt! Jeg tror nu, vi har det godt, men ... lad os gå lidt længere ...

Lad os oprette en anden SuperHeroList denne gang ved hjælp af en HOC (Higher Order Component).

En komponent af højere orden (HOC) er en avanceret teknik i React til genbrug af komponentlogik. HOC'er er ikke i sig selv en del af React API. De er et mønster, der fremgår af Reacts kompositionsnatur.

Konkret er en højere ordens komponent en funktion, der tager en komponent og returnerer en ny komponent.

Sagen her er at omlægge vores SuperHeroListContainer til en vanilje JavaScript-funktion. Denne funktion tager en komponent (kaldes ofte WrappedComponent) og returnerer en ny komponent.

Tjek bare hvordan jeg har gjort det nedenfor:

Vi har omformuleret den til denne funktion kaldet withContainer. Den modtager en hvilken som helst komponent, du vil passere igennem den, og returnerer en klassekomponent med al logik indeni!

I dette tilfælde giver abstraktionen os mulighed for at eksportere flere slags tabeller eller genbruge al den logik, vi havde i containeren, til at påkalde flere / forskellige præsentations- / dummy-komponenter.

Sådan får vi selvindeslutning og genanvendelighed sammen?

Sidst men ikke mindst

Bare rolig, hvis du i starten havde svært ved at bestemme, hvordan du anvender beholdermønsteret. Det er en iterativ proces. Med praksis kommer du derhen uden at tænke meget. Det vil være intuitivt, og det ser ved første øjekast ud til den bedste tilgang til næsten (90%) alt, hvad du laver i React.

React har en stærk kompositionsmodel. De anbefaler at bruge komposition i stedet for arv til at genbruge kode mellem komponenter.

BEMÆRK: I denne artikel har jeg brugt Create React App 2.0 med Bootstrap. Du kan altid trække min repo her og lave nogle eksperimenter senere. Du finder de to SuperHeroLists og de to eksempler, vi har lavet sammen med artiklen.

Fortsæt med at læse mine artikler og glem ikke: Vær altid stærk og kod på !

Bibliografi

  1. Reager dokumentation
  2. Containerkomponenter fra Learn Reager med chantastic ;
  3. Software design mønster, fra wikipedia, gratis encyklopædi;
  4. Model-view-controller, fra wikipedia, den gratis encyklopædi;
  5. Præsentations- og containermønstre af Dan Abramov;

Mange tak!

evedes, okt 2018