Att separera logiken och användargränssnittet gör det lättare att skriva och testa komponenter.
Huvudmålet med den här artikeln är att se till att vi skriver våra nya komponenter på ett sätt där varje komponent bara bryr sig om dess data, felhantering, laddning och all annan nödvändig logik (vi kommer att diskutera delning av data mellan komponenter i en annan artikel ).

Varför är detta viktigt?

• Skalbarhet: Det är verkligen högt skalbart.
• Borttagningsbarhet: Att ta bort en komponent bör inte vara ett problem efter idag, inga brytande ändringar eller regressioner inträffar.
• Flyttbarhet: Möjligheten att använda komponenten var som helst, och kanske över projekt som använder samma API.

Praktisk

Låt oss dyka ner i koden och visa 2 exempel före och efter omfaktoreringen.

Låt oss ta följande exempel och försöka förstå hur man får det att hända:

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;

Som du kan se ovan har vi ett enkelt exempel på att implementera Att-göra-listan genom att begära data via fjärr-API-konfiguration med axios.

Kan du lägga märke till den enkla beräkningen för att extrahera objekten med status = TODO? Om ditt svar är ja, då är vi på samma sida.

Som vi förklarade i början av artikeln är vårt uppdrag att isolera logiken från användargränssnittet, men i exemplet ovan har vi logik i samma JS-fil, låt oss se vad som bör göras för att uppnå vårt uppdrag.

Så först och främst måste vi ta bort logiken ur komponenten.

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;

Som du kan se kallade vi det "useTodoList". Denna krok bör innehålla logiken för TodoList-komponenten.

Du kan märka att vi inte har UI i filen, detta är en anpassad hook.

Men hur ska huvudkomponenten "TodoList" se ut?

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;

Enkelt, ha? Det är just därför det är viktigt att bygga komponenter där affärslogiken inte är en del av användargränssnittet och hantera den anpassade kroken som ett API för din komponent.

Hur är det med kommunikationen mellan komponenter när varje komponent arbetar i fristående läge? Detta kommer att vara det intressanta ämnet som vi kommer att ta upp i nästa artikel.

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• PlatoAiStream. Web3 Data Intelligence. Kunskap förstärkt. Tillgång här.
• Minting the Future med Adryenn Ashley. Tillgång här.
• Köp och sälj aktier i PRE-IPO-företag med PREIPO®. Tillgång här.
• Källa: https://www.codementor.io/esmatnawahda/how-to-separate-logic-from-ui-with-react-components-by-esmat-ibrahim-javascript-in-plain-english-25c8b0j0uf