React 18的useTransition()与useDeferredValue()如何合二为一实现高效异步处理？

本文共计1911个文字，预计阅读时间需要8分钟。

目录+前言+什么是Concurrent React？+设置项目+实现+useTransition() + isPending 是做什么的？+前言+React 18 引入了一个关键的新概念，称为Concurrent，它允许并发执行多个状态更新。+并发+同时执行多个状态更新，这可以提升应用的响应性和性能。+

目录

• 前言
• 什么是Concurrent React？
• 设置项目
• 实现 useTransition()
• isPending 是做什么的？

前言

React 18 引入了一个关键的新概念，称为“Concurrent”。

并发涉及同时执行多个状态更新，这可以说是 React 18 中最重要的特性。除了并发之外，React 18 还引入了两个新的钩子，称为 useTransition() 和 useDeferredValue() 钩子。

它们都有助于降低状态更新的优先级，但问题是，何时应该使用它们？

什么是Concurrent React？

根据官方 React18 Docs，并发 React 是:

一种新的幕后机制，使 React 能够同时准备多个版本的 UI。您可以将并发视为一个实现细节——它的价值在于它的特性。

并发可以定义为同时执行大量任务的能力。并发并不是一个特性。