> For the complete documentation index, see [llms.txt](https://onenesss-organization.gitbook.io/jj-xiaoce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://onenesss-organization.gitbook.io/jj-xiaoce/next.js-kai-fa-zhi-nan/73.-yuan-ma-pian-shou-xie-rsc-shang.md). # 73. 源码篇 ❘ 手写 RSC（上） ### 前言本篇我们从零开始，手写一个 React Server Component 实现。为了帮助大家理解 React Server Component 的出现背景，我们会从最原始的页面实现方式开始讲起，跟随着 React 的发展历史不断完善代码，最终实现 React Server Component。现在就让我们开始吧。 ### 步骤 1：实现一个博客页面首先创建项目，运行以下命令，完成项目初始化： ```javascript mkdir react-rsc && cd react-rsc npm init npm i tsx --save-dev npm i express escape-html react react-dom --save ``` 注：在[《源码篇 | 手写 React SSR》](https://juejin.cn/book/7307859898316881957/section/7309116396511133705)，我们通过 webpack 和自定义配置实现了 JSX 语法的编译。本篇为了更加方便，我们将直接使用 [tsx](https://www.npmjs.com/package/tsx) 进行处理，虽然文件会命名为 `.ts`或 `.tsx`，但我们并不会使用 TypeScript 语法，只是借助其对 JSX 语法的编译功能。新建文件 `index.ts`，代码如下： ```javascript import express from "express"; import { readFile } from "fs/promises"; import escapeHtml from 'escape-html' const app = express(); app.get("/:route(*)", async (req, res) => { const html = await htmlGenerator(); res.setHeader("Content-Type", "text/html"); res.end(html); }); async function htmlGenerator() { const author = "YaYu"; const postContent = await readFile("./posts/hello.txt", "utf8"); return ` My blog

${escapeHtml(postContent)}

`; } app.listen(3000, (err) => { if (err) return console.error(err); return console.log(`Server is listening on 3000`); }); ``` 博客的具体内容我们会读取 `/posts/hello.txt`文件，所以新建 `/posts/hello.txt`，随便写入一些内容，比如： ```javascript

Hello World!

``` 修改 `package.json`文件中的脚本命令，添加代码如下： ```javascript { "scripts": { "start": "tsx watch ./index.ts" } } ``` 运行 `npm start`，此时效果如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71245cefb55944b59b265f25d4adfc61~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1526\&h=1156\&s=79378\&e=png\&b=6689db) > 1. 功能实现：React RSC 实现 > 2. 源码地址： > 3. 下载代码：`git clone -b react-rsc-1 git@github.com:mqyqingfeng/next-app-demo.git` 效果上，我们实现的是一个博客页面的简化版，顶部是导航栏，底部是页脚，中间是具体的文章内容。技术实现上，我们使用 express 起了一个服务器，在读取了 txt 文件的内容后，通过模板字符串的形式，直接返回了页面 HTML 内容。值得注意的是，当我们读取完 txt 的内容后，使用了 escape-html 对内容进行了转义。这是一种常见的内容安全处理。麻烦的地方在于，所有写入内容的地方，都需要自己添加逻辑处理，难道就没有更加简单、便捷、安全的使用方式呢？ ### 步骤 2：发明 JSX 为了解决这个问题，React 发明了 JSX。你可以把它理解成一种特殊的模板语言。使用 JSX，你可以在 JavaScript 中直接使用 HTML 标签，比如： ```jsx const res = My blog

{postContent}

