7 tips og triks i React

Bruk TypeScript

Enten vi snakker om react eller andre biblioteker, vil bruk av Typescript være til stor hjelp i arbeidet med å holde kode organisert. la oss sammenligne følgende Javascript vs Typescript som håndterer props-typer.

import PropTypes fra 'prop-types'

function UserCard({ user }) {
return

{user.firstname}, {user.lastname}

}

UserCard.propTypes = {
user: PropTypes.shape({
fornavn: PropTypes.string.isRequired,
etternavn: PropTypes.string.isRequired
...
})
}

function UserList({ users }) {
return

{users.map((bruker) => )} }

}

UserList.propTypes = {
users: PropTypes.arrayOf(PropTypes.shape({
fornavn: PropTypes.string.isRequired,
etternavn: PropTypes.string.isRequired
...
}))
}

interface Bruker {
firstname: String!
etternavn: String!
...
}

function UserCard({ user }: { user: User }) {
return

{user.firstname}, {user.lastname}

}

function UserList({ users }: { users: User[] }) {
return

{users.map((bruker) => )} }

Tenk deg at du har alle dataskjemaene dine som grensesnitt på ett sted, og at du kan gjenbruke dem i resten av koden. På den måten unngår du ikke bare skrivefeil, men hvis du vil endre skjemaet, trenger du bare å gjøre det på ett sted.

I tillegg er mange kjente javascript-biblioteker i ferd med å migrere til Typescript, f.eks: AdonisJS

Separate presentasjons- og beholderkomponenter

Ved å skille mellom presentasjons- og containerkomponenter blir koden enklere å teste og resonnere rundt.

Presentasjonskomponenter er opptatt av hvordan ting ser ut. Den mottar sin data og atferd fra overordnede komponenter.

Beholderens komponenter er opptatt av hvordan ting fungerer. De sørger for data og atferd til presentasjons- eller andre beholderkomponenter.

Ved å bruke denne tilnærmingen kan vi gjenbruke de samme presentasjonskomponentene med ulike data og oppførsel. I tillegg gjør det koden vår renere og mye enklere å teste.

Se følgende eksempel med User Component, som brukes sammen med ulike containere som gir forskjellige data og oppførsel.

funksjon BuyerContainer() {
return
}

function SellerContainer() {
return
}

function UserComponent({ name, onClick }) {
return

}

Bruk React Hooks og funksjonelle komponenter Funksjonelle komponenter, som tidligere ble omtalt som tilstandsløse komponenter, er ikke lenger tilstandsløse. Takket være React Hooks kan du nå brukeState -kroken til å lagre tilstand i en funksjonell komponent. eller til og med bruke komponentens livssyklus ved hjelp av useEffect. Funksjonelle komponenter er enkle å lese og teste. React Core har noen andre nyttige hooks som du kan utforske i Hooks Reference. Det fantastiske er at du også kan definere dine egne kroker. I det følgende eksemplet har vi opprettet en egendefinert react-krok kalt useDebounce. Den brukes til å begrense API-anrop for autofullføring når inndatateksten endres.

import { useEffect } fra 'react';
import { debounce } fra 'lodash';
export default function useDebounce( fn, delay = 500 ) {
const debounced = useMemoOne( () => debounce( fn, delay ), [
fn,
delay,
] );
useEffect( () => () => debounced.cancel(), [ debounced ] );
return debounced;
}
export default function SearchComponent()
const fetchAutoComplete = useDebounce((e) => {
      // Hent API (valgfritt)
}, 1000) // 1 sec

return (

{...}
)
}

I tillegg er React-hooks en flott erstatning for Higher-Order Components (HoCs). Styled Component Styled Component er et bibliotek som gjør det mulig å innføre dynamisk CSS på komponentnivå, samtidig som man drar nytte av ES. Det gjør komponentene dine mer forutsigbare og gjenbrukbare. Du slipper å kaste bort tid på å lete etter det rette klassenavnet for et element samtidig som du prøver å unngå å bruke et eksisterende navn. Med Styled Components sørger du for at stilene dine er knyttet til komponenten og automatisk genererte klassenavn i byggetrinnet. I tillegg har det aldri vært enklere å lage dynamisk CSS. Stilene dine genereres i henhold til rekvisitter som sendes til komponenten. I eksempelet nedenfor er div-stilen både avhengig av den skisserte rekvisitten og det globale temaet.

const Wrapper = styled.div`

  border: ${props => props.outlined ? '1px solid' : 'none'};

    background: ${props => props.theme.light ? 'black' : 'white'}

Det siste poenget med stylede komponenter er at det forbedrer ytelsen ved å ikke laste inn unødvendige stiler for ubrukte komponenter. Slot Fill Library La oss si at du har definert en layout for react-appen din, og så vil du legge til en widget i sidefeltet bare for en bestemt side. Hvis du ikke har tenkt på dette fra begynnelsen av, kan det kreve en stor endring av oppsettet. Men ved å bruke et bibliotek som ‣ kan du bare definere et spor i sidefeltet. På den måten unngår du å sende flagg langs hele komponenttreet for å få tilgang til sidefeltet. Det har lignende oppførsel som React Portals, som også er en flott løsning for tilfeller som Modals, Tooltips ...

import { Slot, Fill, Provider } fra 'react-slot-fill';
const Sidebar = (rekvisitter) =>
 
export default Toolbar;
Sidebar.Item = (rekvisitter) => (props)

{ props.label }
const Widget = () => [
[

];
const Page = ({barn}) => [ ]; const Page = ({barn}) => [ ]

{barn}

const HomePage = () => {hjemmeside

en side uten Widjet
const DashboardPage = () => en side uten Widjet

en side med Widjet

Higher-Order Components Selv om React hooks erstatter HOCs i de fleste tilfeller. HoCs er fortsatt et godt valg når det gjelder å skjule kompleksitet fra komponenter som å gi flere rekvisitter til sidekomponenter eller betinget gjengivelse (private ruter, lastestatus ...) Følgende eksempel illustrerer hvordan vi kan innkapsle kompleksiteten til både private ruter og felles siderekvisitter i gjenbrukbare HoCs som brukes på alle applikasjonssider. Husk at de fleste HoCs kan erstattes av React Hooks, og at vi ved en feiltakelse kan overstyre rekvisitter ved å komponere HoCs. Så bruk HoCs bare når det er nødvendig for å holde sidekomponentene renere, ellers bruker du React Hooks.

function withPrivateRoute(Component) {
...
return function PrivateRoute(props) {
if (!userConnected) return ;
return ;
};
}
function withPageProps(Component) {
...
return function privateRoute(props) {
return ;
};
}
function ProfilePage({ navigation, currentPath, currentUser}) {
return
Profilside
}
export default withPrivateRoute(withPageProps(ProfilePage))

Feilgrenser Feilgrenser er klassekomponenter som fanger opp alle feil/unntak som oppstår på barnivå. Når de er deklarert på toppnivå, kan du utføre riktig feilhåndtering ved å vise en feilmelding og logge feilen i et plattformovervåkingsverktøy som Sentry. På denne måten vil du være den første som oppdager feil og prøver å fikse dem før de påvirker brukeropplevelsen. Merk: ErrorBoundaries bør deklareres i klassen de ikke støtter funksjonelle komponenter.

class ErrorBoundary utvides React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
statisk getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMySentry(error, errorInfo);
}
render() {
if (this.state.hasError) {
return
Noe gikk galt! Kontakt administrator
;
}
return this.props.children;

}
}