写点什么

React 的未来:服务端组件

  • 2021-03-05
  • 本文字数:1516 字

    阅读完需:约 5 分钟

React的未来:服务端组件


服务端组件是什么?

截至目前,我们对 React 组件的了解只是客户端组件,仅此而已。


然而,React 团队正在试验一个新的想法,那就是将 React 组件区分为两个类型:客户端组件服务端组件。该提案的开头就是使用不同的文件扩展名(.client.js 和.server.js)来区分它们。然而,客户端组件和服务端组件到底是怎么定义的?


  • 首先,客户端组件指的就是现在我们日常开发中使用的 React 组件。

  • 其次是服务端组件,从某种意义上来说它是一个新型组件,该类型的组件会在服务端完成渲染后,再发送到客户端。

服务端组件哪些优势?

乍一看,服务端组件类似于服务端渲染(SSR),实际上,服务端组件的很多优势和服务端渲染也是很类似:

  • 提供了直接访问服务端资源(如:数据库、文件系统、内部的微服务等)的可能,因此开发起来会更容易。

  • 避免了不必要的客户端和服务端之间的交互,因此性能更快

  • 允许一些类库可以直接运行在服务端,因此减小了客户端包文件的大小

 

除此之外,服务端组件还给开发过程带来了更好的体验,特别是在代码切割上:


自动代码切割(例如:为了让客户端实现按需加载,需要将代码切割成一个个的小包),目前为了实现这个功能,React 开发人员需要手动实现如下代码:



未来,服务端组件会自动处理,这就意味着,我们无需特殊代码处理就可以实现此功能:



然而,要想真正体会到服务端组件的强大优势,必须将其与服务端渲染(SSR)进行更细致的比对。

那么,服务端组件和 SSR 有哪些不同呢?

在使用 SSR 时,你需要先在服务端完成 HTML 的渲染,然后再将该 HTML 发送到客户端。然后此过程只会发生在页面的初次访问时(也就是初始化加载的时候)。至此之后,你的 React 应用在数据更新展示等行为表现上和常规的 React 应用没有任何区别。在展示更新之后的数据时,都是要么从客户端发送一个网络请求,要么页面整体刷新,但不管采用哪种方式,都会导致组件的二次渲染和状态丢失,从而影响性能和客户体验。


相对而言,在使用服务端组件时,你的组件在服务端完成渲染,然后通过自定义的协议发送到客户端(如下图)。React 拿到数据时,将新的 UI 整体的合并到客户端 UI 树里面,此过程不会对客户端其他状态产生影响。此过程可以无限次数的执行。React 通过整体 UI 模块更新的方式,达到保持客户端状态的目的,极大的增强了用户体验。



要了解更多的细节可以参考 Dan Abramov 在推特上的这条回复,或者阅读来着 React 数据团队的 Lauren Tan 在 Twwiter 的帖子,或者访问 Mehul Mohan 发布在 freeCodeCamp 上的这篇文章

注意事项

由于服务端组件是静态的、服务端渲染的,因此相对于客户端组件,不可避免的会有些使用限制。

首先,服务端组件不能有任何交互行为(例如:不能使用 useState(),useEffect())。但是你可以通过在服务端组件内部引入客户端组件(客户端组件是允许存在交互行为的)的方式来解决这个问题。例如下面的示例代码就做到了两者兼顾:



其次,由于服务端组件是在服务端完成渲染后通过网络传输给到客户端, 因此服务端组件传输 props 到客户端组件的时候,props 必须被序列化(意味着:可传输的数据只能是字符串、JSON 对象或者 JSX,不能传输 JavaScript 函数)。

接下来是什么?

虽然这一切都很令人兴奋,但该功能仍处于实验阶段。它的 API 和具体实现未来都有变化的可能,因此该特性目前还不能被运用到生产环境。


现在,React 团队正在和 Next.js 团队紧密合作,致力于将服务端组件集成到 React 框架里。同时这里有个基于内测版本的webpack插件和Parcel插件的访谈。


