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 文件
import marked from 'marked'; // 不包含在打包文件中import sanitizeHtml from 'sanitize-html'; // 不包含在打包文件中async function page({ page }) { // 注意：在构建应用程序时，*渲染期间*加载。 const content = await file.readFile(`${page}.md`); return {sanitizeHtml(marked(content))};}
服务器函数
定义服务器函数时，必须在函数体或文件中使用 'use server' 指令。服务器函数可以在服务器端执行任何操作。服务器函数无法访问浏览器 API。服务器函数可以在服务器端和客户端调用。服务器函数的返回值类型有限制。请参考下表。
示例：在服务器组件中声明服务器函数
import Button from './button';function EmptyNote() { async function createNoteAction() { // 服务器函数 'use server'; await db.notes.create(); } return ;}
示例：在独立文件中声明服务器函数
"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 ( );}
数据类型兼容性
下表总结了 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 服务器功能备忘单的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499763.html
微信扫一扫 
支付宝扫一扫 
