Возможно, наиболее важной функцией, представленной в React 18, является параллелизм.
В компьютерных науках параллелизм — это способность различных частей или единиц программы, алгоритма или задачи выполняться не по порядку или в частичном порядке, не влияя на конечный результат. Это позволяет параллельно выполнять параллельные модули, что может значительно повысить общую скорость выполнения в многопроцессорных и многоядерных системах. В более технических терминах параллелизм относится к возможности разложения программы, алгоритма или проблемы на независимые от порядка или частично упорядоченные компоненты или единицы вычислений.
Но, точнее говоря, функция параллелизма, представленная в React 18, связана с определением приоритета обновлений состояния, при котором мы можем поддерживать отзывчивость всего пользовательского интерфейса.
В проекте вам наверняка приходилось выводить на экран очень длинный список, и в этом случае ваша страница будет показывать все реакции пользователя с задержкой. В такой ситуации могут быть приняты различные решения, например, нумерация страниц или виртуализация являются одними из таких решений.
давайте посмотрим, как useTransition() решает нашу проблему:
Представьте, что у нас есть длинный список контактов, и мы хотим отобразить их в компоненте ContactList, а также у нас есть поле ввода для поиска, в котором мы можем выполнять поиск по всем контактам. Как вы можете себе представить, если у нас есть 10000 контактов, мы будем испытывать вялость пользовательского интерфейса при попытке поиска.
function App() {
const [filterTerm, setFilterTerm] = useState('');
const filteredContacts = filterContacts(filterTerm);
return (
<div id="app">
<input type="text" onChange={updateFilterHandler} />
<ContactList contacts={filteredContacts} />
</div>
);
}
Чтобы решить эту проблему, мы можем использовать хук useTransition().
function App() {
const [startTransition, isPending] = useTransition();
const [filterTerm, setFilterTerm] = useState('');
const filteredContacts = filterContacts(filterTerm);
function updateFilterHandler(event) {
startTransition(() => {
setFilterTerm(event.target.value);
});
}
return (
<div id="app">
<input type="text" onChange={updateFilterHandler} />
{isPending && <p>Updating List...</p>}
<ContactList contacts={filteredContacts} />
</div>
);
}
Из useTransition
возвращаются два значения:
startTransition
— это функция. Мы будем использовать его, чтобы сообщить React, какое обновление состояния мы хотим отложить.isPending
— логическое значение. Это React сообщает нам, продолжается ли этот переход в данный момент.
Подпишитесь на меня в Medium или LinkedIn, чтобы узнать больше о React и JS!