Door de logica en gebruikersinterface te scheiden, wordt het eenvoudiger om componenten te schrijven en te testen.
Het belangrijkste doel van dit artikel is om ervoor te zorgen dat we onze nieuwe componenten schrijven op een manier waarbij elke component alleen geeft om zijn gegevens, foutafhandeling, laden en andere benodigde logica (we zullen het delen van gegevens tussen componenten in een ander artikel bespreken ).
Waarom is dit belangrijk?
- Schaalbaarheid: het is inderdaad zeer schaalbaar.
- Verwijderbaarheid: het verwijderen van een component zou na vandaag geen probleem meer moeten zijn, er vinden geen ingrijpende wijzigingen of regressies plaats.
- Verplaatsbaarheid: de mogelijkheid om de component overal te gebruiken, en misschien tussen projecten die dezelfde API gebruiken.
Hands-On
Laten we in de code duiken en 2 voorbeelden laten zien voor en na de refactoring.
Laten we het volgende voorbeeld nemen en proberen te begrijpen hoe we dit kunnen realiseren:
import React, { useMemo } from 'react';
import useAxios from 'axios-hooks'; const TodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;
Zoals je hierboven kunt zien, hebben we een eenvoudig voorbeeld van het implementeren van de takenlijst door de gegevens op te vragen via externe API-configuratie met behulp van axios.
Zie je de eenvoudige berekening om de items met status = TODO te extraheren? Als uw antwoord ja is, dan zijn we op dezelfde pagina.
Zoals we aan het begin van het artikel hebben uitgelegd, is het onze missie om de logica van de gebruikersinterface te isoleren, maar in het bovenstaande voorbeeld hebben we logica in hetzelfde JS-bestand, laten we eens kijken wat er moet gebeuren om onze missie te bereiken.
Dus allereerst moeten we de logica uit de component halen.
import { useMemo } from 'react';
import useAxios from 'axios-hooks'; const useTodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); return [{ data, loading, error, todoItems }];
}; export default useTodoList;
Zoals je kunt zien, noemden we het "useTodoList". Deze hook zou de logica van de TodoList component moeten bevatten.
Je kunt zien dat we geen UI in het bestand hebben, dit is een custom hook.
Maar hoe moet de hoofdcomponent "TodoList" eruit zien?
import React from 'react'; import useTodoList from './useTodoList'; const TodoList = () => { const [{ data, loading, error, todoItems }] = useTodoList(); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;
Simpel, hé? Dit is precies waarom het belangrijk is om componenten te bouwen waarbij de bedrijfslogica geen deel uitmaakt van de gebruikersinterface en om te gaan met de aangepaste hook als een API voor uw component.
Hoe zit het met de communicatie tussen componenten wanneer elk onderdeel in stand-alone modus werkt? Dit zal het interessante onderwerp zijn dat we in het volgende artikel zullen behandelen.
- Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
- PlatoAiStream. Web3 gegevensintelligentie. Kennis versterkt. Toegang hier.
- De toekomst slaan met Adryenn Ashley. Toegang hier.
- Koop en verkoop aandelen in PRE-IPO-bedrijven met PREIPO®. Toegang hier.
- Bron: https://www.codementor.io/esmatnawahda/how-to-separate-logic-from-ui-with-react-components-by-esmat-ibrahim-javascript-in-plain-english-25c8b0j0uf
