热门系统产品
电商交易类产品
业务协同系统产品
渠道/经销商产品
其他产品服务
仓储物流产品
没有你合适的?
我要定制 >

React 的未来:服务端组件

发布时间: 2021-03-24 文章分类: 技术干货
阅读量: 0

电商商城系统

服务端组件是什么?

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

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

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

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

服务端组件哪些优势?

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

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

避免了不必要的客户端和服务端之间的交互,因此性能更快。允许一些类库可以直接运行在服务端,因此减小了客户端包文件的大小,除此之外,服务端组件还给开发过程带来了更好的体验,特别是在代码切割上:

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

React 的未来:服务端组件

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

React 的未来:服务端组件

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

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

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

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

React 的未来:服务端组件

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

注意事项

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

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

React 的未来:服务端组件

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

接下来是什么?

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

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

 

文章来源:medium,作者:Donovan So;

【数商云www.shushangyun.com】致力于提供企业级的电商平台服务,长期为大中型企业打造数据化、商业化、智能化的电商网站建设解决方案,同时我们还提供B2B交易系统、B2B2C多用户商城系统、B2C电子商务系统、跨境进口电商平台、供应链管理系统、SRM供应商管理系统、SCM系统、渠道管理系统等一系列系统定制开发服务,通过大数据、云计算等新技术协助企业打造供应端—渠道端—营销端—数据端等全链数字化运营体系,提升企业运营效益与智慧数字化商业转型。

点赞 | 0

数商云是一家全链数字化运营服务商,专注于提供SCM供应链管理/企业采购管理/SRM供应商管理/经销商等管理系统,B2B/S2B/S2C/B2B2C/B2C等电商系统,从“供应链——生产运营——销售市场”端到端的全链数字化产品和方案,致力于通过数字化和新技术为企业创造商业数字化价值。

马上扫码获取产品资料
马上扫码获取产品资料
相关文章

评论

剩余-200
发表
填写以下信息, 免费获取方案报价
姓名
手机号码
企业名称
  • 建筑建材
  • 化工
  • 钢铁
  • 机械设备
  • 原材料
  • 工业
  • 环保
  • 生鲜
  • 医疗
  • 快消品
  • 农林牧渔
  • 汽车汽配
  • 橡胶
  • 工程
  • 加工
  • 仪器仪表
  • 纺织
  • 服装
  • 电子元器件
  • 物流
  • 化塑
  • 食品
  • 房地产
  • 交通运输
  • 能源
  • 印刷
  • 教育
  • 跨境电商
  • 旅游
  • 皮革
  • 3C数码
  • 金属制品
  • 批发
  • 研究和发展
  • 其他行业
需求描述
填写以下信息马上为您安排系统演示
姓名
手机号码
你的职位
企业名称

恭喜您的需求提交成功

尊敬的用户,您好!

您的需求我们已经收到,我们会为您安排专属电商商务顾问在24小时内(工作日时间)内与您取得联系,请您在此期间保持电话畅通,并且注意接听来自广州区域的来电。
感谢您的支持!

您好,我是您的专属产品顾问
扫码添加我的微信,免费体验系统
(工作日09:00 - 18:00)
专属顾问图片
电话咨询 (工作日09:00 - 18:00)
客服热线: 4008 868 127
售前热线: 189 2432 2993
扫码即可快速拨打热线