最后,服务端组件将会是一个可选的特性,现有的 React 代码依然可以正常工作,因此开发人员不需要急着采用新功能。


想了解更多关于该特性的信息,我强烈建议你观看这个示例视频或者阅读此规范,感谢阅读此文章!

 

原文链接:The Future of React: Server Components

2021-03-05 16:062849

评论

发布
暂无评论
发现更多内容

VMware Aria Automation Orchestrator 8.18 发布,新增功能概览

sysin

vmware aria

厌倦了黑底白字?用 Go 给终端点颜色瞧瞧!

江湖十年

终端 命令行 Go web #go

VMware ESXi 7.0U3q macOS Unlocker & OEM BIOS 2.7 Dell HPE 联想定制版 9 月更新发布

sysin

esxi dell hpe

VMware ESXi 8.0U3 集成 AQC 网卡定制版更新 OEM BIOS 2.7 支持 Windows Server 2025

sysin

esxi aqc

还不知道这个原则的程序员,要小心了

禅道项目管理

程序员 软件测试 代码规范 测试人员 规范优先原则

SpringBoot3实战:实现接口签名验证

江南一点雨

kafka启动命令

百度搜索:蓝易云

阿里巴巴API:赋能电商创新,革新1688商品详情获取方式

代码忍者

API 测试 pinduoduo API

红旗携“中国之路” 创汽车工业新篇章

编程猫

系统内存管理:虚拟内存、内存分段与分页、页表缓存TLB以及Linux内存管理

百度搜索:蓝易云

华为云技术专家分享4大举措,助力开发者开启鸿蒙原生应用开发

华为云开发者联盟

HarmonyOS 端云协同 ArkTS 开发者、

技术解读GaussDB (for MySQL)流控机制

华为云开发者联盟

GaussDB 流控 MySQL 5.7

重磅发布!国内首部《智能化软件开发落地实践指南》免费下载

华为云开发者联盟

代码开发 大模型 人工智能’ CodeArts

AB Micro850笔记 LD 用户自定义功能块

万里无云万里天

自动化 PLC 工厂运维

攻坚! 930之前中央企业要完成薪酬管理系统建设

用友BIP

MacOS 的跨平台键鼠共享工具synergy for mac

Mac相关知识分享

功能强大的 Android 管理工具Coolmuster Android Assistant for Mac

Mac相关知识分享

AB Micro850笔记 LD 结构化数据

万里无云万里天

自动化 PLC 工厂运维

Illustrator 2024 for Mac(AI2024)

Mac相关知识分享

云栖实录 | MaxCompute 迈向下一代的智能云数仓

阿里云大数据AI技术

大数据 数据仓库 云数据 MaxCompute Data+AI

第七在线7thonline荣耀加冕 斩获“最佳数据洞察平台”与“产业互联网最具发展潜力企业”两项大奖!

第七在线

金川集团:建设世界一流财务管理体系,向万亿营收冲刺

用友BIP

GitHub上 Star 数量最多的 Airtable 开源替代者

NocoBase

GitHub 开源 低代码 Airtable 无代码

触摸板和鼠标增强软件BetterTouchTool for Mac

Mac相关知识分享

ISO 镜像文件制作工具AnyToISO Pro for Mac

Mac相关知识分享

Java(day16):do-while循环语句

百度搜索:蓝易云

Java 性能分析 5 大工具

FunTester

Java开发分析工具:JProfiler 14 for Mac 激活版

你的猪会飞吗

JProfiler 14激活版 JProfiler 14 mac JProfiler 14破解版

鸿蒙 Next 实战: 环境搭建

北桥苏

鸿蒙 鸿蒙Next HarmonyOS NEXT

传统身份安全的局限性

芯盾时代

身份安全 统一身份认证 零信任模型

php中mcrypt_encrypt升级到openssl_encrypt

百度搜索:蓝易云

React的未来:服务端组件_语言 & 开发_Donovan So_InfoQ精选文章