Suspense对React的意义在哪里？

可能很多朋友在项目中还没用过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 (
    <>
      loading...

}>
_{count is {count}

);
};其中：
每过一秒会触发一次更新，将状态count更新为count => count + 1
在Sub中会发起异步请求，请求返回前，包裹Sub的Suspense会渲染fallback
假设请求三秒后返回，理想情况下，请求发起前后页面会依次显示为：
// Sub内请求发起前
I am sub, count is 0

count is 0

// Sub内请求发起第1秒
loading...

count is 1

// Sub内请求发起第2秒
loading...

count is 2

// Sub内请求发起第3秒
loading...

count is 3

// Sub内请求成功后
I am sub, request success, count is 4

count is 4
从用户的视角观察，页面中有两个任务在「并发」执行：
请求Sub的任务(观察第一个div的变化)
改变count的任务(观察第二个div的变化)
Suspense带来的「页面中多任务并发执行」感觉，就是Concurrent(并发)在React中的含义。
其实在Async Mode时，已经支持Suspense。但是上面的代码在Async Mode的页面中表现如下：
// Sub内请求发起前
I am sub, count is 0

count is 0

// Sub内请求发起第1秒
loading...

count is 0

// Sub内请求发起第2秒
loading...

count is 0

// Sub内请求发起第3秒
loading...

count is 0

// Sub内请求成功后
I am sub, request success, count is 4

count is 4
从用户的视角观察，当「请求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重度依赖运行时，为了优化性能，「并发」是这套架构下的最优发展方向。

网站栏目：Suspense对React的意义在哪里？

文章地址：http://www.mswzjz.com/qtweb/news12/187012.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
创新互联}