Les entretiens axés sur le frontend ne se soucient souvent pas du tout du DSA.

Et pour ceux d'entre nous qui se souviennent d'avoir étudié le DSA à l'école/au collège, tous les exemples semblaient purement algorithmiques (pour une bonne raison), mais il n'y avait pratiquement aucun exemple ou guide sur la façon dont les produits que nous utilisons quotidiennement exploitent ce concept.

« Aurai-je un jour besoin de ça ? »
Vous avez souvent posé cette question, n'est-ce pas ? ?

Voici quelques structures de données que vous pouvez exploiter dans votre application React dès aujourd'hui ! ?

Table des matières

1. Introduction
2. Tableaux : votre référence en matière de gestion d'état
3. Objets et cartes de hachage : magasin de données normalisé pour plus d'efficacité
4. Listes doublement liées : navigation avec contexte
5. Stacks : fonctionnalité d'annulation/rétablissement avec un comportement immuable
6. Files d'attente : gestion des appels d'API séquentiels
7. Arbres : rendu des composants récursifs
8. Graphiques : création de relations de données complexes et navigation
9. Conclusion

Lecture connexe :

Passer de SDE1 à SDE2, et au-delà ! ? Ce qu'il faut réellement.

Jayant Bhawal pour Middleware ・ 10 juin

#carrière #promotion #webdev #débutants

1. Tableaux ? : Votre référence en matière de gestion d'état

Les tableaux sont partout dans React. Si vous avez besoin d’aide pour comprendre le fonctionnement de .map() ou .filter(), vous voyez probablement cet article un peu trop tôt ! Mais ne vous inquiétez pas : une fois que vous serez familiarisé avec ces méthodes de tableau, vous verrez à quel point elles sont essentielles pour le rendu des listes, la gestion des états des composants et la transformation des données.

2. Objets et cartes de hachage ?️ : magasin de données normalisé pour plus d'efficacité

Dans une application React, lorsque vous traitez un grand nombre d'entités telles que des utilisateurs ou des publications, la normalisation de vos données en objets (cartes de hachage) peut rendre la lecture et la mise à jour beaucoup plus efficaces. Au lieu de travailler avec une structure profondément imbriquée, vous mappez les entités par leurs identifiants.

Exemple : Lecture à partir d'un magasin normalisé avec des identifiants

const postsById = {
  1: { id: 1, title: 'First Post', content: 'Content of first post' },
  2: { id: 2, title: 'Second Post', content: 'Content of second post' }
};

const postIds = [1, 2];

function PostList() {
  return (
    

      {postIds.map(id => (
        
      ))}
    
  );
}

function Post({ post }) {
  return (
    

      
{post.title}
      
{post.content}
    
  );
}

Ce modèle permet un accès efficace aux données, en particulier avec les grands ensembles de données où les mises à jour ou les lectures doivent être effectuées rapidement sans restituer l'intégralité de la collection.

3. Listes doublement liées ? : Navigation avec contexte

Les listes doublement liées sont utiles lorsque vous avez besoin de contexte à partir des éléments précédents et suivants : pensez à naviguer dans une galerie de photos où chaque image affiche ses images voisines pour référence. Au lieu d'utiliser un index, nous stockerons le nœud actuel directement dans l'état du composant.

Exemple : Liste doublement chaînée pour la navigation entre les éléments avec contexte

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
    this.prev = null;
  }
}

class DoublyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  add(value) {
    const newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;
      newNode.prev = this.tail;
      this.tail = newNode;
    }
  }
}

const imageList = new DoublyLinkedList();
imageList.add({ id: 1, src: 'image1.jpg', alt: 'First Image' });
imageList.add({ id: 2, src: 'image2.jpg', alt: 'Second Image' });
imageList.add({ id: 3, src: 'image3.jpg', alt: 'Third Image' });

function Gallery() {
  const [currentNode, setCurrentNode] = useState(imageList.head);

  return (
    

      {currentNode.prev && (
        
      )}
      
      {currentNode.next && (
        
      )}
      

         setCurrentNode(currentNode.prev)} disabled={!currentNode.prev}>
          Previous
        
         setCurrentNode(currentNode.next)} disabled={!currentNode.next}>
          Next
        
      
    
  );
}

Dans ce composant React :

• Le nœud actuel est stocké dans l'état et l'interface utilisateur est mise à jour selon qu'il existe un nœud précédent ou suivant.
• Les boutons permettent aux utilisateurs de parcourir la liste en avant et en arrière, et de les désactiver s'il n'y a plus de nœuds vers lesquels se déplacer.
• Cette structure simule la navigation en temps réel avec le contexte des éléments environnants, couramment utilisés dans les composants de l'interface utilisateur tels que les carrousels, les galeries multimédias ou les listes de lecture.

4. Stacks ? : fonctionnalité d'annulation/rétablissement avec un comportement immuable

