În proiectele mai mici React, păstrarea tuturor metodelor componente în componentele în sine funcționează bine. În proiectele de dimensiuni medii, s-ar putea să vă simțiți dorind să puteți scoate aceste metode din componentele dvs. și să le ajutați. Aici, vă voi arăta cum să utilizați o clasă (în loc să exportați funcții și variabile individuale) pentru a vă organiza codul.

Notă: Lucrez în React, deci acesta este exemplul pe care îl vom discuta aici.

Conţinut

Refactor tipic

Într-un refactor tipic, ați lua o funcție pe componentă și o veți muta la un alt ajutor.

Din:

const MyComponent = () => {
  const someFunction = () => 'Hey, I am text'
  return (
    <div>
      {someFunction()}
    </div>
  )
}

La:

ad-banner
import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    <div>
      {someFunction()}
    </div>
  )
}

și

export const someFunction = () => 'Hey, I am text'

Acest exemplu este foarte prost, dar vedeți unde mergem:

  1. Luați funcțiile și copiați-le într-un fișier separat
  2. Importați-le și apelați-le în mod normal.

Când lucrurile se complică, totuși, va trebui să treceți o grămadă de lucruri la acele funcții – obiecte, funcții pentru manipularea stării și așa mai departe. Astăzi am întâmpinat o problemă în care voiam să extrag trei funcții dintr-o componentă și toate aveau nevoie de aceleași intrări (a resource și o funcție pentru actualizarea fișierului resource). Trebuie să existe o modalitate mai bună …

Refactorizarea cu o clasă

Am făcut o mare demonstrație pentru această postare. Puteți vedea codul pe Github. Confirmarea inițială arată toate funcționalitățile din componenta principală (App.js) și comitetele ulterioare refactorizează codul pentru a utiliza o clasă.

Curatarea codului JavaScript cum puteti refactoriza utilizarea claselor

Puteți rula acest lucru singur și puteți face orice doriți. A își aminti să yarn install.

Începem cu o componentă care „preia” un obiect (mimând modul în care am putea face acest lucru dintr-un API) cu anumite atribute pe el: repetare (numărul de casete), lateral (înălțime și lățime), text, culoare. Apoi avem mai multe moduri în care manipulăm vizualizarea – schimbarea culorii, actualizarea textului și așa mai departe. După fiecare modificare, afișăm un mesaj.

De exemplu, iată metoda noastră de schimbare a lățimii și înălțimii:

changeSide = side => {
  const obj = {...this.state.obj, side}
  this.fetchObject(obj);
  this.setState({ message: `You changed the sides to ${side} pixels!` });
}

S-ar putea să avem o serie de alte metode care necesită acțiuni similare – sau poate metode foarte diferite. S-ar putea să începem să ne gândim la extragerea acestui cod către un ajutor. Apoi am crea o altă metodă pentru a apela setState acțiune și ar trebui să o trecem, this.fetchObject, obiectul în stare și side primim ca argument pentru metodă. Dacă avem mai multe metode similare, aceasta este o mulțime de parametri de trecere și poate că nu este de fapt atât de util (sau de citit).

În schimb, putem folosi o clasă, completată cu o metodă constructor:

export default class ObjectManipulator {
  constructor( { object, fetchObject, markResettable, updateMessage, updateStateValue } ) {
    this.fetchObject = fetchObject;
    this.markResettable = markResettable;
    this.updateMessage = updateMessage;
    this.updateStateValue = updateStateValue;
  }

  changeSide = ( object, side ) => {
    const newObject = { ...object, side };
    this.fetchObject(newObject);
    this.updateMessage(`You changed the sides to ${side} pixels!`);
    this.markResettable();
    this.updateStateValue('side', side);
  };
};

Acest lucru ne permite să creăm un obiect ale cărui funcții le putem numi în componenta noastră principală:

const manipulator = new ObjectManipulator({
  object,
  fetchObject: this.fetchObject,
  markResettable: this.markResettable,
  updateMessage: this.updateMessage,
  updateStateValue: this.updateStateValue,
});

Aceasta creează un obiect manipulator – un exemplu al nostru ObjectManipulator clasă. Când sunăm manipulator.changeSide(object, '800') va rula changeSide metoda pe care o definim mai sus. Nu este nevoie să treci updateMessage sau oricare dintre celelalte metode – le preluăm de la constructor, când am creat instanța.

Vă puteți imagina că acest lucru devine cu adevărat util dacă avem multe dintre aceste metode de rezolvat. În cazul meu, trebuia să sun .then(res => myFunction(res) după tot ce încercam să extrag. Defining myFunction pe instanță de clasă în loc să-l treacă la fiecare funcție mi-a salvat o mulțime de cod.

Păstrând totul organizat

Această metodă de organizare poate fi cu adevărat utilă pentru a menține totul la locul său. De exemplu, am o serie de culori pe care le mapez pentru a obține butoanele de culoare pe care le vedeți în exemplu. Prin mutarea acestei constante în ObjectManipulator, Pot să mă asigur că nu se ciocnește cu niciunul colors în restul aplicației mele:

export default class ObjectManipulator {
  [...]

  colors = ['blue', 'red', 'orange', 'aquamarine', 'green', 'gray', 'magenta'];
};

pot folosi manipulator.colors pentru a obține culorile potrivite pentru această pagină, în timp ce ar putea exista un nivel global colors constantă care este folosită pentru altceva.

Referințe

Documente vechi din clasa Mozilla