7 tips en trucs in React

Gebruik TypeScript

Of we het nu alleen hebben over React of ook over andere bibliotheken, het gebruik van Typescript zal je enorm helpen bij de inspanningen om je code georganiseerd. laten we het volgende vergelijken Javascript vs Typescript omgaan met props types.

Importeer PropTypes van 'prop-types'.

functie UserCard({gebruiker }) {
teruggeven

{user.voornaam}, {user.achternaam}

}

UserCard.propTypes = {
user: PropTypes.shape({
voornaam: PropTypes.string.isRequired,
achternaam: PropTypes.string.isRequired
...
})
}

functie UserList({gebruikers }) {
return

{gebruikers.map((gebruiker) => )}

}

UserList.propTypes = {
gebruikers: PropTypes.arrayOf(PropTypes.shape({
voornaam: PropTypes.string.isRequired,
achternaam: PropTypes.string.isRequired
...
}))
}

interface Gebruiker {
voornaam: String!
achternaam: String!
...
}

functie UserCard({ user }: { user: User }) {
teruggeven

{user.voornaam}, {user.achternaam}

}

functie UserList({gebruikers }: {gebruikers: Gebruiker[] }) {
return

{gebruikers.map((gebruiker) => )}

Stel je voor dat je al je gegevensschema's als interfaces op één plaats hebt en ze in de rest van je code kunt hergebruiken. Dit zal u niet alleen helpen om typefouten te vermijden, maar ook in het geval dat u het schema wilt wijzigen, moet u het slechts op één plaats wijzigen.

Daarnaast migreren veel bekende javascriptbibliotheken naar Typescript, bijv: AdonisJS

Presentatie- en containeronderdelen scheiden

Het scheiden van presentatie- en containercomponenten maakt onze code gemakkelijker te testen en te begrijpen.

Presentatiecomponenten houden zich bezig met hoe de dingen eruit zien. Het ontvangt zijn gegevens en gedrag van bovenliggende componenten.

Containeronderdelen houden zich bezig met hoe dingen werken. Ze bieden de gegevens en gedrag naar presentatie- of andere containeronderdelen.

Door deze aanpak te gebruiken, kunnen we dezelfde presentatiecomponenten met verschillende gegevens en gedrag hergebruiken. Daarnaast maakt het onze code schoner en veel gemakkelijker te testen.

Bekijk het volgende voorbeeld met User Component dat wordt gebruikt met verschillende containers die verschillende gegevens en gedrag leveren.

functie BuyerContainer() {
return
}

functie VerkoperContainer() {
return
}

functie UserComponent({naam, onClick }) {
return

}

Gebruik React Hooks en Functionele Componenten Functionele Componenten die vroeger stateless Componenten werden genoemd, zijn niet meer stateless. Dankzij React Hooks kun je nu de hookState gebruiken om state op te slaan in een functioneel Component. of zelfs de levenscyclus van een component gebruiken met useEffect. Functionele componenten zijn gemakkelijk te lezen en te testen. React Core heeft een aantal andere nuttige haken die je kunt verkennen in Hooks Reference. Het verbazingwekkende is dat je ook kunt definiëren uw eigen haken. In het volgende voorbeeld hebben we een aangepaste react haak genaamd useDebounce gemaakt. Die wordt gebruikt om autocomplete API-aanroepen te beperken wanneer de invoertekst verandert.

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

retourneer (

{...}
)
}

Daarnaast zijn React hooks een geweldige vervanging voor Higher-Order Components (HoC's). Styled Component Styled Component is een bibliotheek die de introductie van Dynamic CSS op componentniveau mogelijk maakt, terwijl het voordeel van ES wordt benut. Het maakt je componenten voorspelbaarder en herbruikbaar. Vergeet het verspillen van tijd aan het zoeken naar de juiste classnaam voor een element, terwijl je probeert te voorkomen dat je een bestaande classnaam gebruikt. Met Styled Components zorg je ervoor dat je stijlen worden gescoped naar het component en automatisch gegenereerde class namen bij de build stap. Daarnaast is het nog nooit zo eenvoudig geweest om dynamische CSS te maken. Je stijlen worden gegenereerd volgens de rekwisieten die aan het component worden doorgegeven. In het volgende voorbeeld is de div stijl zowel afhankelijk van de geschetste prop als van het globale thema.

const wrapper = styled.div`

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

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

Het laatste punt over gestileerde componenten is dat het de prestaties verbetert door geen onnodige stijlen van ongebruikte componenten te laden. Laat ons zeggen dat je een lay-out hebt gedefinieerd voor je react app. Vervolgens wil je een widget toevoegen in de zijbalk, maar alleen voor een specifieke pagina. Als je dat geval niet vanaf het begin hebt overwogen, kan het een enorme wijziging van de lay-out vereisen. Maar met een bibliotheek als ‣ kun je gewoon een sleuf definiëren in de zijbalk. Op die manier hoef je niet overal in de componentenboom vlaggen door te geven om toegang te krijgen tot de Sidebar. Het heeft hetzelfde gedrag als React Portals, wat ook een geweldige oplossing is voor zaken als Modals, Tooltips...

importeer { Slot, Fill, Provider } van 'react-slot-fill';
const Sidebar = (props) =>
 
export standaard Werkbalk;
Sidebar.Item = (props) =>

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

];
const pagina = ({kinderen}) =>

{kinderen}

const HomePage = () =>

een pagina zonder Widjet
const DashboardPage = () =>

een pagina met Widjet

Hogere componenten Zelfs als React hooks in de meeste gevallen HOC's vervangen. HoC's zijn nog steeds een goede keuze als het gaat om het verbergen van complexiteit van componenten zoals het leveren van meerdere props aan pagina-onderdelen of voorwaardelijke rendering (privé-routes, laadstatus ...) Het volgende voorbeeld illustreert hoe we de complexiteit van zowel privé-routes als gemeenschappelijke props van pagina's kunnen inkapselen in herbruikbare HoC's die worden toegepast op alle pagina's van de applicatie. Houd in gedachten dat de meeste HoCs kunnen worden vervangen door React Hooks. en dat we per ongeluk props kunnen overschrijven door HoCs samen te stellen. Gebruik HoC's dus alleen als het nodig is om pagina-onderdelen schoner te houden. gebruik anders React Hooks.

functie withPrivateRoute(Component) {
...
return functie PrivateRoute(props) {
if (!userConnected) return ;
return ;
};
}
functie withPageProps(Component) {
...
return functie privateRoute(props) {
return ;
};
}
functie Profielpagina({navigatie, huidigpad, huidige gebruiker}) {
return
Profielpagina
}
export default withPrivateRoute(withPageProps(ProfilePage))

Foutgrenzen Foutgrenzen zijn klassecomponenten die alle fouten/uitzonderingen opvangen die op het niveau van de kinderen worden gegooid. Als ze op het hoogste niveau worden gedeclareerd, kunt u fouten op de juiste manier afhandelen door een foutmelding te tonen en de fout te loggen in een platformmonitoringprogramma zoals Sentry. Op deze manier bent u de eerste die fouten opmerkt en ze probeert te herstellen voordat het de gebruikerservaring beïnvloedt. Opmerking: ErrorBoundaries moeten worden gedeclareerd in de klasse ze ondersteunen geen functionele componenten.

klasse ErrorBoundary uitbreidt React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMySentry(error, errorInfo);
}
render() {
if (this.state.hasError) {
return
Er is iets fout gegaan ! Contact Admin
;
}
return this.props.children;

}
}