专栏首页前端皮小蛋「 重磅 」React Server Components

「 重磅 」React Server Components

背景

2020.12.21 号, Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbåge 联合发布了一项 React 新功能:

React Server Components

并组织了一场专题演讲:

Introducing Zero-Bundle-Size React Server Components

https://www.youtube.com/watch?v=TQQPAU21ZUw

感兴趣的同学可以去看看。

? 需要事先说明的是:

  • React Server Components 仍在研发中。
  • 本着透明的精神,分享这项工作,并期望从 React 社区获得初步反馈。
  • 以后会有很多时间去了解这个技术,现在只是初步了解就好, 不需要立即投入学习。

如果想系统的学习这项技术, 建议的学习路径:

  1. 观看演讲视频
  2. 克隆演示demo,方便你探索React Server组件。
  3. 阅读 RFC(末尾带有FAQ)以获取更深入的技术故障并提供反馈。

OK, 废话不多说, 我们一起去揭开RSC的神秘面纱吧。

本文主要内容:

  • RSC: 动机以及解决的问题
  • RSC: 是什么
  • RSC: 0 打包体积
  • RSC: 自动代码分割
  • RSC: 天然接近后端
  • Q & A

正文

首先,为什么要做 RSC 呢?

一个新事物的出现一定是有原因的。

Dan Abramov 对此做了一些讲解.

先看软件研发中的几个原则:

  • Good
  • Cheap
  • Fast

每一个顶点,都要受其他亮点的制约。

比如,我们既想要成本低, 又想快速完成开发, 那可能在一定程度上要牺牲产品的质量。

那如果我们都想要, 那该怎么办呢?

也就是要达到理想中的样子:

比如, 我们有这样一个页面:

每一个页面都需要用artistId 去做一些请求。

毫无疑问, 这将会产生大量的请求(瀑布请求), 一定程度上增加了维护成本。

那这种牺牲维护成本的做法, 有没有解决方案呢?

当然是有的, 它就是Relay + GraphQL

Relay + GraphQL

然而, 这个组合并不适用于所有的情况, 比如一些大型的公司或者项目, 不让用或者不能用。

再次回顾我们的问题

我们的问题是, 如果组件如果同时发出请求, 会产生瀑布请求, 影响用户体验。

面临的问题

那如果, 这些请求是在返回客户端之前就已经处理好了,就像达到使用 GraphQL 的效果一样。

这样问题不就迎刃而解了吗?

理想的方案

具备这种能力的组件,也就是我们今天的主角:React Server Components.

能在服务端运行的React组件。

RSC 示例

如图, App 中需要展示一个 NoteList:

列表代码:

不过有一句有需要注意:

import NoteList from './NoteList.client';

Client Component 就是普通的 React 组件, 只不过是以.client结尾 。

目的是告诉 React:这个组件只在客户端渲染

代码如下图:

如果想把sideBar 做成RSC组件, 只需要分别编写对应的client 代码即可:

完整代码地址:

http://github.com/reactjs/server-components-demo

感兴趣的可以自己下载下来玩一下。

0 打包体积

比如, 我们要开发一款编辑器应用,引用了一些体积比较大的外部代码:

但是, 如果这部分做成RSC组件的话,就可以做到0 体积打包

为什么呢?

因为这部分是server的代码, 并不会打包进来。

但前提是, 你需要规划好那些是server组件, 哪些是客户端组件。

自动代码分割

通过使用 React.lazy 可以实现组件的动态 import。

之前,这需要我们在切换组件/路由时手动执行。在ServerComponent中,都是自动完成的。

在上面动图中,左侧列表是ServerComponent,当点击其中卡片时,组件对应数据会动态加载。

天然接近后端

这里有一个react-fetch, 不光客户端能跑, 服务端也能跑!

所以可以称为shared component.

容器组件与交互组件

以前,我们的组件都是客户端组件。

按照现在这个划分,那在未来的 React 组件树中, 一定会包含很多客户端组件服务端组件, 如图:

这样,就能很容易的在服务端执行容器组件的渲染逻辑, 在客户端执行交互组件的渲染逻辑。

比如:

在服务端渲染ul中的内容, 而SearchInput 则负责在客户端的交互。

几个 React IO 库

更多进展

Q & A

看到这, 我们的几个疑问就有答案了:

  1. Q: Server Components是什么: A: 能在服务端运行的React组件。
  2. Q: Server Components解决了什么问题? A: Water Fall Requests.
  3. Q: Server Components 好在哪? A: 0 打包体积, 天然接近后端, 自动代码分割。
  4. Q: 这和服务端渲染(SSR)有什么区别? A: 相比SSR将组件在服务端渲染成填充内容的HTML字符串,并在客户端hydrate后使用。 Server Components更像我们的在客户端写的普通组件一样,只不过他的运行环境是服务端。
  5. Q: 现在需要上手吗? A:自己去玩demo吧先~

