Нужен контекст — вы работаете в чистом JS, в React, Vue или другом фреймворке? Ниже приведены короткие правильные способы для самых распространённых случаев.
1) Чистый JavaScript (DOM)
- В обычном JS можно использовать push и затем обновлять отображение (перерисовать список).
Пример:
```
<!doctype html>
<html>
<body>
<button id="add">Добавить</button>
<ul id="list"></ul>
<script>
const arr = [];
const btn = document.getElementById('add');
const list = document.getElementById('list');
function render() {
list.innerHTML = '';
arr.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
list.appendChild(li);
});
}
btn.addEventListener('click', () => {
const newItem = 'Элемент ' + (arr.length + 1);
arr.push(newItem); // добавляем
render(); // обновляем DOM
});
</script>
</body>
</html>
```
2) React (функциональные компоненты, useState) — самый частый источник вопросов
- Не мутируйте состояние напрямую (не делайте arr.push(state)). Вместо этого создайте новый массив:
```
import React, { useState } from 'react';
function App() {
const [items, setItems] = useState([]);
const addItem = () => {
const newItem = 'Item ' + (items.length + 1);
// корректный способ — создать новый массив
setItems(prev => [...prev, newItem]);
};
return (
<>
<button onClick={addItem}>Добавить</button>
<ul>
{items.map((it, i) => <li key={i}>{it}</li>)}
</ul>
</>
);
}
```
Почему так: React отслеживает изменение ссылки на массив; если мутировать старый массив (push) без создания новой ссылки, React может не перерисовать компонент.
3) React (классовый компонент)
```
this.setState(prev => ({
items: [...prev.items, newItem]
}));
```
4) Vue 3 (Composition API)
- Vue корректно отслеживает изменения в массивах при push, но безопаснее работать с reactive/ref:
```
import { ref } from 'vue';
const items = ref([]);
function add() {
items.value.push('new');
}
```
В Vue 2 также push обычно работает и реактивен.
Полезные замечания:
- В React всегда создавайте новый объект/массив при обновлении состояния (immutability).
- При рендеринге списка ставьте уникальный key (не индекс, если порядок меняется).
- Если добавление зависит от предыдущего состояния — используйте функцию в setState (prev => ...), чтобы избежать гонок.
- Генерируйте уникальные id для элементов (например uuid или счётчик), если нужен стабильный key.
Если скажете, в какой среде/фреймворке вы работаете и покажете ваш код, я дам точную правку.