React 服务器功能备忘单-js教程-PHP中文网

React 服务器功能备忘单

DDD

发布： 2024-12-19 16:45:35

原创

588人浏览过

react 服务器功能备忘单

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 文件

<code class="javascript">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>;
}</code>

登录后复制

服务器函数

定义服务器函数时，必须在函数体或文件中使用 'use server' 指令。
服务器函数可以在服务器端执行任何操作。
服务器函数无法访问浏览器 API。
服务器函数可以在服务器端和客户端调用。
服务器函数的返回值类型有限制。请参考下表。

示例：在服务器组件中声明服务器函数

<code class="javascript">import Button from './button';

function EmptyNote() {
  async function createNoteAction() {
    // 服务器函数
    'use server';

    await db.notes.create();
  }

  return <Button onClick={createNoteAction} />;
}</code>

登录后复制

示例：在独立文件中声明服务器函数

<code class="javascript">"use server";

export async function updateName(name) {
  if (!name) {
    return { error: 'name is required' };
  }
  await db.users.updateName(name);
}</code>

登录后复制

示例：在客户端组件中使用服务器函数

JoinMC智能客服

JoinMC智能客服，帮您熬夜加班，7X24小时全天候智能回复用户消息，自动维护媒体主页，全平台渠道集成管理，电商物流平台一键绑定，让您出海轻松无忧！

查看详情

<code class="javascript">"use client";

import { updateName } from './actions';

function UpdateName() {
  return (
    <form action={updateName}>
      <input name="name" type="text" />
    </form>
  );
}</code>

登录后复制

数据类型兼容性

下表总结了 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。
函数	⚠️	⚠️	仅允许服务器函数。
类	❌	❌	任何实例对象都是不可序列化的。