Suspense对React的意义在哪里？
SegmentFault
共 3810字，需浏览 8分钟
·
2022-02-13 12:46
作者：卡颂
简介：《React技术揭秘》作者
来源：SegmentFault 思否社区
大家好，我卡颂。
可能很多朋友在项目中还没用过Suspense，但是Suspense是React未来发展非常重要的一环。
本文会讲解Suspense对于React的意义。
React的迭代过程
React从v16到v18主打的特性经历了三次大的变化：
v16：Async Mode（异步模式） v17：Concurrent Mode（并发模式） v18：Concurrent Render（并发更新）
class App extends Component {
render() {
// ...这是render函数
}
}
“并发”的意义
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的变化）
// 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>
Suspense的意义
React.lazy 通过React提供的fetch库改造后的异步请求 useTransition useDeferredvalue
Server Component Selective Hydration
总结
评论