Блог

Главная - Вопросы по программированию - Как отложить повторную визуализацию в функциональном компоненте?

Как отложить повторную визуализацию в функциональном компоненте?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Моя цель — отложить повторный рендеринг, когда пользователь вводит ввод, подождите около 2 секунд перед повторным рендерингом.

Ожидаемый результат: задержка повторного рендеринга до 1 экземпляра в 2 секунды. Вместо повторного рендеринга для каждого обновления состояния.

Текущие результаты: это задерживает text2 обновление состояния. Он по-прежнему повторно отображается всякий раз, когда происходит обновление состояния text .

 function App() {
  const [text, setText] = React.useState();
  const [text2, setText2] = React.useState(0);

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      setText2(initial => initial   1)
    }, 2000)
  }, [text])

  return (
    <>
      <form>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
      </form>
      <div>{text}</div>
      <div>{text2}</div>
    </>
  )
}

Другая идея состоит в том, чтобы использовать let переменную вместо useState хука, но, что удивительно useEffect , она не прослушивает изменения let переменной, поэтому она не выполняет повторный рендеринг.

Комментарии:

1. Рассмотрите возможность использования debounce? Кроме того, какова цель этого? (Таким образом, мы можем помочь вам с реальной проблемой, которую вы решаете)

2. Отмена или дросселирование — хорошие идеи для конкретных случаев использования, например, когда вам нужно обновлять токен каждые X секунд или подождать несколько секунд после того, как пользователь перестанет печатать, чтобы что-то сохранить. Однако задержка всего процесса повторного рендеринга React кажется плохой идеей, поскольку это основная функциональность. Если вы считаете, что отложенная повторная визуализация решит ваши проблемы, потому что у вас проблемы с производительностью, то проблема заключается не в повторной визуализации, а в том, как вы реализовали свои компоненты.

3. Когда text обновляется? Предполагая, что текст обновляется при изменении ввода и содержит входное значение и text2 является количеством символов входного значения (дикое предположение, я знаю), вы могли бы обрабатывать все в handleChange() функции.

4. @evolutionxbox проверка подлинности телефона. Я хотел бы автоматизировать пользовательский интерфейс, так что нет Next button . Компонент запускает authorize() метод через 2 to give chance for correction and unnecessary calling the API секунды, когда PIN-код заполняется числом 4.