Блог

Главная - Вопросы по программированию - знаете ли вы, почему useEffect выполняется каждый раз, когда я ввожу ввод?

знаете ли вы, почему useEffect выполняется каждый раз, когда я ввожу ввод?

#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();
    },[]);
Метки: , ,