React 服务器端功能详解
本文档概述了 React 服务器组件 (RSC) 和服务器函数的核心概念及使用方法。
核心概念
服务器组件 (RSC): 在服务器端运行并渲染为客户端 HTML 的组件。类似于服务器端渲染 (SSR)，但效率更高。 服务器函数 (服务器操作): 仅在服务器端执行，并将数据传递给客户端的函数。关键指令
use client：用于标记客户端组件。在启用 RSC 的环境中，此指令必须位于文件顶部。 use server：用于标记服务器函数。此指令必须位于服务器组件的函数体或独立服务器函数文件的顶部。服务器组件
RSC 没有状态或生命周期方法。无法在 RSC 中使用诸如 useState、useEffect 等 Hook。 RSC 可以包含异步函数。 RSC 可以调用服务器函数，但必须在函数体顶部使用 use server 指令。 RSC 可以包含服务器组件和客户端组件作为子组件。 RSC 无法直接访问浏览器 API。 RSC 可以接收任何类型的 props，并将其传递给客户端组件。 下表列出了支持的 prop 类型。示例：在服务器组件中读取并渲染 Markdown 文件
1
2
3
4
5
6
7
8
9
import marked from marked; // 不包含在打包文件中
import sanitizeHtml from sanitize-html; // 不包含在打包文件中
async function page({ page }) {
// 注意：在构建应用程序时，*渲染期间*加载。
const content = await file.readFile(`${page}.md`);
return <div>{sanitizeHtml(marked(content))}</div>;
}
服务器函数
定义服务器函数时，必须在函数体或文件中使用 use server 指令。 服务器函数可以在服务器端执行任何操作。 服务器函数无法访问浏览器 API。 服务器函数可以在服务器端和客户端调用。 服务器函数的返回值类型有限制。请参考下表。示例：在服务器组件中声明服务器函数
1
2
3
4
5
6
7
8
9
10
11
12
import Button from ./button;
function EmptyNote() {
async function createNoteAction() {
// 服务器函数
use server;
await db.notes.create();
}
return <Button onClick={createNoteAction} />;
}
示例：在独立文件中声明服务器函数
1
2
3
4
5
6
7
8
"use server";
export async function updateName(name) {
if (!name) {
return { error: name is required };
}
await db.users.updateName(name);
}
示例：在客户端组件中使用服务器函数
1
2
3
4
5
6
7
8
9
10
11
"use client";
import { updateName } from ./actions;
function UpdateName() {
return (
<form action={updateName}>
<input name="name" type="text" />
</form>
);
}
数据类型兼容性
下表总结了 use client 和 use server 上下文中支持的数据类型：
其他类型和实例对象不可用。
希望以上信息对您有所帮助!
以上就是React 服务器功能备忘单的详细内容，更多请关注php中文网其它相关文章！