69 - 《React 请求机制及其工程化》

说到数据加载机制可能要回到好多年前，那会前端比较关注性能，比如我参与过的淘宝首页和宝贝详情页，都会做垂直的定制优化，让请求再页面最早加载，甚至在前一个页面就预加载。最近几年做中后台，这部分关注少了，直到最近 Remix 和 React 18 Suspense 的出现，这个主题又被社区讨论起，并且越来越清晰了。

总的来说是 3 种加载策略，见图 1。举个例子，比如有 3 个组件，C1、C2、C3，每个组件一个请求，F1、F2、F3。

1、渲染时请求。

这应该是最常见的，就是在组件的 useEffect hooks 里发起请求，比如 swr、react-query、use-request 都属于此类。

useEffect(() => fetch(url).then(() => { … }));

但有个问题是请求和渲染的瀑布问题。前述例子的加载方式是「渲染 C1 ▶ 请求 F1 ▶ 渲染 C2 ▶ 请求 F2 ▶ 渲染 C3 ▶ 请求 F3」。这就很慢了，也不是不能用，看场景，比如中后台场景，大概率不在意这点慢的问题，但前台应用会比较在意。

2、请求后渲染。

基于 1 的优化，把 F1、F2、F3 三个请求前置，用 Promise.a