Helaian cheat ciri pelayan React

Asas ciri Pelayan React

• Komponen Pelayan (Komponen Pelayan Bertindak balas, RSC): Komponen yang berjalan pada pelayan dan menjadikan klien sama seperti SSR.
• Fungsi Pelayan (a.k.a. Tindakan Pelayan): Fungsi yang berjalan pada pelayan sahaja dan menghantar maklumat kepada klien.

Arahan

• 'use client': Jika anda menggunakan persekitaran yang didayakan "komponen pelayan", anda harus menanda use client di bahagian atas fail untuk menandakannya sebagai komponen klien.
• 'gunakan pelayan': Jika anda mempunyai pertimbangan untuk mengubah maklumat pada pelayan, anda harus menandakan arahan penggunaan pelayan di bahagian atas badan fungsi dalam komponen pelayan atau fail untuk beroperasi hanya pada pelayan.

Komponen Pelayan

• RSC bukan stateful mahupun kitaran hayat. Anda tidak boleh menggunakan sebarang fungsi cangkuk (useState, useEffect, dll.) pada komponen pelayan.
• RSC boleh mempunyai fungsi tak segerak.
• RSC boleh mempunyai fungsi pelayan. tetapi anda mesti menandakan 'use server' di bahagian atas badan fungsi.
• RSC boleh mempunyai anak dalam kedua-dua komponen pelayan dan komponen klien.
• RSC tidak boleh menjalankan mana-mana API penyemak imbas.
• RSC anda boleh menghantar prop dari sebarang jenis kepada RSC. juga boleh lulus jenis prop dengan had kepada komponen klien. Semak jadual jenis arahan di bawah.

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>;
}

Fungsi Pelayan

• apabila mendefinisikan, anda mesti mempunyai arahan 'guna pelayan' dalam badan fungsi atau fail.
• Anda boleh menjalankan sebarang ciri pelayan pada badan fungsi.
• Anda tidak boleh menjalankan API penyemak imbas pada badan fungsi.
• Anda boleh memanggil fungsi pelayan pada kedua-dua pelayan dan klien.
• Anda boleh mengembalikan nilai dengan pengehadan. Semak jadual jenis arahan di bawah.

Mengisytiharkan fungsi pelayan dalam komponen pelayan

import Button from './Button';

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

    await db.notes.create();
  }

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

Mengisytiharkan fungsi pelayan dalam fail berasingan

"use server";

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

Menggunakan fungsi pelayan dalam komponen klien

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>;
}

Perbandingan jenis nilai pemegang dalam arahan

• gunakan klien: menghantar jenis prop daripada komponen pelayan kepada komponen klien.
• gunakan pelayan: Jenis pemulangan fungsi Pelayan

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.

• Jenis dan contoh lain tidak tersedia.

Selamat bertindak!

Atas ialah kandungan terperinci Helaian cheat ciri pelayan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!