好了, 内容就这么多, 已经深夜一点了, 大家晚安。

资料链接

  1. https://www.youtube.com/watch?v=TQQPAU21ZUw
  2. https://github.com/reactjs/server-components-demo
  3. https://github.com/reactjs/rfcs/pull/188

本文分享自微信公众号 - 前端皮小蛋(gh_e69260c16440),作者:南山皮小蛋

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-12-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React Server Components

    2020 年的圣诞节前,React 团队放出了 Server Components 的相关消息,而此前,我恰好在研究 SSR(Server-Side Rende...

    ayqy贾杰
  • 干货 | React Server Components 初探

    Sprite 82,喜欢研究各种语言对 web 框架的实现,函数式编程的爱好者,最近在编译原理前端中验证学习到的函数式编程知识。

    携程技术
  • 从react server components聊聊前端渲染的前生今世

    最近React又出了新的特性,react server components,目前还属于开发期,并不稳定。但是,从React的这些动作可以看出,前端在如何渲染页...

    娜姐
  • React Server Components 遇上 Kubernetes,官方 Demo 改造之上云试玩

    官方 Demo:https://github.com/reactjs/server-components-demo

    为少
  • React Server Component 可能并没有那么香

    前段时间 React 团队发布了一项用于解决 React 页面在多接口请求下的性能问题的解决方案 React Server Components[1]。当然该方...

    公众号@魔术师卡颂
  • React RFC Server Components是什么,有啥用

    12月21日,React团队公布了一个新的提案Server Components。

    公众号@魔术师卡颂
  • React 16 Roadmap

    其中,Concurrent Mode(之前叫Async Rendering)无疑是最值得期待的东西,或将引领变革(合作式调度机制可能泛化成为浏览器能力)

    ayqy贾杰
  • 如何看待 React Server Components?(网易云音乐前端团队)

    这个由 React 官方博客[1] 发布于 今天(12-22)凌晨,他们是因为疫情都没法过圣诞了所以索性搞点有意思的?这还仅仅是个研究性质的东西,官方文章甚至简...

    Nealyang
  • A Cold Dive into React Native (Tutorial for Beginners)

    原文:A Cold Dive into React Native (Tutorial for Beginners)

    WindCoder
  • React 学习笔记 1 React 是什么实例JSX 语法React.Component

    A declarative, efficient, and flexible JavaScript library for building user inte...

    一个会写诗的程序员
  • 使用Webpack来做自己的cra脚手架

    现如今的JavaScript已经出了ES6,ES7甚至许多更高的版本,但是有很多浏览器是不支持这些新的语法,所以需要通过Babel 来将你的新语法编译成浏览器可...

    学前端
  • 什么是Server Component?

    Dan 开门见山,丢出了我们业务开发中需要权衡三个点:体验(user experience)、可维护性(maintenance)、性能(performance)...

    落落落洛克
  • Modern Web Development, Design and Deployment

    Modern web development, design and deployment can be effectively described as ev...

    用户4822892
  • Getting started with React Native

    If you are amongst those who have come across the buzz of React Native and are h...

    用户4822892
  • 手把手教你全家桶之React(一)

    用户2145235
  • Hot Reload 究竟是怎么实现的?

    HMR 特性由 webpack 等构建工具提供,并暴露出一系列运行时 API 供应用层框架(如 React、Vue 等)对接:

    ayqy贾杰
  • 使用storybook管理React组件

    2018年10月storybook发布了4.0版本,在UI层支持、构建、移动端、stroy参数等多个方面进行了升级优化。本文已React的UI组件为例,演示如何...

    IMWeb前端团队
  • React服务端渲染与同构实践

    前两年服务端渲染和同构的概念火遍了整个前端界,几乎所有关于前端的分享会议都有提到。在这年头,无论你选择什么技术栈,不会做个服务端渲染可能真的快混不下去了!最近刚...

    IMWeb前端团队
  • Vue.js 首次屈居第二,JavaScript 2020 年度“新起之秀”都有谁?谁是第一呢?

    不平凡的 2020 年体现在了方方面面,就连 JavaScript 的年度“新秀”也出现了 5 年来首次的变化,这次都有哪些项目上榜呢?

    前端达人

扫码关注云+社区

领取腾讯云代金券