169 похожих чатов

»»»»Почему в данном примере если засунуть increment функцию в

setInterval
то внутри increment запускаемый setInterval'ом
всегда имеет изначальное значение
Хотя оно уже должно инкрементиться
Странно очень...

let timer = null;
function Test()
{
const [count, setCount] = useState(0);

console.log('Здесь нормально, выходит 1 =>', count);

function increment()
{
console.log('А вот тут всегда 0 =>'+count);
setCount(count+1);
}

//конструктор, работает только один раз, так как в зависимость поставил нарочно пустой массив, чтоб много раз setInterval не создавать
useEffect(() => {
timer = setInterval(function(){
increment();
}, 1000);
}, []);

return count;
}

ReactDOM.render(
<Test />,
document.getElementById('root')
);

по вчерашнему я нашел ответ
Хотя в офиц доках странно что об этом не предупреждают
Функциональные и классовые компоненты реакта не идентичны
они имеют разницы
и одна большая разница которую я нашел и отняло два дня на понимание
отложенные вызванные функции "захватывают" "запоминают" те старые пропсы и стейты которые он имел на тот момент когда была вызвана отложенное исполнение setTimeout или setInterval

то же самое с классовым будет работать совершенно иначе
он будет забывать то состояние и пропсы когда был вызван setTimeout
он будет работать с самими последними свежими состяниями и пропсами

вот так.

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

А вы знали об этом ??

13 ответов

9 просмотров

это просто javascript. твое "захватывание" называется замыканием

https://en.reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often Тут как раз про setInterval в useEffect

Nurbek-Nurjanov Автор вопроса
no name
https://en.reactjs.org/docs/hooks-faq.html#what-ca...

Привет в документации написано так Пул событий События SyntheticEvent содержатся в пуле. Это означает, что объект SyntheticEvent будет повторно использован, а все его свойства будут очищены после вызова обработчика события. Это необходимо из соображений производительности. Именно поэтому нельзя использовать синтетические события асинхронно Вообще не вкуриваю Что такое пулл что тут пытается сказать документация ?? Может простым крестянским языком обясните ??

Nurbek Nurjanov
Привет в документации написано так Пул событий Со...

типа после выполнения события очистится объект SyntheticEvent и если в асинхронной функции работать с SyntheticEvent то на момент выполнения может быть такое, что event уже будет очищен, например target, может затеряться

Nurbek Nurjanov
спасибо, что то начинаю понимать

и всё это потеряет смысл, когда перейдёшь на react@17

𝖊𝖙𝖍𝖔𝖗𝖟 😈
а что там будет? Не слежу чето)

https://reactjs.org/blog/2020/08/10/react-v17-rc.html#no-event-pooling

Похожие вопросы

Обсуждают сегодня

Типа вызывать GetParent и проверять на соответствие GetModuleHandle?
The Bird of Hermes
67
Do any of you guys have interesting projects one could join? I'm a Middle Full-Stack developer (JS/TS, React & Node)
Lev Shapiro
40
$res = json_decode($наша строка из респонса); $res1 = array_map(fn($o) => $o->name, $res->breadcrumbs[0]->entities); Как такое будет на Хаскеле?.. В начале весь джейсон, в ко...
Хаскель Моисеевич Гопник
27
В чем сила брат, в NASM или FASM?
Isaac Kleiner
18
Вопрос по диагностике ошибок (я знаю в чем, в данном конкретном примере, я знаю, как исправить, пример модельный, понятно, что в реальности бывает намного запутаннее). module...
ⰄⰎⰋⰐⰐⰑⰛⰤⰧⰧⰩⰄ ⰊⰑⰁⰓⰡⰛⰦⰕⰫ
11
А чем вам питонисты не угодили?😂
.
79
Есть какой-нибудь для Delphi/FPC T*Compression(Decompression)Stream на базе LZ4/Zstd/любой другой быстрый(и хорошо сжимающий) алгоритм А ещё лучше в pure pascal А ещё лучше од...
notme
52
Хтось використовував Vapor на Windows?
Jaroshevskii
15
Какое виндузовое сообщение приходит TTabSheet, что риэлайняться контролы на нем, даже у которых парент другой? Ситуация: открываю форму - кнопок нет, перелистываю на другой т...
Катерина Свиридова
7
Тут кста кто-нибудь NeoVim использует?
Simple Sorcerer
13
Карта сайта