大家好,我卡颂。
可能很多朋友在项目中还没用过Suspense
,但是Suspense
是React
未来发展非常重要的一环。
本文会讲解Suspense
对于React
的意义。
欢迎加入人类高质量前端框架群,带飞
React的迭代过程
React
从v16到v18主打的特性经历了三次大的变化:
- v16:Async Mode(异步模式)
- v17:Concurrent Mode(并发模式)
- v18:Concurrent Render(并发更新)
要了解这三次变化的意义,需要先了解React
中一个很容易混淆的概念 —— render
(渲染)。
ClassComponent
的render
函数执行时被称为render
:
class App extends Component {
render() {
// ...这是render函数
}
}
而将render
的结果渲染到页面的过程,被称为commit
。
Async Mode
的目的是为了让render
变为异步、可中断的。
Concurrent Mode
的目的是让commit
在用户的感知上是并发的。
由于Concurrent Mode
包含breaking change
,所以v18
提出了Concurrent Render
,减少开发者迁移的成本。
那么让commit在用户的感知上是并发的是什么意思呢?
“并发”的意义
说到并发,就不得不提Suspense
。考虑如下代码:
const App = () => {
const [count, setCount] = useState(0);
useEffect(() => {
setInterval(() => {
setCount(count => count + 1);
}, 1000);
}, []);
return (
<>
<Suspense fallback={<div>loading...</div>}>
<Sub count={count} />
</Suspense>
<div>count is {count}</div>
</>
);
};
其中:
- 每过一秒会触发一次更新,将状态
count
更新为count => count + 1
- 在
Sub
中会发起异步请求,请求返回前,包裹Sub
的Suspense
会渲染fallback
假设请求三秒后返回,理想情况下,请求发起前后页面会依次显示为:
// Sub内请求发起前
<div class=“sub”>I am sub, count is 0</div>
<div>count is 0</div>
// Sub内请求发起第1秒
<div>loading...</div>
<div>count is 1</div>
// Sub内请求发起第2秒
<div>loading...</div>
<div>count is 2</div>
// Sub内请求发起第3秒
<div>loading...</div>
<div>count is 3</div>
// Sub内请求成功后
<div class=“sub”>I am sub, request success, count is 4</div>
<div>count is 4</div>
从用户的视角观察,页面中有两个任务在并发执行:
- 请求
Sub
的任务(观察第一个div
的变化) - 改变
count
的任务(观察第二个div
的变化)
Suspense
带来的页面中多任务并发执行感觉,就是Concurrent
(并发)在React
中的含义。
其实在Async Mode
时,已经支持Suspense
。但是上面的代码在Async Mode
的页面中表现如下:
// Sub内请求发起前
<div class=“sub”>I am sub, count is 0</div>
<div>count is 0</div>
// Sub内请求发起第1秒
<div>loading...</div>
<div>count is 0</div>
// Sub内请求发起第2秒
<div>loading...</div>
<div>count is 0</div>
// Sub内请求发起第3秒
<div>loading...</div>
<div>count is 0</div>
// Sub内请求成功后
<div class=“sub”>I am sub, request success, count is 4</div>
<div>count is 4</div>
从用户的视角观察,当请求Sub的任务执行时,改变count的任务就被冻结了。
这就是为什么被称为Async
(异步)而不是Concurrent
(并发)。
Suspense的意义
可以看到,对于Concurrent
,Suspense
是必不可少的一环。
可以认为,Suspense
的作用是划分页面中需要并发渲染的部分。
比如上例中,通过Suspense
将请求Sub的任务与改变count的任务划分开,从视觉上并发执行。
当明确了Suspense
的意义后,你会发现,React
接下来在做的事,就是不断扩充Suspense
的场景(也就是说将更多场景纳入并发渲染的范畴)。
比如,当前已有的:
React.lazy
- 通过
React
提供的fetch
库改造后的异步请求 useTransition
useDeferredvalue
未来会加入的:
Server Component
Selective Hydration
总结
React
的发展历程是:从同步到异步,再到并发。
当实现并发后,接下来的发展方向将是:不断扩展可以使用并发的场景。
Suspense
的作用是划分页面中需要并发渲染的部分。
这套发展路径从React
诞生伊始就决定了,因为从架构上来说,React
重度依赖运行时,为了优化性能,并发是这套架构下的最优发展方向。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。