React 服务器功能备忘单

React 服务器功能基础知识

• 服务器组件（React Server Component，RSC）：运行在服务器上并像SSR一样渲染到客户端的组件。
• 服务器功能（又名服务器操作）：仅在服务器上运行并将信息发送到客户端的功能。

指令

• 'use client'：如果您使用的是启用“服务器组件”的环境，则应在文件顶部标记 use client 以将其标记为客户端组件。
• ‘use server’：如果你考虑改变服务器上的信息，你应该在服务器组件或文件的函数体顶部标记 use server 指令，以仅在服务器上操作。

服务器组件

• RSC 没有状态，也没有生命周期。您不能在服务器组件上使用任何钩子函数（useState、useEffect 等）。
• RSC 可以有异步函数。
• RSC可以具有服务器功能。但您必须在函数体顶部标记“使用服务器”。
• RSC 可以在服务器组件和客户端组件中拥有子组件。
• RSC 无法运行任何浏览器 API。
• 您的 RSC 可以将任何类型的 props 传递给 RSC。还可以将 props 类型传递给客户端组件。检查下面的指令类型表。

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

服务器功能

• 定义时，函数体或文件中必须有“use server”指令。
• 您可以在函数体上运行任何服务器功能。
• 您无法在函数体上运行浏览器API。
• 您可以在服务器和客户端上调用服务器函数。
• 您可以返回有限制的值。检查下面的指令类型表。

在服务器组件中声明服务器函数

import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    '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);
}

在客户端组件中使用服务器功能

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

指令中句柄值类型的比较

• 使用客户端：将 prop 类型从服务器组件传递到客户端组件。
• use server: Server函数的返回类型

Type	use client	use server	Notes
string	✅	✅	both string value and iterables are supported.
number	✅	✅
bigint	✅	✅
boolean	✅	✅
undefined	✅	✅
null	✅	✅
Array	✅	✅	Only available in the item of serializable list.
Map	✅	✅	Only available in the item of serializable list.
Set	✅	✅	Only available in the item of serializable list.
TypedArray	✅	✅
ArrayBuffer	✅	✅
Date	✅	✅
object	✅	✅	Support only plain object(object initializers or JSON), null prototype not supported.
Promises	✅	✅	Only available in the serializable list.
ReactNode	✅	❌	Only Server Component can send it to Client Component via props.
FormData	❌	✅	Only server functions can return FormData instance.
symbol	⚠️	⚠️	Only symbols registered in the global Symbol registry via Symbol.for
function	⚠️	⚠️	Only server functions allowed.
class	❌	❌	Any instance objects are not serializable.

• 其他类型和实例不可用。

快乐反应！

以上是React 服务器功能备忘单的详细内容。更多信息请关注PHP中文网其他相关文章！