Почему этот компонент перерисовывается?
Я пытался убедиться в том, как React сравнивает состояния и перерисовывает компоненты, и изо всех сил пытался понять, почему происходит такое поведение: У меня есть простой компонент с двумя кнопками и двумя переменными состояния. Кнопка «Инкремент» предназначена для увеличения счетчика, а кнопка «Повторный рендеринг» запускает повторный рендеринг. Состояние счетчика — это объект со свойством value, который является фактическим числовым счетчиком. Триггер — это просто логическое значение, значение которого нигде не используется. Обновление состояния приращения сделано намеренно неправильно, просто чтобы проверить, как сравнивается состояние.
function App() {
const [counter, setCounter] = useState({
value: 0,
})
const [trigger, setTrigger] = useState(false)
console.info('Rendered ', Date.now())
console.info('State: ', {counter, trigger})
return (
<>
<h1>Object State</h1>
<p>Counter: {counter.value}</p>
<button onClick = {() => {
counter.value++
setCounter(counter)
}}> Increment</button>
<button onClick = {() => {
setTrigger(!trigger)
}}> Re-render</button>
</>
)
}
Нажатие кнопки «Приращение» не дает ожидаемых результатов. Когда я нажимаю кнопку «Повторная визуализация», компонент перерисовывается, как ожидалось, и отображается текущее значение счетчика. На данный момент все работает так, как ожидалось. Но если после нажатия кнопки «Повторный рендеринг» я нажимаю «Инкремент», я вижу в консоли, что компонент был вызван, хотя отображаемое значение счетчика не обновилось. Похоже, что вывод отброшен. Нажатие кнопки «Приращение» после этого не дает никакого эффекта, и компонент не вызывается. Почему происходит этот неожиданный вызов и почему он происходит только один раз при следующем щелчке по повторному рендерингу?
Я ожидаю, что компонент никогда не будет вызываться при нажатии Increment. На самом деле он вызывается один раз при нажатии «Инкремент» после щелчка «Повторный рендеринг».
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
https://legacy.reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update
В устаревшем документе React упоминается, что React будет запускать функцию компонента, даже если значение состояния не будет изменено. Этот повторный запуск функции компонента не будет выполняться снова, если React обнаружит, что состояние остается прежним.
вы просто пытаетесь настроить простой счетчик с увеличением и уменьшением? Я думаю, что это излишне для кода.
В ответ использование управления состоянием и обработчиков событий все равно обновит ваши значения. Если вы хотите выполнять побочные эффекты, которые затрагивают жизненный цикл компонентов и реагируют на изменение состояния, вы можете включить useEffect(). Но для простого счетчика я не думаю, что вам это понадобится.
Вот простой счетчик, который я сделал, который работает и не позволяет считать ниже 0:
const [count, setCount] = useState(0);
const handleCount = (counter) => {
setCount(counter);
};
return(
<button onClick = {() => handleCount(count +
1)}>Increment+</button>
<button
onClick = {() => handleCount(count >= 1 ? count
- 1 : 0)}
>
Decrement-
</button> )}
«Вы просто пытаетесь настроить простой счетчик с увеличением и уменьшением?» - нет. ОП пытается понять, почему и когда именно реакция выполняет компонент функции при изменении состояния (или нет, то есть при установке для него точно такого же значения). Они только что привели пример со счетчиками, чтобы вы могли воспроизвести проблему.
Есть ли какая-либо информация, почему необходим этот повторный рендеринг?