Ha már egy ideje dolgozik a Reacttel, valószínűleg találkozott vele konténer és a prezentációs komponensek , vagy okos és buta alkatrészek. Ezek a kifejezések leírják a minta amely elválasztja a React összetevők UI rétegét a logikától.
A felhasználói felület elválasztása az üzleti logikától nem egyedülálló a React számára: az aggodalmak elkülönítése olyan tervezési elv, amely már a 70-es években volt. Bevett gyakorlat például, hogy az adatbázishoz hozzáférő kódot elválasztják a háttérben található üzleti logikától.
Tehát a Reactban úgy oldottuk meg ezt a problémát, hogy olyan konténer-összetevőket hoztunk létre, amelyek tartalmazzák az összes logikát, amelyek aztán az adatokat kellékeken keresztül továbbítják a prezentációs komponensnek.
A React hook bevezetésével egy új megközelítés jelent meg ebben: a használat egyedi horgok.
Miért kell elválasztani a logikát a komponenstől?
Mielőtt elkezdenénk leválasztani a logikát a React összetevőkről, tudnunk kell, miért.
A kódunk oly módon történő rendszerezése, hogy minden funkció vagy komponens csak egy dologért felelős, azzal az előnnyel jár, hogy az sok könnyebb megváltoztatni és karbantartani (Dave és Andrew ezt hívjákortogonalitás” könyvükben A pragmatikus programozó).
Ha ezt alkalmazza a React-ra, az azt jelenti, hogy a komponensünk tisztább és rendezettebb lesz. Például a felhasználói felület szerkesztése előtt nem kell átgörgetnünk a logika falát.
A kód ilyen rendszerezése nemcsak jobb megjelenést és könnyebb navigálást tesz lehetővé, hanem a módosítást is megkönnyíti, mivel a hook megváltoztatása nincs hatással a felhasználói felületre, és fordítva.
A tesztelés is könnyebben elérhető: a logikát a felhasználói felülettől külön is tesztelhetjük, ha akarjuk. A legjelentősebb előny számomra azonban az, hogy ez a megközelítés hogyan szervezi meg a kódomat.
A logika szétválasztása a React horgokkal
A logikának az összetevőnktől való leválasztásához először létrehozunk egy egyéni horgot.
Vegyük ezt az összetevőt példaként. Kiszámítja az alapszám és a kitevő exponenciális értékét:
Megtalálható a teljes forráskód itt.
A kód így néz ki:
export const ExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return (
<div className="blue-wrapper">
<input
type="number"
className="base"
onChange={handleBaseChange}
placeholder="Base"
value={base}
/>
<input
type="number"
className="exponent"
onChange={handleExponentChange}
placeholder="Exp."
value={exponent}
/>
<h1 className="result">{result}</h1>
</div>
);
};
Ez már jól nézhet ki, de az oktatóanyag kedvéért csak kép hogy több logika van itt.
Első lépésként megtesszük mozgassa a logikát egy egyéni horogra és nevezzük a komponensünkön belül.
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return {
base,
exponent,
result,
handleBaseChange,
handleExponentChange,
};
};
export const ExponentCalculator = () => {
const {
base,
exponent,
result,
handleExponentChange,
handleBaseChange,
} = useExponentCalculator();
// ...
};
Ezt a horgot áthelyezhetnénk a külön fájl az aggodalmak markánsabb elkülönítése érdekében.
Ezen túlmenően a horgot tovább bonthatjuk kisebb, újrafelhasználható funkciókra. Ebben az esetben csak kivonatolni tudjuk calculateExponent.
useExponentCalculator.js
const calculateExponent = (base, exponent) => base ** exponent;
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = calculateExponent(base, exponent).toFixed(2);
// ...
};
Ezeknek a függvényeknek a tesztelése sokkal egyszerűbb, mint az első példában szereplő teljes komponens kódjának tesztelése. Tesztelhetnénk őket bármely Node.js tesztkönyvtárral, amelynek még a React összetevőit sem kell támogatnia.
Most már megvan a keretspecifikus kódunk (React) az összetevő és a hook kódjában, míg az üzleti logikánk a később meghatározott (keretrendszer-agnosztikus) függvényekben él.
Legjobb gyakorlatok
elnevezése
Szeretem az egyedi horgokat a komponens után elnevezni, mint összefűzéseként use és az összetevő nevét (pl useExponentCalculator). Ezután felhívom a fájl ugyanaz mint a horog.
Érdemes lehet más elnevezési konvenciót követni, de azt javaslom következetes maradni a projektedben.
Ha fel tudom használni egy egyedi horog egyes részeit, általában áthelyezem egy másik fájlba src/hooks.
Ne vigyázzon túl
Próbálj pragmatikus lenni. Ha egy összetevőnek csak néhány sora van JS-ből, akkor nem szükséges szétválasztani a logikát.
CSS-in-JS
Ha CSS-in-JS könyvtárat használ (useStyles), érdemes ezt a kódot is áthelyezni egy másik fájlba.
Áthelyezheti ugyanabba a fájlba, mint a horog. Azonban inkább vagy a komponens felett tartom ugyanabban a fájlban, vagy áthelyezem a saját fájljába, ha túl nagyra nő.
Következtetés
Függetlenül attól, hogy úgy gondolja, hogy az egyéni horgok használata javítja a kódot, vagy sem, ez végül a személyes preferenciákon múlik. Ha a kódbázis nem tartalmaz sok logikát, akkor ennek a mintának az előnyei nem lesznek túl relevánsak az Ön számára.
Az egyedi horgok csak az egyik módja a modularitás növelésének; Én is nagyon ajánlom az alkatrészek és funkciók kisebb, újrafelhasználható darabokra bontása amikor lehetséges.
A témát általánosabb szinten is tárgyaljuk A pragmatikus programozó. Írtam egy cikket, amely a könyvben szereplő kedvenc témáimat fedi le, úgyhogy ha ez érdekel, mindenképpen tegye meg Nézd meg azt.
