#javascript #reactjs #react-hooks #use-effect
Вопрос:
вы знаете, почему useEffect выполняется каждый раз, когда я набираю букву при вводе?
Я не думаю, что ввод повлияет на «Эффект использования»…
import React, { useEffect, useState } from 'react';
const DBLab = () => {
const [inputValue, setInputValue] = useState("");
const printfunc = () => {
console.log("print");
}
useEffect(()=> {
const print = () => {
printfunc();
}
print();
},[printfunc]);
return (
<div>
<h1>dblab</h1>
<h1>{hashHistory}</h1>
<input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)}/>
</div>
)
}
export default DBLab;
Комментарии:
1.Потому
printfunc
что повторно объявляется каждый цикл рендеринга. КогдаinputValue
состояние обновляется, запускается повторный запрос. Либо переместитесьprintfunc
вuseEffect
тело обратного вызова, либоprintfunc
запомните сuseMemo
useCallback
помощью крючков или.2. @DrewReese спасибо… знаете ли вы, как не объявлять заново каждый цикл рендеринга?
3. Да, я объяснил это во второй половине своего комментария. Код в вашем вопросе кажется слишком простым/тривиальным примером, и я подозреваю, что у вас есть конкретная проблема. Можете ли вы обновить свой вопрос, чтобы включить свой реальный код ( если это так )?
4.В соответствии с «Часто задаваемыми вопросами»официальной документации.
useEffect
срабатывает при каждом запускеrender()
. Если вы этого не хотите, также в соответствии с документами: настройте это поведение.5. @DrewReese Очень жаль, что это мой полный код. я просто проверяю реакцию на крючок. но благодаря вам сегодня я получил еще одно знание.
Ответ №1:
Каждый раз, когда вы вводите букву, вы обновляете inputValue
ее, что приводит к повторному отображению компонента. Когда компонент повторно визуализируется, переменная printfunc
повторно инициализируется. И поскольку ваша useEffect
функция printfunc
находится в массиве зависимостей, она запускается каждый раз, когда эта переменная изменяется.
Чтобы решить эту проблему, удалите printfunc
из массива вот так:
useEffect(()=> {
const print = () => {
printfunc();
}
print();
},[]);