React 18 используетTransition Hook

В React обновления состояния объединяются, что означает, что в вашем компоненте есть несколько частей состояния и состояния обновляются одновременно. React достаточно умен, чтобы объединять эти несколько обновлений состояния в одно обновление для оптимизации производительности.

но что, если этого нужно как-то избежать,
некоторые обновления состояния требуют времени, например, рассмотрим компонент с двумя значениями состояния, одно из которых представляет собой функцию, которая берет данные из API и соответствующим образом обновляет состояние, которое не нужно обновлять немедленно , но еще одним было поле ввода, которое необходимо обновить немедленно, если эти два состояния обновляются и в одно и то же время затем реакция пытается объединить обновления состояния, что приводит к задержке обновления состояния в поле ввода.

рассмотрим пример такого компонента: у нас есть компонент с полем ввода с состоянием и другим состоянием, предназначенным для рендеринга 20 тыс. элементов ввода, которые мы ввели, это делается для того, чтобы избежать концепций БД и API, поэтому наше состояние ввода должно обновляться немедленно, но наш список из 20 тысяч элементов можно отобразить позже.

мы можем сначала реализовать это следующим образом

import React from "react";
import { useState } from "react";

function UseTransition() {
  const [ipValue, setIpValue] = useState("");
  const [list, setList] = useState([]);
  return (
    <div>
      <input
        type="text"
        value={ipValue}
        onChange={(e) => {
          setIpValue(e.target.value);
          const l = [];
          for (let i = 0; i < 20000; i++) {
            l.push(e.target.value);
          }
          setList(l);
        }}
      />
      <div>
        {list.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
    </div>
  );
}

export default UseTransition;

Если мы видим наше приложение в этот момент времени, оно наверняка лагает, входной компонент также лагает, что не является хорошим поведением.

мы можем использовать useTransition Hook и обновить код таким образом, что с помощью useTransition мы указываем реакцию, чтобы пометить обновление состояния как низкий приоритет. По умолчанию все обновления состояния имеют высокий приоритет, но с помощью useTransition мы указываем состояние с низкий приоритет

Синтаксис useTransition Hook:

const [isPending,startTransition] = useTransition()

Код, указанный в функции startTransition, если имеет низкий приоритет, мы также получаем isPending, который имеет логическое значение и указывает состояние функции, которое является истинным или ложным.

Обновленный код будет

import React from "react";
import { useTransition } from "react";
import { useState } from "react";

function UseTransition() {
  const [ipValue, setIpValue] = useState("");
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();
  return (
    <div>
      <input
        type="text"
        value={ipValue}
        onChange={(e) => {
          setIpValue(e.target.value);
          startTransition(() => {
            const l = [];
            for (let i = 0; i < 20000; i++) {
              l.push(e.target.value);
            }
            setList(l);
          });
        }}
      />
      <div>
        {isPending
          ? "loading"
          : list.map((item, index) => <div key={index}>{item}</div>)}
      </div>
    </div>
  );
}

export default UseTransition;

мы просто добавляем код, который имеет низкий приоритет в функцию startTransition,

мы можем использовать логическое значение isPending, чтобы показать некоторый текст загрузки, пока выполняется функция startTransition.

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

Спасибо…

Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.