7 tips og tricks i React

Brug TypeScript

Uanset om vi kun taler om react eller andre biblioteker, vil brug af Typescript hjælpe så meget i bestræbelserne på at holde din Kode organiseret. Lad os sammenligne følgende Javascript vs Typescript, der håndterer props-typer.

import PropTypes fra 'prop-types'

function UserCard({ user }) {
return

{bruger.fornavn}, {bruger.efternavn}

}

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

function UserList({ users }) {
return

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

}

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

interface Bruger {
fornavn: String!
efternavn: String!
...
}

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

{bruger.fornavn}, {bruger.efternavn}

}

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

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

Forestil dig at have alle dine dataskemaer som interfaces et enkelt sted og genbruge dem i resten af din kode. Det vil ikke kun hjælpe dig med at undgå tastefejl, men også hvis du vil ændre skemaet, skal du kun ændre det et enkelt sted.

Desuden er mange kendte javascript-biblioteker ved at migrere til Typescript, f.eks: AdonisJS

Adskil præsentations- og containerkomponenter

At adskille præsentations- og containerkomponenter gør vores kode lettere at teste og ræsonnere over.

Præsentationskomponenter er optaget af hvordan tingene ser ud. Den modtager sin data og adfærd fra overordnede komponenter.

Beholderens komponenter er optaget af hvordan tingene fungerer. De sørger for data og adfærd til præsentations- eller andre containerkomponenter.

Ved at bruge denne tilgang kan vi genbruge de samme præsentationskomponenter med forskellige data og adfærd. Derudover gør det vores kode renere og meget nemmere at teste.

Se følgende eksempel med en brugerkomponent, som bruges med forskellige containere, der giver forskellige data og adfærd.

funktion BuyerContainer() {
return
}

function SellerContainer() {
return
}

function UserComponent({ name, onClick }) {
return

}

Brug React Hooks og funktionelle komponenter Funktionelle komponenter, som tidligere blev kaldt statsløse komponenter, er ikke længere statsløse. Takket være React Hooks kan du nu brugeState hook til at gemme tilstand i en funktionel komponent. eller endda bruge komponentens livscyklus ved hjælp af useEffect. Funktionelle komponenter er nemme at læse og teste. React Core har nogle andre nyttige hooks, som du kan udforske i Hooks Reference. Det fantastiske er, at du også kan definere dine egne hooks. I det følgende eksempel har vi oprettet en brugerdefineret react-hook, der hedder useDebounce. Den bruges til at begrænse API-kald til autofuldførelse, når inputteksten ændres.

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 (valgfrit)
}, 1000) // 1 sek.

return (

{...}
)
}

Desuden er React-hooks en god erstatning for Higher-Order Components (HoCs). Styled Component Styled Component er et bibliotek, der gør det muligt at indføre dynamisk CSS på komponentniveau, samtidig med at man udnytter fordelene ved ES. Det gør dine komponenter mere forudsigelige og genanvendelige. Glem alt om at spilde for meget tid på at lede efter det rigtige klassenavn til et element, mens du prøver at undgå at bruge et eksisterende. Med Styled Components sikrer du, at dine stilarter er bundet til komponenten og automatisk genererede klassenavne i build-trinnet. Derudover har det aldrig været nemmere at skabe dynamisk CSS. Dine stilarter genereres i henhold til de rekvisitter, der sendes til komponenten. I det følgende eksempel er div-stilen både afhængig af den skitserede prop og det globale tema.

const Wrapper = styled.div`.

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

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

Det sidste punkt om stylede komponenter er, at det forbedrer ydeevnen ved ikke at indlæse unødvendige stilarter for ubrugte komponenter. Slot Fill Library Lad os sige, at du har defineret et layout for din react-app, og så vil du tilføje en widget i sidebjælken kun for en bestemt side. Hvis du ikke har tænkt på det fra starten, kan det kræve en stor ændring af layoutet. Men ved at bruge et bibliotek som ‣ kan du bare definere en plads i sidebjælken. Fyld derefter det slot med widgets, der kun er til bestemte sider. På den måde undgår du at sende flag langs hele komponenttræet for at få adgang til sidebjælken. Det har samme adfærd som React Portals, som også er en god løsning i tilfælde som Modals, Tooltips ...

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

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

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

{børn}

const HomePage = () =>

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

en side med Widjet

Komponenter af højere orden Selv om React-hooks erstatter HOC'er i de fleste tilfælde. HoC'er er stadig et godt valg, når det drejer sig om at skjule kompleksitet fra komponenter som f.eks. at give flere rekvisitter til sidekomponenter eller betinget gengivelse (private ruter, indlæsningsstatus ...) Følgende eksempel illustrerer, hvordan vi kan indkapsle kompleksiteten af både private ruter og fælles siderekvisitter i genanvendelige HoC'er, der anvendes på alle applikationssider. Husk, at de fleste HoC'er kan erstattes af React Hooks, og at vi ved en fejl kan tilsidesætte props ved at sammensætte HoC'er. Så brug kun HoC'er, når det er nødvendigt for at holde sidekomponenterne renere. Ellers brug 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))

Fejlgrænser Fejlgrænser er klassekomponenter, som fanger alle fejl/undtagelser, der kastes på børnenes niveau. Når de er erklæret på øverste niveau, giver de dig mulighed for at udføre korrekt fejlhåndtering ved at vise en fejlmeddelelse og logge fejlen på et platformovervågningsværktøj som Sentry. På den måde vil du være den første til at opdage fejl og forsøge at rette dem, før de påvirker brugeroplevelsen. Bemærk: ErrorBoundaries skal erklæres i klassen, de understøtter ikke funktionelle komponenter.

class ErrorBoundary udvider 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
Noget gik galt! Kontakt administrator
;
}
return this.props.children;

}
}