7 tips och tricks i React

Använd TypeScript

Oavsett om vi bara pratar om react eller andra bibliotek, kommer användning av Typescript att hjälpa så mycket i ansträngningarna att hålla din kod organiserad. låt oss jämföra följande Javascript vs Typescript som hanterar props-typer.

import PropTypes från 'prop-types'

funktion UserCard({ användare }) {
returnerar

{användare.förnamn}, {användare.efternamn}

}

UserCard.propTypes = {
user: PropTypes.shape({
förnamn: PropTypes.string.isRequired,
efternamn: PropTypes.string.isRequired
...
})
}

function UserList({ användare }) {
returnera

{users.map((användare) => )}

}

UserList.propTypes = {
användare: PropTypes.arrayOf(PropTypes.shape({
förnamn: PropTypes.string.isRequired,
efternamn: PropTypes.string.isRequired
...
}))
}

interface Användare {
förnamn: String!
efternamn: String!
...
}

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

{användare.förnamn}, {användare.efternamn}

}

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

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

Tänk dig att ha alla dina datascheman som gränssnitt på ett enda ställe och återanvända dem i resten av din kod. Detta kommer inte bara att hjälpa dig att undvika skrivfel utan också om du vill ändra schemat, bör du bara ändra det på ett enda ställe.

Dessutom migrerar många välkända javascript-bibliotek till Typescript. t.ex: AdonisJS

Separata presentations- och behållarkomponenter

Genom att separera presentations- och containerkomponenter blir vår kod enklare att testa och resonera kring.

Komponenter för presentation handlar om hur saker och ting ser ut. Det får sina data och beteende från överordnade komponenter.

Behållarens komponenter handlar om hur saker och ting fungerar. De tillhandahåller data och beteende till presentations- eller andra containerkomponenter.

Genom att använda detta tillvägagångssätt kan vi återanvända samma presentationskomponenter med olika data och beteende. Dessutom blir vår kod renare och mycket enklare att testa.

Se följande exempel med User Component som används med olika containrar som ger olika data och beteende.

funktion KöpareContainer() {
return
}

funktion SellerContainer() {
return
}

funktion UserComponent({ namn, onClick }) {
return

}

Använd React Hooks och funktionella komponenter Funktionella komponenter "som tidigare kallades statslösa komponenter" är inte längre statslösa. tack vare React Hooks kan du nu använda krokenState för att lagra tillstånd i en funktionell komponent. eller till och med använda komponentens livscykel med useEffect. Funktionella komponenter är lätta att läsa och testa. React Core har några andra användbara krokar som du kan utforska i Hooks Reference. Det fantastiska är att du också kan definiera dina egna krokar. I följande exempel skapade vi en anpassad react-krok som heter useDebounce. Som används för att begränsa API-anrop för autokomplettering när inmatningstexten ändras.

import { useEffect } från 'react';
importera { debounce } från 'lodash';
export default function useDebounce( fn, delay = 500 ) {
const debounced = useMemoOne( () => debounce( fn, delay ), [
fn,
fördröjning,
] );
useEffect( () => () => debounced.cancel(), [ debounced ] );
returnerar debounced;
}
export default funktion SearchComponent()
const fetchAutoComplete = useDebounce((e) => {
      // Hämta API (valfritt)
}, 1000) // 1 sekund

returnera (

{...}
)
}

Dessutom är React-krokar en utmärkt ersättning för Higher-Order Components (HoCs). Styled Component Styled Component är ett bibliotek som gör det möjligt att införa dynamisk CSS på komponentnivå. samtidigt som man drar nytta av ES. Det gör dina komponenter mer förutsägbara och återanvändbara. Glöm bort att slösa bort för mycket tid på att leta efter rätt klassnamn för ett element samtidigt som du försöker undvika att använda ett befintligt. Med Styled Components säkerställer du att dina stilar är kopplade till komponenten och automatiskt genererade klassnamn i byggsteget. Dessutom har det aldrig varit enklare att skapa dynamisk CSS. dina stilar kommer att genereras enligt rekvisita som skickas till komponenten. I följande exempel är div-stilen både beroende av den outlined prop och det globala temat.

const Wrapper = styled.div`

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

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

Den sista punkten om stylade komponenter är att den förbättrar prestandan genom att inte ladda onödiga stilar för oanvända komponenter. Slot Fill Library Låt oss säga att du har definierat en layout för din react-app. sedan vill du lägga till en widget i sidofältet endast för en specifik sida. Om du inte tänkte på det fallet från början kan det kräva en enorm förändring av layouten. Men med ett bibliotek som ‣ kan du bara definiera en slot i sidofältet. Fyll sedan den platsen med widgetar endast för vissa sidor. på så sätt undviker du att skicka flaggor längs hela komponentträdet för att komma åt sidofältet. Det har liknande beteende som React Portals vilket också är en bra lösning för fall som Modals, Tooltips ...

import { Slot, Fill, Provider } från 'react-slot-fill';
const Sidebar = (rekvisita) =>
 
export default Verktygsfält;
Sidebar.Item = (rekvisita) =>

{ rekvisita.etikett }
const Widget = () => [
[

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

{barn}

const HomePage = () =>

en sida utan Widjet
const DashboardPage = () => en sida utan Widjet

en sida med Widjet

Komponenter av högre ordning Även om React-krokar ersätter HOC i de flesta fall. HoCs är fortfarande ett bra val när det gäller att dölja komplexitet från komponenter som att tillhandahålla flera rekvisita till sidkomponenter eller villkorlig rendering (privata rutter, laddningsstatus ...) Följande exempel illustrerar hur vi kan kapsla in komplexiteten hos både privata rutter och sidgemensamma rekvisita i återanvändbara HoCs som tillämpas på alla applikationssidor. Tänk på att de flesta HoCs-fall kan ersättas av React Hooks. och att vi av misstag kan åsidosätta props genom att komponera HoCs. Så använd HoCs endast när det är nödvändigt för att hålla sidkomponenterna renare. annars använd React Hooks.

function withPrivateRoute(Komponent) {
...
return function PrivateRoute(props) {
if (!userConnected) return ;
return ;
};
}
funktion medPageProps(Komponent) {
...
return function privateRoute(props) {
return ;
};
}
function ProfilePage({ navigation, currentPath, currentUser}) {
return
Profilsida
}
export default withPrivateRoute(withPageProps(ProfilePage))

Error Boundaries Error Boundaries är klasskomponenter som fångar upp alla fel/undantag som kastas på barnnivå. När de deklareras på högsta nivå gör det att du kan göra korrekt felhantering genom att visa ett felmeddelande och logga felet i ett plattformsövervakningsverktyg som Sentry. På så sätt blir du den första som upptäcker fel och kan försöka åtgärda dem innan de påverkar användarupplevelsen. Notera: ErrorBoundaries bör deklareras i klasser som inte stöder funktionella komponenter.

class ErrorBoundary utökar React.Component {
konstruktör(rekvisita) {
super(rekvisita);
this.state = { hasError: false };
}
statisk getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMySentry(error, errorInfo);
}
render() {
if (this.state.hasError) {
return
Något gick fel! Kontakta administratören
;
}
return this.props.children;

}
}