Inversarea controlului cu exemple reale React și Javascript

Inversarea controlului (IoC) este un principiu de proiectare care permite claselor să fie ușor cuplate și, prin urmare, mai ușor de testat și întreținut. Într-o definiție simplă, obiectele nu creează alte obiecte pe care se bazează pentru a-și face munca. În schimb, ei obțin obiectele de care au nevoie dintr-o sursă externă. Acesta este un principiu de design foarte frumos (și probabil cea mai bună practică) pe care juniorii tind să-l ignore. Mai ales atunci când proiectați componente funcționale, principiul inversării controlului ar trebui să fie întotdeauna în minte. Dacă nu știți, componentele funcționale sunt funcții care preiau elemente de recuzită și returnează JSX. Nu au în mod nativ metode de stare sau de ciclu de viață, dar această funcționalitate poate fi adăugată prin implementarea React Hooks. Componentele funcționale sunt de obicei folosite pentru a afișa informații. Sunt ușor de citit, de depanat și de testat. Să cercetăm exemplele și să verificăm cum arată.

Un exemplu de clasă

Să începem cu un exemplu de clasă, mai jos voi crea o clasă de mașini care va crea o clasă de mașini de bază pe care o puteți folosi mai târziu.

public class Car {

    private CreateEngine engine;

    public Car() {
        this.engine = new CreateEngine();
    }
}

Această clasă de mașini știe cum să creeze un motor și să-l aplice mașinii, acum să creăm o versiune care să aplice IoC

public class Car {

    private CreateEngine engine;

    public Car(CreateEngine engine) {
        this.engine = new CreateEngine();
    }
}

Cu această nouă clasă refactorizată, puteți presupune că clasa dvs. este suficient de proastă și nu conține nicio informație referitoare la crearea motorului. Deoarece să recunoaștem, este o mașină, nu trebuie să știe cum să creeze un motor.

Un exemplu de componentă React

Cred că unul dintre cele mai evidente exemple despre acest subiect este crearea unei componente de buton. Cred că acesta este un exemplu cu adevărat exact și cu adevărat auto-explicativ. Dar există de fapt un alt caz de utilizare care este la fel de important și de fapt mai comun. Biblioteci de formulare. Și să folosim biblioteca mea preferată de formulare, react-hook-form.

export default function App() {
  const { handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="submit" />
    </form>
  );
}

În exemplul de mai sus puteți vedea o componentă numită Aplicațieși această componentă are un caz de utilizare foarte simplu, creați un formular și gestionați trimiterea acestuia. în exemplul de mai sus, componenta în sine este responsabilă de gestionarea acesteia, așa că știe ce să facă atunci când utilizatorul dă clic pe butonul de trimitere.

interface ProviderProps {  
   onSubmit: () => void; 
}
export default function App({ provider: Provider }) {
  const { handleSubmit } = useForm();
  return (
    <form onSubmit={handleSubmit(provider.onSubmit)}>
      <input type="submit" />
    </form>
  );

Iar responsabilul cu gestionarea depunerii acestui formular poate fi izolat, decuplând total codul. Aceasta este cea mai de bază înțelegere și cel mai simplu exemplu de IoC, dar aplicați IoC componentelor dvs., urmărind să vă faceți componentele cât mai stupide posibil. În acest fel, puteți extrage logica din componentele dvs. și puteți testa funcțiile în mod independent.

Sper că ați găsit acest tutorial util pentru a înțelege cum să folosiți inversarea controlului cu react și cum să vă decuplați codul pentru a-l face mai ușor de întreținut.