React之Suspense提出的背景及使用方法是什么

本篇内容主要讲解“React之Suspense提出的背景及使用方法是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“React之Suspense提出的背景及使用方法是什么”吧!假设我们现在有如下一个应用：Loadingarticles…{article.abstract}Loadinguser…该应用是一个用户的个人主页，包含用户的基本信息（例子中只有名字）以及用户的文章列表，并且规定了必须等待用户获取成功后才能渲染其基本信息以及文章列表。 该应用看似简单，但却存在着以下几个问题：”Waterfalls”，意思是文章列表必须要等到用户请求成功以后才能开始渲染，从而对于文章列表的请求也会被用户阻塞，但其实对于文章的请求是可以同用户并行的。”fetch-on-render”，无论是 Profile 还是 Articles 组件，都是需要等到渲染一次后才能发出请求。对于第一个问题，我们可以通过修改代码来优化：Loadingarticles…{article.abstract}Loadinguser…现在获取用户和获取文章列表的逻辑已经可以并行了，但是这样又导致 Articles 组件同其数据获取相关的逻辑分离，随着应用变得复杂后，这种方式可能会难以维护。同时第二个问题 “fetch-on-render” 还是没有解决。而 Suspense 的出现可以很好的解决这些问题，接下来就来看看是如免费云主机域名何解决的。还是上面的例子，我们使用 Suspense 来改造一下：{article.abstract}首先，在 Profile.js 中开始引入 User 和 Articles 的时候就已经开始请求数据了，即 “Render-as-You-Fetch”（渲染的时候请求），且两者是并行的。当渲染到 User 组件的时候，由于此时接口请求还未返回，const user = userResource.read() 会抛出异常：而 Suspense 组件的作用是，当发现其包裹的组件抛出异常且异常为 Promise 对象时，会渲染 fallback 中的内容，即

。等到 Promise 对象 resolve 的时候会再次触发重新渲染，显示其包裹的内容，又因为获取文章列表的时间比用户短，所以这里会同时显示用户信息及其文章列表（具体过程后续会再进行分析）。这样，通过 Suspense 组件，我们就解决了前面的两个问题。Loading user…同时，使用 Suspense 还会有另外一个好处，假设我们现在改变我们的需求，允许用户信息和文章列表独立渲染，则使用 Suspense 重构起来会比较简单：而如果使用原来的方式，则需要修改的地方比较多：可见，使用 Suspense 会带来很多好处。当然，上文为了方便说明，写得非常简单，实际开发时会结合 Relay 这样的库来使用，由于这一款目前还处于试验阶段，所以暂时先不做过多的讨论。Suspense 除了可以用于上面的数据获取这种场景外，还可以用来实现 Lazy Component。我们知道 import('./MyComp') 返回的是一个 Promise 对象，其 resolve 的是一个模块，既然如此那这样也是可以的：甚至，我们可以通过请求来获取 Lazy Component 的代码：这也是我们实现远程组件的基本原理。介绍了这么多关于 Suspense 的内容后，你一定很好奇它到底是如何实现的吧，我们先不研究 React 源码，先尝试自己实现一个 Suspense：其核心原理就是利用了 “Error Boundary” 来捕获子组件中的抛出的异常，且如果抛出的异常为 Promise 对象，则在传入其 then 方法的回调中改变 state 触发重新渲染。接下来，我们还是用上面的例子来分析一下整个过程：我们知道 React 在渲染时会构建 Fiber Tree，当处理到 User 组件时，React 代码中会捕获到异常：其中，异常处理函数 handleError 主要做两件事：其中，throwException 主要是往上找到最近的 Suspense 类型的 Fiber，并更新其 updateQueue：而 completeUnitOfWork(erroredWork) 在React 源码解读之首次渲染流程中已经介绍过了，此处就不再赘述了。render 阶段后，会形成如下所示的 Fiber 结构：之后会进入 commit 阶段，将 Fiber 对应的 DOM 插入到容器之中：注意到 Loading articles... 虽然也被插入了，但确是不可见的。前面提到过 Suspense 的 updateQueue 中保存了 Promise 请求对象，我们需要在其 resolve 以后触发应用的重新渲染，这一步骤仍然是在 commit 阶段实现的：到此，相信大家对“React之Suspense提出的背景及使用方法是什么”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: vue项目打包部署后默认路由不正确怎么解决

本篇内容介绍了“vue项目打包部署后默认路由不正确怎么解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！vue项目本地开发的时候默认路由没问题，例如但是部署以后…