本文档概述了 React 服务器组件 (RSC) 和服务器函数的核心概念及使用方法。
示例:在服务器组件中读取并渲染 Markdown 文件
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>; }
示例:在服务器组件中声明服务器函数
import Button from './button'; function EmptyNote() { async function createNoteAction() { // 服务器函数 'use server'; await db.notes.create(); } return <Button onClick={createNoteAction} />; }
示例:在独立文件中声明服务器函数
"use server"; export async function updateName(name) { if (!name) { return { error: 'name is required' }; } await db.users.updateName(name); }
示例:在客户端组件中使用服务器函数
"use client"; import { updateName } from './actions'; function UpdateName() { return ( <form action={updateName}> <input name="name" type="text" /> </form> ); }
下表总结了 use client 和 use server 上下文中支持的数据类型:
类型 | `use client` | `use server` | 备注 |
---|---|---|---|
字符串 | ✅ | ✅ | 支持字符串值和可迭代对象。 |
数字 | ✅ | ✅ | |
BigInt | ✅ | ✅ | |
布尔值 | ✅ | ✅ | |
undefined | ✅ | ✅ | |
null | ✅ | ✅ | |
数组 | ✅ | ✅ | 仅限于可序列化列表的项。 |
Map | ✅ | ✅ | 仅限于可序列化列表的项。 |
Set | ✅ | ✅ | 仅限于可序列化列表的项。 |
TypedArray | ✅ | ✅ | |
ArrayBuffer | ✅ | ✅ | |
Date | ✅ | ✅ | |
对象 | ✅ | ✅ | 仅支持普通对象(对象初始化器或 JSON),不支持 null 原型。 |
Promise | ✅ | ✅ | 仅限于可序列化列表的项。 |
React 节点 | ✅ | ❌ | 只有服务器组件可以通过 props 将其传递到客户端组件。 |
FormData | ❌ | ✅ | 只有服务器函数才能返回 FormData 实例。 |
Symbol | ⚠️ | ⚠️ | 仅支持通过 `Symbol.for` 注册到全局 Symbol 注册表中的 Symbol。 |
函数 | ⚠️ | ⚠️ | 仅允许服务器函数。 |
类 | ❌ | ❌ | 任何实例对象都是不可序列化的。 |
其他类型和实例对象不可用。
希望以上信息对您有所帮助!
以上就是React 服务器功能备忘单的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号