Собеседования, ориентированные на внешний интерфейс, часто вообще не заботятся о DSA.

И для тех из нас, кто помнит, как изучал DSA в школе/колледже, все примеры показались чисто алгоритмическими (по уважительной причине), но почти не было никаких примеров или указаний о том, как продукты, которые мы используем каждый день, используют эту концепцию.

“Понадобится ли мне это когда-нибудь?”
Вы много об этом спрашивали, не так ли? ?

Вот несколько структур данных, которые вы можете использовать в своем приложении React уже сегодня! ?

Оглавление

1. Введение
2. Массивы: ваш помощник в управлении состоянием
3. Объекты и хеш-карты: нормализованное хранилище данных для повышения эффективности
4. Двухсвязные списки: навигация с контекстом
5. Стеки: функциональность отмены/повтора с неизменяемым поведением
6. Очереди: управление последовательными вызовами API
7. Деревья: рекурсивный рендеринг компонентов
8. Графики: построение сложных связей между данными и навигация
9. Заключение

Связанное чтение:

Переход от SDE1 к SDE2 и далее! ? Что на самом деле нужно.

Джаянт Бхавал для промежуточного программного обеспечения ・ 10 июня

#карьера #повышение #webdev #новички

1. Массивы?: ваш помощник в управлении состоянием

Массивы в React повсюду. Если вам нужна помощь в понимании того, как работают .map() или .filter(), возможно, вы увидели этот пост слишком рано! Но не волнуйтесь: как только вы освоитесь с этими методами работы с массивами, вы увидите, насколько они важны для рендеринга списков, управления состояниями компонентов и преобразования данных.

2. Объекты и хэш-карты ?️: нормализованное хранилище данных для повышения эффективности

В приложении React, когда вы имеете дело с большой коллекцией объектов, таких как пользователи или сообщения, нормализация ваших данных в объекты (хэш-карты) может сделать чтение и обновление намного более эффективными. Вместо работы с глубоко вложенной структурой вы сопоставляете сущности по их идентификаторам.

Пример: Чтение из нормализованного хранилища с идентификаторами

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}
    
  );
}

Этот шаблон обеспечивает эффективный доступ к данным, особенно с большими наборами данных, где обновления или чтения должны выполняться быстро, без повторной визуализации всей коллекции.

3. Двусвязные списки?: Навигация с контекстом

Двойные связанные списки полезны, когда вам нужен контекст как для предыдущего, так и для следующего элемента — представьте себе навигацию по фотогалерее, где каждое изображение отображает соседние изображения для справки. Вместо использования индекса мы сохраним текущий узел непосредственно в состоянии компонента.

Пример: Двухсвязный список для навигации между элементами с контекстом

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
        
      
    
  );
}

В этом компоненте React:

• текущий узел сохраняется в состоянии, а пользовательский интерфейс обновляется в зависимости от того, существует ли предыдущий или следующий узел.
• Кнопки позволяют пользователям перемещаться по списку вперед и назад, а также отключать их, если больше нет узлов для перемещения.
• Эта структура имитирует навигацию в реальном времени с контекстом окружающих элементов, обычно используемых в компонентах пользовательского интерфейса, таких как карусели, медиа-галереи или списки воспроизведения.

4. Стеки?: Функциональность отмены/повтора с неизменяемым поведением.

Стеки позволяют эффективно управлять операциями отменить/повторить с использованием логики Последний вход — первый выход (LIFO). Используя неизменяемые операции (объединение, срез), мы можем гарантировать, что состояние останется неизменным.

Пример: Отменить/повторить действие с помощью неизменяемого push и pop

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. Очереди?: Управление последовательными вызовами API

Очереди работают по принципу Первым пришел — первым обслужен (FIFO) и отлично подходят для обеспечения правильной обработки таких задач, как вызовы API или уведомления.

Пример: Очередь вызовов 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. Деревья?: Рендеринг рекурсивных компонентов

Деревья обычно используются в React при работе с вложенными компонентами, такими как потоки комментариев, структуры папок или меню.

Пример: Рекурсивное отображение дерева комментариев

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 => (
        

          
      ))}
    
  );
}

Еще один популярный пост, который может быть вам интересен:

Пишите меньше, исправляйте никогда: искусство высоконадежного кода

Дхрув Агарвал для промежуточного программного обеспечения ・ 17 июня

#разработчик #производительность #программирование #карьера

7. Графики?: Построение сложных связей между данными и навигация.

Пример 1: Маршрутизация между несколькими представлениями
Вы можете представлять маршруты между страницами в виде графа, обеспечивая гибкие пути навигации в 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}`);
  }
}

Пример 2: Моделирование взаимоотношений с пользователями
Графики идеально подходят для моделирования социальных связей или любых отношений, в которых несколько объектов взаимосвязаны.

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']

Примечание. Мы используем графики, чтобы показать зависимости рецензентов в промежуточном программном обеспечении.

TL;DR — школьные уроки окупаются

Эти классы DSA раньше могли показаться абстрактными, но структуры данных в React определяют мир вокруг вас.

Объекты, стеки, очереди, связанные списки, деревья и графики — это больше, чем просто теория — они являются основой простых, эффективных и масштабируемых приложений, которые вы создаете каждый день.

Итак, в следующий раз, когда вы будете управлять состоянием в очереди или обрабатывать сложную логику пользовательского интерфейса, помните: вы тренировались этому со школы. ?

Дайте мне знать, какие структуры данных вы используете чаще всего!