关于javascript: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 (
    <>
      <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>

从用户的视角察看，页面中有两个工作在并发执行：

1. 申请Sub的工作（察看第一个div的变动）
2. 扭转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重度依赖运行时，为了优化性能，并发是这套架构下的最优倒退方向。