一篇文章讲清楚React18的新功能：startTransition

哈喽，大家好呀，我是前端理想哥，今天我们来聊聊React18中的新功能：startTransition。

在react中，我们的更新任务分为两种，一种是紧急更新，另外一种是过渡更新，紧急更新指的是用户点击、输入这些交互操作，需要浏览器可以快速响应，过渡更新指的是视图之间的切换，不需要快速响应的。

为了说明什么是startTransition，我们先来看一个需求场景和图中这段代码

// 处理用户输入内容
setInputValue(input);

// 展示用户输入内容的联想结果
setSearchQuery(input);

在图中这段代码中，我们需要完成这样的一个需求场景：用户在input中输入内容，然后我们根据用户输入的内容展示联想结果，通常，在这种情况下，我们为了避免频繁触发，可能会使用防抖节流来处理。

但是，这样做会有个问题，因为用户输入和内容联想都是紧急更新，内容联想这个操作会锁定页面，从而阻止浏览器对于用户输入内容的快速反应，在低性能浏览器中这种问题会更加明显。

对于我们来说，内容联想不应该是紧急更新，浏览器应该优先处理用户输入，内容联想延迟展示也没有问题，所以，这个时候startTransition就出现了。

startTransition可以将你要执行的代码标记为过渡任务，就是低优先级且随时可被打断与重启的任务，我们继续再看下面这段代码

import { startTransition } from 'react';

// 处理用户输入内容
setInputValue(input);

// 标记为过渡任务
startTransition(() => {
  // 展示用户输入内容的联想结果
  setSearchQuery(input);
});

在图中这段代码中，setSearchQuery会被标记为非紧急事件，浏览器会优先处理用户输入内容，如果此刻正在渲染联想的结果，而用户又输入内容了，则浏览器会先中断渲染联想内容，而优先响应用户输入内容

又有同学问了，那我为什么不用setTimeout呢？就像图中这段代码

// 处理用户输入内容
setInputValue(input);

setTimeout(() => {
  // 展示用户输入内容的联 想结果
  setSearchQuery(input);
}, 0);

大家可以看到图中这段代码，为什么不建议你用setTimeout呢 ？

首先，其实startTransition是立即执行的，setTimeout还是延迟执行。startTransition的执行要早于setTimeout。在低性能浏览器中setTimeout这种延迟问题会更加明显。

其次，setTimeout还是会锁定页面，setTimeout中代码执行期间，会阻止浏览器对用户输入的响应，但startTransition是可以被中断的，允许浏览器优先响应用户输入

不过，如果你想作为一个最佳实践，还是建议大家可以去使用useTransition，具体内容大家可以下去了解下。

以上，就是startTransition相关内容，大家在日常开发中如果想要处理一些没那么着急的内容更新，可以去试试startTransition

以上，就是所有内容了，如果大家觉得还不错，欢迎给理想哥一个关注，万分感谢大家。