有件事让我感觉自己真的老了：React 今年已经 10 岁了。
自从 React 首次被引入以来，经历了几次演变。 React 团队并不羞于改变：如果他们发现了更好的问题解决方案，就会采用。
React 团队推出了 React 服务端组件（React Server Components），这是最新的编写范式。 React 组件有史以来第一次可以专门在服务器上运行。
网上对这个概念有太多不理解。许多人对服务端组件是什么、如何工作、有什么好处以及是如何与服务器端渲染等内容结合使用存在很多疑问。
我一直在使用 React 服务端组件进行大量实验，也回答了我自己产生的很多问题。我必须承认，我对这些东西比我预想的要兴奋得多，因为它真的很酷！
今天，我将帮助你揭开 React 服务端组件的神秘面纱，回答你可能对 React 服务端组件存在的许多问题！
由于实际场景中，React 服务端组件通常与服务端渲染（Server Side Rendering，简称 SSR）配合使用，因此预先了解服务端渲染的工作原理会很有帮助。当然，如果你已经很熟悉 SSR 了，则可以跳过本节的学习。
在我 2015 年第一次使用 React 时，那时候的大多数 React 项目都还采用“客户端渲染”策略。
在客户端渲染模式下，用户会先收到下面这样一个比较简单的网页。
<!DOCTYPE html><html> <body> <div id="root"></div> <script src="/static/js/bundle.js"></script> </body></html>bundle.js 包含整个项目初始化和运行阶段的所有代码。包括 React、其他三方依赖以及我们自己的业务代码。
JS 文件下载并解析后，React 会立即介入，准备好渲染应用所需要的 DOM 节点，并插入到空的 <div id="root"> 里。到这里，用户就得到可以交互的页面了。
虽然这个空的 HTML 文档会很快接收，但 JS 文件的下载和解析是需要一些时间的，另外随着我们项目规模的扩大，JS 文件本身的体积可能也在不断变大。
在客户端接收到 HTML 文档，到 JS 文件处理结束的中间阶段，用户通常会面临白屏问题，这种体验就比较糟糕了。
服务端渲染就能有效的避免这种体验。服务端渲染会将我们首屏要展示的 HTML 内容在服务端预先生成，再发送到客户端。这样，客户端在接收到 HTML 时，就能渲染首屏内容，也就不会遇到白屏问题了。
当然，服务端渲染的 HTML 网页同样会包含 <script> 标签，因为发送的首屏内容还需要交由 React 托管，附加交互能力。具体来说：与客户端从头构建 DOM 不同，服务端渲染模式下，React 会利用现有的 HTML 结构进行构建，并为 DOM 节点附加交互能力，以便响应用户操作。这个过程被称为“水合（hydration）”。
我很喜欢 React 核心团队成员 Dan Abramov 对这一过程的通俗解释：
水合（Hydration）就类似使用交互和事件处理程序的“水”浇到“干”的 HTML 上。
JS 包下载后，React 将快速运行我们的整个应用程序，构建 UI 的虚拟草图，并将其“拟合”到真实的 DOM 节点、附加事件处理程序、触发 effect 等。
简而言之，SSR 就是服务器生成初始 HTML，这样用户在等待 JS 处理过程中，不会看到白屏。另外，客户端 React 会接手服务器端 React 的工作，为 DOM 加入交互能力。
本文链接：http://www.28at.com/showinfo-26-82754-0.html我们一起理解 React 服务端组件
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号