Можно ли «инициализировать» компонент React?
Итак, в основном я пытаюсь реализовать функцию перезапуска для своей игры, и я хотел бы иметь возможность как-то «перезагрузить» свой компонент GameView. Вот жизненный цикл: 1. React отображает/монтирует мой компонент 2. пользователь взаимодействует с компонентом, и он изменяется 3. теперь я хочу вызвать функцию, чтобы в основном стереть все эти изменения и принести компонент (и все его дочерние элементы) вернуться к своему состоянию на шаге 1. Вот 2 возможных решения, о которых я подумал:
- сохранить тот же компонент и установить все переменные состояния обратно в их инициализированные значения
- сделать новый компонент и заменить старый
Первый не очень практичен, так как становится очень сложным, когда задействованы дочерние компоненты, а второй не работает, потому что, по-видимому, React по-прежнему рассматривает новый компонент как идентичный старому, поскольку у них одинаковые реквизиты? Я не уверен, почему, но я не мог заставить его работать.
Буду очень признателен за помощь!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать key, чтобы принудительно реагировать на размонтирование и перемонтирование компонента. Ключи дают реакции дополнительную информацию о том, какой элемент из одного рендера соответствует какому элементу из следующего рендера. Если ключи разные, то это говорит о том, что это разные элементы, даже если они имеют одинаковый тип.
const App = () => {
const [gameNumber, setGameNumber] = useState();
const resetGameView = () => {
setGameNumber(prev => prev + 1);
}
return (
<div>
<GameView key = {gameNumber} />
</div>
);
}
Простой и элегантный. Ты козел.
Что непрактичного в сбросе состояния до начальных значений? Это похоже на сценарий, который вы описываете.