React 服務(wù)器功能基礎(chǔ)知識(shí)

• 服務(wù)器組件（React Server Component，RSC）：運(yùn)行在服務(wù)器上并像SSR一樣渲染到客戶端的組件。
• 服務(wù)器功能（又名服務(wù)器操作）：僅在服務(wù)器上運(yùn)行并將信息發(fā)送到客戶端的功能。

指令

• 'use client'：如果您使用的是啟用“服務(wù)器組件”的環(huán)境，則應(yīng)在文件頂部標(biāo)記 use client 以將其標(biāo)記為客戶端組件。
• ‘use server’：如果你考慮改變服務(wù)器上的信息，你應(yīng)該在服務(wù)器組件或文件的函數(shù)體頂部標(biāo)記 use server 指令，以僅在服務(wù)器上操作。

服務(wù)器組件

• RSC 沒有狀態(tài)，也沒有生命周期。您不能在服務(wù)器組件上使用任何鉤子函數(shù)（useState、useEffect 等）。
• RSC 可以有異步函數(shù)。
• RSC可以具有服務(wù)器功能。但您必須在函數(shù)體頂部標(biāo)記“使用服務(wù)器”。
• RSC 可以在服務(wù)器組件和客戶端組件中擁有子組件。
• RSC 無法運(yùn)行任何瀏覽器 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>;
}

服務(wù)器功能

• 定義時(shí)，函數(shù)體或文件中必須有“use server”指令。
• 您可以在函數(shù)體上運(yùn)行任何服務(wù)器功能。
• 您無法在函數(shù)體上運(yùn)行瀏覽器API。
• 您可以在服務(wù)器和客戶端上調(diào)用服務(wù)器函數(shù)。
• 您可以返回有限制的值。檢查下面的指令類型表。

在服務(wù)器組件中聲明服務(wù)器函數(shù)

import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    'use server';

    await db.notes.create();
  }

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

在單獨(dú)的文件中聲明服務(wù)器功能

"use server";

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

在客戶端組件中使用服務(wù)器功能

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 類型從服務(wù)器組件傳遞到客戶端組件。
• use server: Server函數(shù)的返回類型

• 其他類型和實(shí)例不可用。

快樂反應(yīng)！

以上是React 服務(wù)器功能備忘單的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！