Stacks vous permet de gérer efficacement les opérations annuler/rétablir en utilisant la logique Dernier entré, premier sorti (LIFO). En utilisant des opérations immuables (concat, slice), nous pouvons garantir que l'état reste inchangé.

Exemple : Annuler/Rétablir avec push et pop immuables

const [undoStack, setUndoStack] = useState([]);
const [redoStack, setRedoStack] = useState([]);
const [formState, setFormState] = useState({ name: '', email: '' });

const updateForm = (newState) => {
  setUndoStack(prev => prev.concat([formState]));  // Immutable push
  setRedoStack([]);  // Clear redo stack
  setFormState(newState);
};

const undo = () => {
  if (undoStack.length > 0) {
    const lastState = undoStack.at(-1);
    setUndoStack(prev => prev.slice(0, -1));  // Immutable pop
    setRedoStack(prev => prev.concat([formState]));  // Move current state to redo
    setFormState(lastState);
  }
};

const redo = () => {
  if (redoStack.length > 0) {
    const lastRedo = redoStack.at(-1);
    setRedoStack(prev => prev.slice(0, -1));  // Immutable pop
    setUndoStack(prev => prev.concat([formState]));  // Push current state to undo
    setFormState(lastRedo);
  }
};

5. Files d'attente ? : Gestion des appels API séquentiels

Les files d'attente fonctionnent selon le principe Premier entré, premier sorti (FIFO) et sont idéales pour garantir que les tâches telles que les appels d'API ou les notifications sont traitées dans le bon ordre.

Exemple : Mise en file d'attente des appels d'API

const [apiQueue, setApiQueue] = useState([]);

const enqueueApiCall = (apiCall) => {
  setApiQueue(prevQueue => prevQueue.concat([apiCall]));  // Immutable push
};

const processQueue = () => {
  if (apiQueue.length > 0) {
    const [nextCall, ...restQueue] = apiQueue;
    nextCall().finally(() => setApiQueue(restQueue));  // Immutable pop
  }
};

6. Arbres ? : Rendu des composants récursifs

Les arbres sont couramment utilisés dans React lorsqu'il s'agit de composants imbriqués tels que les fils de commentaires, structures de dossiers ou menus.

Exemple : Rendu d'une arborescence de commentaires de manière récursive

const commentTree = {
  id: 1,
  text: "First comment",
  children: [
    { id: 2, text: "Reply to first comment", children: [] },
    { id: 3, text: "Another reply", children: [{ id: 4, text: "Nested reply" }] }
  ]
};

function Comment({ comment }) {
  return (
    

      
{comment.text}
      {comment.children?.map(child => (
        

          
      ))}
    
  );
}

Un autre article populaire qui pourrait vous intéresser :

Écrivez moins, ne corrigez jamais : l'art du code hautement fiable

Dhruv Agarwal pour Middleware ・ 17 juin

#promoteur #productivité #programmation #carrière

7. Graphiques ? : Création de relations de données complexes et navigation

Exemple 1 : Routage entre plusieurs vues
Vous pouvez représenter les itinéraires entre les pages sous forme de graphique, garantissant ainsi des chemins de navigation flexibles dans un SPA.

const routesGraph = {
  home: ['about', 'contact'],
  about: ['home', 'team'],
  contact: ['home'],
};

function navigate(currentRoute, targetRoute) {
  if (routesGraph[currentRoute].includes(targetRoute)) {
    console.log(`Navigating from ${currentRoute} to ${targetRoute}`);
  } else {
    console.log(`Invalid route from ${currentRoute} to ${targetRoute}`);
  }
}

Exemple 2 : Modélisation de la relation utilisateur
Les graphiques sont parfaits pour modéliser les connexions sociales ou tout type de relation dans laquelle plusieurs entités sont interconnectées.

const usersGraph = {
  user1: ['user2', 'user3'],
  user2: ['user1', 'user4'],
  user3: ['user1'],
  user4: ['user2']
};

function findConnections(userId) {
  return usersGraph[userId] || [];
}

console.log(findConnections('user1'));  // Outputs: ['user2', 'user3']

Remarque : Nous utilisons des graphiques pour montrer les dépendances des réviseurs dans le middleware.

TL;DR — Ces leçons scolaires portent leurs fruits

Ces classes DSA semblaient peut-être abstraites à l'époque, mais les structures de données alimentent le monde qui vous entoure dans React.

Les objets, les piles, les files d'attente, les listes chaînées, les arbres et les graphiques sont bien plus que de la simple théorie : ils constituent l'épine dorsale des applications propres, efficaces et évolutives que vous créez chaque jour.

Ainsi, la prochaine fois que vous gérerez l'état dans une file d'attente ou que vous gérerez une logique d'interface utilisateur complexe, rappelez-vous : vous vous êtes entraîné pour cela depuis l'école. ?

Faites-moi savoir quelles structures de données vous utilisez le plus !