React 服务器功能备忘单

# Web 开发# JavaScript# 编程# React

React Server 功能基础

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

    • 指令

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

    • 服务器组件

  • RSC 没有状态，也没有生命周期。您不能在服务器组件上使用任何钩子函数（useState、useEffect 等）。
  • RSC 可以具有异步功能。
  • RSC 可以具有服务器功能。但必须在函数主体顶部标记“使用服务器”。
  • RSC 可以在服务器组件和客户端组件中拥有子组件。
  • RSC 无法运行任何浏览器 API。
  • 您的 RSC 可以将任何类型的道具传递给 RSC。也可以将有限制的道具类型传递给客户端组件。请查看下面的指令类型表。
    • 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 
    {sanitizeHtml(marked(content))}
    ;
}

    服务器功能

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

    • 在服务器组件中声明服务器功能

    import Button from './Button';

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

    指令中句柄值类型的比较

  • 使用客户端：将 prop 类型从服务器组件传递到客户端组件。
  • 使用服务器：服务器函数的返回类型
    • 空原型Symbol.for
  • 其余类型和实例不可用。

    • 祝您反应愉快！