``` 其中变量使用 `{}`进行包裹。这种语法，无论是 JavaScript 还是 HTML 其实都不能直接识别，所以使用 JSX 语法还需要搭配编译器（比如 Babel）使用，Babel 会将代码编译成如下形式： ```javascript import { jsx } from "react/jsx-runtime"; const res = jsx("html", { children: [ jsx("head", { children: jsx("title", { children: "My blog" }) }), jsx("body", { children: [...] })] }); ``` 之所以编译成这种函数执行的形式，是因为我们还需要在函数运行的时候读取外边的变量（就比如上图中的 postContent 和 author）。最终该函数会返回一个描述 HTML 的 JSON 对象（为了方便，我们就简称为 JSX 对象了），类似于如下这种形式： ```javascript // Slightly simplified { $$typeof: Symbol.for("react.element"), // Tells React it's a JSX element (e.g. ) type: 'html', props: { children: [ { $$typeof: Symbol.for("react.element"), type: 'head', props: { children: { $$typeof: Symbol.for("react.element"), type: 'title', props: { children: 'My blog' } } } }, { $$typeof: Symbol.for("react.element"), type: 'body', props: { children: [ { $$typeof: Symbol.for("react.element"), type: 'nav', props: { children: [{ $$typeof: Symbol.for("react.element"), type: 'a', props: { href: '/', children: 'Home' } }, { $$typeof: Symbol.for("react.element"), type: 'hr', props: null }] } }, { $$typeof: Symbol.for("react.element"), type: 'article', props: { children: postContent } }, { $$typeof: Symbol.for("react.element"), type: 'footer', props: { /* ...And so on... */ } } ] } } ] } } ``` 所以我们写代码的时候，写的是： ```javascript const res = ... ``` 到 JavaScript 具体执行的时候，其实是一个对象： ```javascript const res = { $$typeof: Symbol.for("react.element"), type: 'html', props: { children: [ ... ] } } ``` 但有了描述 HTML 的 JSX 对象还不够，我们还需要一个 render 函数，将 JSX 对象渲染为具体的 HTML，返回给客户端的应该是这个具体的 HTML。我们修改 `index.ts`，代码如下： ```javascript import express from "express"; import { htmlGenerator } from "./generator"; const app = express(); app.get("/:route(*)", async (req, res) => { const html = await htmlGenerator(); res.setHeader("Content-Type", "text/html"); res.end(html); }); app.listen(3000, (err) => { if (err) return console.error(err); return console.log(`Server is listening on 3000`); }); ``` 新建 `generator.tsx`，代码如下： ```javascript import { readFile } from "fs/promises"; import React from 'react'; import { renderJSXToHTML } from './utils' export async function htmlGenerator() { const author = "YaYu"; const postContent = await readFile("./posts/hello.txt", "utf8"); let jsx = My blog

{ postContent }

return renderJSXToHTML(jsx); } ``` 这里我们直接使用了 JSX 语法，tsx 会帮助我们进行编译，我们就不需要引入 Webpack 和 Babel 来处理了。新建 `utils.ts`，代码如下： ```javascript import escapeHtml from 'escape-html' export function renderJSXToHTML(jsx) { if (typeof jsx === "string" || typeof jsx === "number") { return escapeHtml(jsx); } else if (jsx == null || typeof jsx === "boolean") { return ""; } else if (Array.isArray(jsx)) { return jsx.map((child) => renderJSXToHTML(child)).join(""); } else if (typeof jsx === "object") { if (jsx.$$typeof === Symbol.for("react.element")) { let html = "<" + jsx.type; for (const propName in jsx.props) { if (jsx.props.hasOwnProperty(propName) && propName !== "children") { html += " "; html += propName; html += "="; html += `"${escapeHtml(jsx.props[propName])}"`; } } html += ">"; html += renderJSXToHTML(jsx.props.children); html += ""; html = html.replace(/className/g, "class") return html; } else throw new Error("Cannot render an object."); } else throw new Error("Not implemented."); } ``` renderJSXToHTML 的代码并不复杂，简单的来说，就是不断判断 jsx 对象节点的类型，递归处理，最终拼接得到一个 HTML 字符串。运行 `npm start`，此时效果不变： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a7720bcef104226ac5a9602c63ee52e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1526\&h=1156\&s=79378\&e=png\&b=6689db) > 1. 功能实现：React RSC 实现 > 2. 源码地址： > 3. 下载代码：`git clone -b react-rsc-2 git@github.com:mqyqingfeng/next-app-demo.git` ### 步骤 3：发明组件这里我们写的是一篇博客页面，但其实每个博客页面内容都是相似的，有着相同的顶部导航和页脚，为了代码能够复用，React 引入了组件的概念，将重复的内容抽离成一个组件，用到的地方直接引入使用即可。我们来实现一下，新建 `components.tsx`，代码如下： ```javascript import React from 'react'; export function BlogPostPage({ postContent, author }) { return ( My blog

{ postContent }