先来看一下我们想要实现的交互效果，如图所示。
我们在前面学习了 Suspense。Suspense 的 fallback 与子组件内容的显示是一个互斥关系。因此，当我们在请求过程中，需要显示 Loading 时，内容就会被隐藏掉。
<Suspense fallback={<Loading />}> <Albums /></Suspense>之前我们实现的交互效果如下。
这种交互效果其实还可以，但是许多对交互有更高要求的团队，不会接受这样的页面大幅度抖动的交互。
例如在 antd 的 Table 组件中，它们选择的方案是在列表组件上覆盖了一个 Loading，此时的 Loading 效果与列表并非是一个互斥关系。这样的交互体验要比用 Loading 整体替换掉表格要好很多。
所以，在目前学习阶段，我们面临的一个困惑就是，在使用 Suspense + use 来完成功能的同时，又如何优雅的做到这种非互斥的交互效果呢？
我们想要的最佳交互效果氛围两个阶段。
但是以目前学习到的知识点，肯定还做不到这样的效果，因此我们要引入新的概念：useTransition。
useTransition 是 React 专门为并发模式提供的一个基础 hook，它能够帮助我们在不阻塞 UI 渲染的情况下更新状态。意思就是说，我们可以借助 useTransition 将任务的优先级调得比 I/O 的响应低一些。
const [isPending, startTransition] = useTransition()useTransition 的调用不需要参数，他的执行返回两个参数。
isPending：是否还存在等待处理的 transition，表示被降低优先级的更新任务还没有处理完成。
：startTransition：标记任务的优先级为 transition，该优先级低于正常任务更新。它的用法如下，我们会将更新任务在它的回调函数中执行。
function TabContainer() { const [isPending, startTransition] = useTransition(); const [tab, setTab] = useState('about'); function selectTab(nextTab) { startTransition(() => { setTab(nextTab); }); } // ……}在优先级的排序中，被 startTransition 标记的任务比 Suspense fallback 更高一些。因此，我们可以利用这个特性，来避免 fallback 的渲染，当 startTransition 标记的任务执行完成，请求已经完成，此时 fallback 也就得不到渲染的机会了。
这里需要注意的是，标记的任务指的不是 setState ，而是对应的 UI 渲染任务，传递给 startTransition 的回调函数必须是同步函数。
我们可以正常这样使用。
startTransition(() => { // ✅ 在调用 startTransition 中更新状态 setPage('/about');});但是不能在回调函数中使用异步调用。这样会导致并发模式的任务排序出现问题。
startTransition(() => { // ❌ 在调用 startTransition 后更新状态 setTimeout(() => { setPage('/about'); }, 1000);});但是，我们可以把 startTransition 传递给 setTimeout。
setTimeout(() => { startTransition(() => { // ✅ 在调用 startTransition 中更新状态 setPage('/about'); });}, 1000);startTransition(async () => { await someAsyncFunction(); // ❌ 在调用 startTransition 后更新状态 setPage('/about');});await someAsyncFunction();startTransition(() => { // ✅ 在调用 startTransition 中更新状态 setPage('/about');});现在基于前面的知识点，我们来着手解决我们自己案例中的交互体验的提升。先来回顾一下之前的代码。
export default function Index() { const [api, setApi] = useState(getApi) function __clickToGetMessage() { setApi(getApi()) } return ( <div> <div id='tips'>点击按钮获取一条新的数据</div> <button onClick={__clickToGetMessage} disabled={isPending}>获取数据</button> <div className="content"> <Suspense fallback={<div>loading...</div>}> <Item api={api} isPending={isPending} /> </Suspense> </div> </div> )}在这个基础之上，我们只需要引入 useTransition 的使用即可。
export default function Index() { const [api, setApi] = useState(getApi) const [isPending, startTransition] = useTransition() function __clickToGetMessage() { startTransition(() => { setApi(getApi()) }) } ...}setApi 所引发的任务更新被标记为 transition，他的优先级比 fallback 更高，因此此时我们需要等待 setApi 执行完成。isPending 表示是否还有待处理的 transition 任务，在这个案例中，他可以表示请求正在发生，作用与 loading 完全一致。
因此，我们可以将 isPending 传递给子组件，在子组件内部通过 isPending 来设计 loading UI。我们这里将组件的透明度调低。
<Item api={api} isPending={isPending} />const Item = (props) => { const {isPending, api} = props const joke = use(api) return ( <div className='a_value' style={{opacity: isPending ? 0.5 : 1}} >{joke.value}</div> )}最终的演示效果如下：
loading... 字样的出现表示初始化时请求接口。整体变浅表示更新时请求接口。完整的达到了我们的诉求。
我们可以利用同样的方式，在搜索快速输入时做到这个交互。每一个字符的变化，在之前的尝试中，我们都会请求一次接口。因此之前的交互如下：
我们希望如果列表已经显示过一次，那么在搜索过程中，列表就显示旧值，而不用切换到 fallback 的 Loading 组件。
代码的调整与上面的案例几乎一样，如下：
export default function Index() { const [api, setApi] = useState(postApi) const [isPending, startTransition] = useTransition() function __inputChange() { startTransition(() => { api.cancel() setApi(postApi()) }) } ....但是，我们注意观察交互动画，当我们输入完之后，过了很长一段时间，isPending 状态才发生变化。也就是说，在这很长的时间里，一直有 transition 任务在执行。为什么会发生这种事情呢？然后我们观察了一下 network 面板，发现每一个请求都发生了。取消请求的代码并没有生效。
当然，在官方文档中，也提到了，如果我们期望在交互过程中减少冗余请求的发生，我们可以继续使用防抖/节流来解决问题。
本文链接：http://www.28at.com/showinfo-26-93868-0.htmlReact Suspense 进阶用法，结合 useTransition 使用
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 为什么要推荐使用现代化PHP框架？
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
