Kui olete Reactiga mõnda aega koostööd teinud, olete tõenäoliselt selle peale sattunud konteiner ja esitluskomponendid või nutikad ja lollid komponendid. Need terminid kirjeldavad a muster mis eraldab Reacti komponentide kasutajaliidese kihi loogikast.
Kasutajaliidese eraldamine äriloogikast pole Reactile midagi ainulaadset: murede eraldamine on disainipõhimõte, mis olnud juba 70ndatel. Näiteks on levinud tava eraldada andmebaasile juurde pääsev kood taustaprogrammi äriloogikast.
Nii et Reactis lahendasime selle probleemi, luues kogu loogikat sisaldavad konteineri komponendid, mis seejärel edastaksid andmed rekvisiitide kaudu esitluskomponendile.
Reacti konksude kasutuselevõtuga on sellele uus lähenemine: kasutamine kohandatud konksud.
Miks peaksime loogika komponendist eraldama?
Enne kui hakkame loogikat oma Reacti komponentidest lahti siduma, peaksime teadma, miks.
Meie koodi korraldamisel viisil, kus iga funktsioon või komponent vastutab ainult ühe asja eest, on see eelis, et seda on palju lihtsam muuta ja hooldada (Dave ja Andrew kutsuvad seda "ortogonaalsus” oma raamatus Pragmaatiline programmeerija).
Selle rakendamine Reactile tähendab, et meie komponent näeb välja puhtam ja organiseeritum. Näiteks enne kasutajaliidese redigeerimist ei pea me loogikaseinast mööda kerima.
Koodi niimoodi korraldamine ei muuda seda mitte ainult paremaks ja hõlpsamaks navigeerimiseks, vaid muudab ka muutmise lihtsamaks, kuna konksu muutmine ei mõjuta kasutajaliidest ja vastupidi.
Testimine on ka ligipääsetavam: soovi korral saame loogikat kasutajaliidest eraldi testida. Minu jaoks on kõige olulisem eelis aga see, kuidas see lähenemisviis minu koodi korraldab.
Kuidas lahutada loogikat Reacti konksudega
Loogika lahutamiseks meie komponendist loome esmalt kohandatud konksu.
Võtame selle komponendi näitena. See arvutab baasarvu ja eksponendi eksponentsiaalse väärtuse:
Leiate täieliku lähtekoodi siin.
Kood näeb välja järgmine:
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>
);
};
See võib juba hea välja näha, kuid selle õpetuse huvides lihtsalt kujutage ette et siin on rohkem loogikat.
Esimese sammuna teeme liigutage loogika kohandatud konksule ja nimetage seda meie komponendi sees.
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();
// ...
};
Võiksime selle konksu teisaldada a eraldi fail murede selgemaks eraldamiseks.
Lisaks saame oma konksu veelgi eraldada väiksemateks korduvkasutatavateks funktsioonideks. Sel juhul saame ainult väljavõtte 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);
// ...
};
Nende funktsioonide testimine on palju lihtsam kui kogu komponendi koodi testimine esimeses näites. Võiksime neid testida mis tahes Node.js testimise teegiga, mis ei pea isegi Reacti komponente toetama.
Nüüd on meil komponendi ja konksu koodis meie raamistikuspetsiifiline kood (React), samas kui meie äriloogika elab erinevates funktsioonides, mille me hiljem määratlesime (mis on raamistiku agnostilised).
parimad tavad
Nimetamine
Mulle meeldib oma kohandatud konksu nimetada komponendi järgi kui konkatenatsiooni use ja komponendi nimi (nt useExponentCalculator). Helistan siis faili sama kui konks.
Võib-olla soovite järgida teistsugust nimetamisviisi, kuid ma soovitan järjekindlaks jäämine oma projektis.
Kui saan kohandatud konksu osi uuesti kasutada, teisaldan selle tavaliselt mõnda teise faili src/hooks.
Ärge üle pingutage
Proovige olla pragmaatiline. Kui komponendil on vaid paar JS-i rida, pole loogikat vaja eraldada.
CSS-in-JS
Kui kasutate CSS-in-JS-i teeki (useStyles), võiksite ka selle koodi teise faili teisaldada.
Saate selle konksuga samasse faili teisaldada. Eelistan siiski hoida seda komponendi kohal samas failis või teisaldada see oma faili, kui see liiga suureks kasvab.
Järeldus
Ükskõik, kas arvate, et kohandatud konksude kasutamine parandab teie koodi või mitte, taandub see lõpuks isiklikele eelistustele. Kui teie koodibaas ei sisalda palju loogikat, ei ole selle mustri eelised teie jaoks liiga olulised.
Kohandatud konksud on vaid üks võimalus modulaarsuse suurendamiseks; Soovitaksin ka väga komponentide ja funktsioonide jagamine väiksemateks korduvkasutatavateks tükkideks kui võimalik.
Teemat käsitletakse ka üldisemal tasandil aastal Pragmaatiline programmeerija. Kirjutasin artikli, mis käsitleb minu raamatu lemmikteemasid, nii et kui see teile huvi pakub, tehke seda kindlasti kontrollige seda.
