共计 2288 个字符，预计需要花费 6 分钟才能阅读完成。
背景
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…
关注我
如果你感觉这篇内容对你挺有启发，那就关注我吧～
更多精彩：
聊聊 ESM、Bundleless、Vite、Snowpack
记一次「有限列表」滚动优化
「面试三板斧」之 代码宰割（上）
「面试三板斧」之缓存 (上)
「面试三板斧」之缓存 (下)
「面试三板斧」之 HTTP（上）
「面试三板斧」之 HTTP（下）
「面试三板斧」之 this
