关于javascript:重磅-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...

感兴趣的同学能够去看看。

???? 须要当时阐明的是：

React Server Components 仍在研发中。
本着通明的精力，分享这项工作，并冀望从 React 社区取得初步反馈。
当前会有很多工夫去理解这个技术，当初只是初步理解就好，不须要立刻投入学习。

如果想零碎的学习这项技术，倡议的学习门路：

观看演讲视频
克隆演示demo，不便你摸索React Server组件。
浏览 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/ser...

感兴趣的能够本人下载下来玩一下。

0 打包体积

比方，咱们要开发一款编辑器利用，援用了一些体积比拟大的内部代码：

然而，如果这部分做成RSC组件的话，就能够做到 0 体积打包：

为什么呢？

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

但前提是，你须要布局好那些是server组件，哪些是客户端组件。

主动代码宰割

通过应用React.lazy能够实现组件的动静import。

之前，这须要咱们在切换组件/路由时手动执行。在ServerComponent中，都是主动实现的。

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

人造靠近后端

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

所以能够称为shared component.

容器组件与交互组件

以前，咱们的组件都是客户端组件。

依照当初这个划分，那在将来的 React 组件树中，肯定会蕴含很多客户端组件和服务端组件，如图：

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

比方：

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

几个 React IO 库

Q & A

看到这，咱们的几个疑难就有答案了：

Q: Server Components是什么：
A: 能在服务端运行的React组件。
Q: Server Components解决了什么问题?
A: Water Fall Requests.
Q: Server Components 好在哪？
A: 0 打包体积，人造靠近后端，主动代码宰割。
Q: 这和服务端渲染（SSR）有什么区别？
A: 相比SSR将组件在服务端渲染成填充内容的HTML字符串，并在客户端hydrate后应用。
Server Components更像咱们的在客户端写的一般组件一样，只不过他的运行环境是服务端。
Q: 当初须要上手吗？
A：本人去玩demo吧先～

好了，内容就这么多，曾经深夜一点了，晚安。

材料链接

https://www.youtube.com/watch...
https://github.com/reactjs/se...
https://github.com/reactjs/rf...

关注我

如果你感觉这篇内容对你挺有启发，那就关注我吧～