本文小编为大家详细介绍“ReactSSR架构StreamingRender与SelectiveHydration源码分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“ReactSSR架构StreamingRender与SelectiveHydration源码分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。以下 Demo 使用的 react 及 react-dom 版本为 16.14.0假设我们有如下应用：我们使用 renderToString 来进行服务端渲染：通过浏览器访问，可以看到需要等待比较长的时间页面才显示出所有内容我们换成 renderToNodeStream 再试一试：可以看到浏览器中先显示了一部分内容，然后才显示所有内容这样，当用户访问一个大型的 React 页面时，可以让其尽早地看到一部分内容，从而提供一个比较好的用户体验。其原理主要是利用了 http 的 Transfer-Encoding: chunked 响应头。那么，React 每次返回多少内容呢？通过断点调试可以知道，这个值是 16 KB。但是实际返回的长度可能会略大于 16 KB，因为 React 总是会完整的返回标签，比如 ，而不是拆成两部分 和 li>。为了能够让开发更好的控制流式渲染每次返回的内容，我们可以结合 Suspense，但是由于 16 版本不支持 SSR 使用 Suspense，所以接下来我们换成 v18.2.0 继续我们的实验。假设我们有如下应用，期待的效果是用户先看到 List:Loading，4 秒后显示 List:a。我们先用 renderToNodeStream 试试，可以看到，页面并没有像我们所期待的那样，而是一开始显示空白，4 秒后才显示 List:a，这实际上已经失去 Streaming Render 的功能了，所以这个函数在 React 18 中被标记为了 deprecated，使用 renderToPipeableStream 来替代。我们换成 renderToPipealbeStream 就可以看到我们期望的效果了其原理免费云主机域名也很简单，第一次返回的内容为：第二次返回的内容为：其中 中的代码主要功能是将 Loading 用
这样，React 不用等待整个应用的数据全部准备好才开始返回 HTML 内容给用户了，从而解决了第一个问题：“必须获取到所有数据以后，才能返回内容”。
Selection Hydration
以下 Demo 使用的 react 及 react-dom 版本为 18.2.0
我们改写一下我们的例子，来看看 React 是怎么解决第二个问题的：
importReact,{Suspense}from'react'
constComp=React.lazy(()=>import('./Item'))//Item.js是一个非常大的文件，大于600KB
constApp=()=>{
return(
)
}
exportdefaultApp
这个例子中 Item.js 会被单独打包成一个 chunk，我们仍然使用 renderToPipeableStream 来进行渲染，可以看到在 Item.js 这个 chunk 加载完成前，button 已经完成了注水：
这样，第二个问题：“必须加载到所有 JS 代码后，才能开始进行注水” 也解决了。
为了说明第三个问题，我们先准备一下我们的 Demo：
//App.js
importReact,{Suspense}from'react'
constComp=React.lazy(()=>import('./ExpensiveComp'))
constButton=React.lazy(()=>import('./Button'))
constApp=()=>{
return(
LoadingComp!
}>
LoadingButton!
}>
这样，React 不用等待整个应用的数据全部准备好才开始返回 HTML 内容给用户了，从而解决了第一个问题：“必须获取到所有数据以后，才能返回内容”。以下 Demo 使用的 react 及 react-dom 版本为 18.2.0我们改写一下我们的例子，来看看 React 是怎么解决第二个问题的：这个例子中 Item.js 会被单独打包成一个 chunk，我们仍然使用 renderToPipeableStream 来进行渲染，可以看到在 Item.js 这个 chunk 加载完成前，button 已经完成了注水：这样，第二个问题：“必须加载到所有 JS 代码后，才能开始进行注水” 也解决了。为了说明第三个问题，我们先准备一下我们的 Demo：
这篇文章主要讲解了“springboot怎么使用Redis作缓存”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“springboot怎么使用Redis作缓存”吧！1.依赖与数据库设置2.redis和session…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
