React 伺服器功能基礎(chǔ)知識(shí)

• 伺服器元件（React Server Component，RSC）：運(yùn)行在伺服器上並像SSR一樣渲染到客戶端的元件。
• 伺服器功能（又稱伺服器操作）：僅在伺服器上執(zhí)行並將資訊傳送到客戶端的功能。

指令

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

伺服器元件

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

伺服器功能

• 定義時(shí)，函式體或檔案中必須有「use server」指令。
• 您可以在函數(shù)體上運(yùn)行任何伺服器功能。
• 您無(wú)法在函數(shù)體上執(zhí)行瀏覽器API。
• 您可以在伺服器和客戶端上呼叫伺服器函數(shù)。
• 您可以傳回有限制的值。檢查下面的指令類型表。

在伺服器元件中宣告伺服器函數(shù)

import Button from './Button';

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

    await db.notes.create();
  }

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

在單獨(dú)的檔案中聲明伺服器功能

"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函數(shù)的回傳類型

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

快樂(lè)反應(yīng)！

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