Построение структуры данных «последним пришел — первым вышел»: создание стека в React.js

React.js — это популярная библиотека JavaScript, используемая для создания пользовательских интерфейсов. Он предоставляет мощный набор инструментов для создания сложных веб-приложений. Одной из самых полезных структур данных в программировании является стек. В этой статье мы рассмотрим, как создать стек в React.js.

Что такое стек?

Стек — это структура данных, которая работает по принципу «последний пришел — первый ушел» (LIFO). Это набор элементов, к которым можно получить доступ двумя способами: push и pop. Когда вы помещаете элемент в стек, он добавляется на вершину стека. Когда вы извлекаете элемент из стека, он удаляется из вершины стека.

Создание компонента стека в React.js

Для создания стека в React.js воспользуемся хуком useState. Этот хук позволяет нам добавлять состояние к нашим функциональным компонентам. Мы также будем использовать функцию карты для перебора нашего стека и отображения элементов.

Вот код нашего компонента стека:

import React, { useState } from 'react';

function Stack() {
  const [stack, setStack] = useState([]);

  function push() {
    const value = prompt('Enter a value');
    setStack([...stack, value]);
  }

  function pop() {
    setStack(stack.slice(0, stack.length - 1));
  }

  return (
    <div>
      <h1>Stack</h1>
      <button onClick={push}>Push</button>
      <button onClick={pop}>Pop</button>
      {stack.map((value, index) => (
        <div key={index}>{value}</div>
      ))}
    </div>
  );
}

export default Stack;

мы определяем две функции: push и pop. Функция push предлагает пользователю ввести значение, а затем добавляет это значение в верхнюю часть стека с помощью функции setStack. Мы используем оператор распространения (…) для создания нового массива с существующими значениями стека и новым значением.

Функция pop удаляет последний элемент из стека с помощью метода slice и обновляет состояние с помощью setStack.

Наконец, мы возвращаем JSX для нашего компонента стека. Мы отображаем стек с помощью функции карты и оборачиваем каждый элемент в div с уникальным ключом.

Заключение

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