20、React 18 新特性：提升性能与用户体验

React 18 新特性：提升性能与用户体验

1. 慢响应以实现快速反馈

默认情况下，React 会渲染出一致的用户界面（UI），所有元素会一起渲染。但有时，通过在不同时间渲染元素来引入不一致性可能会有所帮助。借助并发渲染，我们可以实现这种不一致的 UI 渲染。React 18 引入了过渡（transition）和延迟（deferring）的并发特性。

UI 更新可分为两类：紧急更新和非紧急更新。有时，紧急更新是轻量级的，而非紧急更新则是重量级的。非紧急更新可以暂时搁置，让紧急更新先进行，这能使应用更具响应性和效率。我们可以使用 startTransition API 来实现这一点，非紧急更新被称为过渡。

下面通过一个示例来解释。我们将创建一个应用，用户可以搜索关键词，应用会返回约 10000 条结果。我们会为每个结果设置随机文本。

操作步骤如下：
1. 前往 CodeSandbox，打开之前在 “New Root and the New Way to Render” 部分创建的应用，或者创建一个新的沙盒应用。
2. 将以下代码复制到 App.js 中：

import "./styles.css";
import { useState} from "react";
export default function App() {
  const [text, setText] = useState("");
  const [result, setResult] = useState();
  const h