Disseny React

Imaginem que tenim una maqueta de la interfície. Els passos habituals per a dissenyar una aplicació React serien:

  1. Descompondre la interfície en una jerarquia de components.
  2. Construir una versió estàtica en React.
  3. Trobar la mínima representació possible de l'estat.
  4. Identificar on ha de situar-se l'estat dins de la jerarquia.
  5. Afegir flux invers de dades.
  6. Extreure lògica dels components.

1 Descomposició

Identifica les responsabilitats dins del disseny i separa-les en components.

2 Versió estàtica

Començar creant una versió no interactiva. Cal decidir quines props passen de dalt cap a baix de la jerarquia, però sense utilitzar estat. Es diu flux d'un sol sentit.

3 Estat mínim i suficient

La interfície d'usuari es fa interactiva gràcies a la possibilitat de modificar les dades del nostre model. Ho podem fer utilitzant estat: el mínim conjunt de dades que la nostra aplicació ha de recordar.

Identifica les dades que són estat:

  • canvien al llarg del temps,
  • no arriben per les props,
  • no són computables a partir d'un altre estat o les props.

4 Localització de l'estat

Cal identificar quin component modifica l'estat i per tant li pertany. Es pot fer en tres passos:

  1. Identifica els components que utilitzen l'estat
  2. Trobar el pare comú més proper de tots dins la jerarquia
  3. Decideix on ha de localitzar-se. Habitualment és al pare comú, tot i que podria ser qualsevol ancestre d'aquest pare.

5 Flux invers de dades

Si volem que un component fill pugui modificar l'estat d'un component pare, cal que el pare passi un callback mitjançant les props que el fill pugui cridar per a realitzar el flux invers de dades.

6 Extreure lògica dels components

Els custom hooks són una forma d'extreure lògica dels components amb estat. Si ens trobem que utilitzem diversos hooks de React, amb diversos estats (useState) i possiblement effectes (useEffect) o altres, es pot simplificar i encapsular en un custom hook. Això simplificarà el codi i, encara que no és un requisit, permetrà la seva reutilització en altres components.