React的未来:服务端组件

科林-Colin 等级 721 0 0
标签: reactJavascript

作者 | Donovan So

译者 | 许学文

策划 | 蔡芳芳

服务端组件和 SSR 有哪些不同?

本文最初发布于 Medium 的 Donovan So 专栏,经 InfoQ 翻译并分享。

服务端组件是什么?

截至目前,我们对 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 团队正在和 Next.js 团队紧密合作,致力于将服务端组件集成到 React 框架里。同时这里有个 基于内测版本的 webpack 插件和 Parcel 插件 的访谈。

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

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

感谢阅读此文章

收藏
评论区

相关推荐

做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
Hook 规则 – React
Hook 规则 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件(https://www.npmjs.com/package/
2020前端面试系列之JSX是什么
**前言** 众所周知React Native开发中,页面View书写布局采用了React 的JSX语法,而在ReactNative面试中可能会遇到有关JSX相关的面试题,今天和大家分享有关JSX的知识,为你的面试助一臂之力。 **JSX的定义** JSX到底是什么?我们先看看\[React官网\](https://reactjs.org/docs/g
2020前端面试系列之JSX是什么
**前言** 众所周知React Native开发中,页面View书写布局采用了React 的JSX语法,而在ReactNative面试中可能会遇到有关JSX相关的面试题,今天和大家分享有关JSX的知识,为你的面试助一臂之力。 **JSX的定义** JSX到底是什么?我们先看看\[React官网\](https://reactjs.org/docs/g
Angular React Vue我应该选择什么?
2017 年比较 Angular、React、Vue 三剑客 ============================== 为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 [Angular](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Flink.juej
Electron整合React使用搭建开发环境
Electron整合React使用搭建开发环境 ----------------------- **博客说明** > 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! #### 简介 用于构建用户界面的 JavaScript 库 #### 步骤 ##### 首先创建React
React Developers的10个超实用神奇工具
![](https://oscimg.oschina.net/oscnet/be7e96e371213baf084f2018a5e0ecd1d6e.jpg) ![](https://oscimg.oschina.net/oscnet/d1f601c7e7175b985b1000f935f5e3191f4.jpg) React是一个用于构建用户界面的Jav
React Native第三方组件和示例链接
以下是React Native的链接,有需要第三方组件或者示例的小伙伴可以收藏一下 01、React Native之Tab-View:https://js.coach/react-native/react-native-tab-view 02、React Native之正在加载Loading条:https://js.coach/react-native/
React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 -- 在前端框架层出不穷的今天,React 以其虚拟 DOM 、组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库。作为 React 体系中的重要组成部分:React Router 也成为开发者首选的路由库,其主要功能是通过管理 url 实现组件的切换和状态的变化。 正文 -- 在 React Router
React 入门实例教程
作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 Ja
React 第一个小游戏(井字棋)知识关键点
**1、React是一个声明式,高效且灵活的用于构建用户界面的JavaScript库** **通过使用组件来告诉React我们希望在屏幕上看到什么。当数据发生变化时,React会高效的更新并重新渲染我们的组件** **2、** **render返回了一个React元素,这是一种对渲染内容的轻量级描述。大多数的React开发者使用了一种名为"JSX"的特
React前端开发入门与实战
**阿里云大学:[React前端开发入门与实战](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fclick.aliyun.com%2Fm%2F1000010022%2F)** 本课程主要讲解React的基础使用技巧及实战案例。 React 是一个用于构建用户界面的 JavaScript
React学习笔记
**React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。** !
阿里巴巴前端练习生学习笔记
字符串引擎和Javascript引擎的区别:是否对于DOM进行全部改变? 相关资料链接• Wiki MVC • Wiki MVVM • Mustach • Handlebars • React • Angular • Vue • Bootstrap • Ant Design • Fusion Des