React Panduan Komprehensif

React 19 ada di sini! ? Dalam artikel ini, kami akan meneroka ciri baharu dan penambahbaikan dalam React 19. Mari kita selami!

Perkara Baharu dalam React 19

React 19, keluaran utama terbaharu daripada pasukan React, dilengkapi dengan beberapa ciri terobosan dan peningkatan yang direka untuk menjadikan proses pembangunan lebih cekap dan aplikasi yang dihasilkan lebih pantas dan berkuasa. Keluaran ini terus dibina berdasarkan asas kukuh yang diletakkan oleh pendahulunya, memperkenalkan kemas kini penting kepada rangka kerja teras. Dalam blog ini, kami akan meneroka ciri utama React 19, termasuk Pengkompil React, Komponen Pelayan dan Tindakan Pelayan baharu, cangkuk dan API baharu, dan banyak lagi!

Penyusun React

Salah satu ciri yang paling menarik dalam React 19 ialah React Compiler baharu, juga dikenali sebagai React Fizz. Pengkompil ini direka bentuk untuk mengoptimumkan prestasi aplikasi React dengan menjana kod JavaScript yang sangat cekap. React Compiler menukar kod JSX dan JavaScript anda kepada JavaScript yang sangat dioptimumkan yang boleh dilaksanakan dengan lebih pantas, dengan penggunaan memori yang lebih baik dan kurang overhed. Ini masih dalam mod percubaan, tetapi ia adalah ciri yang menjanjikan yang mungkin akan menjadi pengubah permainan untuk pembangun React. Ia berfungsi dengan JavaScript biasa dan memahami Peraturan Reaksi, jadi anda tidak perlu menulis semula sebarang kod untuk menggunakannya.

Apa yang pengkompil lakukan?

Untuk mengoptimumkan aplikasi, React Compiler secara automatik menghafal komponen dan cangkuk, dan ia juga mengoptimumkan proses pemaparan. Ini bermakna React hanya akan memaparkan semula komponen yang sebenarnya telah berubah, bukannya memaparkan semula keseluruhan pepohon komponen. Ini boleh membawa kepada peningkatan prestasi yang ketara, terutamanya untuk aplikasi yang besar dan kompleks.

Jika pangkalan kod anda sudah dihafal dengan baik, anda mungkin tidak menjangkakan untuk melihat peningkatan prestasi utama dengan pengkompil. Walau bagaimanapun, dalam amalan menghafal kebergantungan yang betul yang menyebabkan masalah prestasi adalah sukar untuk diselesaikan dengan tangan. Pengkompil boleh membantu anda dengan itu.

Apakah yang diandaikan oleh pengkompil?

React Compiler menganggap bahawa kod anda:

• Adalah sah, JavaScript semantik
• Ujian bahawa nilai dan sifat nullable/pilihan ditakrifkan sebelum mengaksesnya (contohnya, dengan mendayakan strictNullChecks jika menggunakan TypeScript), iaitu jika (object.nullableProperty) { object.nullableProperty.foo } atau dengan objek rantaian pilihan. nullableProperty?.foo
• Ikut Peraturan React

React Compiler boleh mengesahkan banyak Peraturan React secara statik dan akan melangkau kompilasi dengan selamat apabila ia mengesan ralat.

Komponen Pelayan dan Tindakan Pelayan

Komponen pelayan boleh berjalan pada masa binaan untuk membaca daripada sistem fail atau mengambil kandungan statik, jadi pelayan web tidak diperlukan. Contohnya, anda mungkin mahu membaca data statik daripada sistem pengurusan kandungan.

Komponen pelayan tanpa pelayan

Tanpa Komponen Pelayan, adalah perkara biasa untuk mengambil data statik pada klien dengan Kesan:

// bundle.js
import marked from 'marked'; // 35.9K (11.2K gzipped)
import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)

function Page({page}) {
  const [content, setContent] = useState('');
  // NOTE: loads *after* first page render.
  useEffect(() => {
    fetch(`/api/content/${page}`).then((data) => {
      setContent(data.content);
    });
  }, [page]);

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

Dengan Komponen Pelayan, anda boleh mengambil data statik pada masa binaan:

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

Output yang diberikan boleh dicache dan disajikan secara statik, jadi pelayan tidak perlu menjalankan sebarang JavaScript. Ini boleh menjadi kemenangan besar untuk prestasi, terutamanya pada peranti mudah alih. Apabila apl dimuatkan, ia boleh menunjukkan kandungan serta-merta, tanpa menunggu permintaan rangkaian.

Komponen pelayan dengan pelayan

Komponen Pelayan juga boleh dijalankan pada pelayan. Ini berguna untuk mengambil data yang tidak statik, seperti data khusus pengguna atau data yang kerap berubah. Sebagai contoh, anda mungkin ingin mengambil data khusus pengguna daripada pangkalan data yang biasanya dicapai dengan menggunakan cangkuk useEffect:

// bundle.js
function Note({id}) {
  const [note, setNote] = useState('');
  // NOTE: loads *after* first render.
  useEffect(() => {
    fetch(`/api/notes/${id}`).then(data => {
      setNote(data.note);
    });
  }, [id]);

  return (
    <div>
      <Author id={note.authorId} />
      <p>{note}</p>
    </div>
  );
}

function Author({id}) {
  const [author, setAuthor] = useState('');
  // NOTE: loads *after* Note renders.
  // Causing an expensive client-server waterfall.
  useEffect(() => {
    fetch(`/api/authors/${id}`).then(data => {
      setAuthor(data.author);
    });
  }, [id]);

  return <span>By: {author.name}</span>;
}

Dengan Komponen Pelayan, anda boleh membaca data dan menjadikannya dalam komponen:

import db from './database';

async function Note({id}) {
  // NOTE: loads *during* render.
  const note = await db.notes.get(id);
  return (
    <div>
      <Author id={note.authorId} />
      <p>{note}</p>
    </div>
  );
}

async function Author({id}) {
  // NOTE: loads *after* Note,
  // but is fast if data is co-located.
  const author = await db.authors.get(id);
  return <span>By: {author.name}</span>;
}

Komponen Pelayan boleh dibuat dinamik dengan mengambil semula komponen tersebut daripada pelayan, di mana mereka boleh mengakses data dan membuat semula. Seni bina aplikasi baharu ini menggabungkan model mental “permintaan/tindak balas” mudah bagi Apl Berbilang Halaman yang berteraskan pelayan dengan interaktiviti lancar Apl Halaman Tunggal yang mengutamakan pelanggan, memberikan anda yang terbaik daripada kedua-dua dunia.

Tindakan Pelayan

Apabila Tindakan Pelayan ditakrifkan dengan arahan "penggunaan pelayan", rangka kerja anda secara automatik akan membuat rujukan kepada fungsi pelayan dan menghantar rujukan itu kepada Komponen Pelanggan. Apabila fungsi itu dipanggil pada klien, React akan menghantar permintaan kepada pelayan untuk melaksanakan fungsi dan mengembalikan hasilnya.

Tindakan Pelayan boleh dibuat dalam Komponen Pelayan dan dihantar sebagai prop kepada Komponen Klien, atau ia boleh diimport dan digunakan dalam Komponen Klien.

Creating a Server Action from a Server Component:

// Server Component
import Button from './Button';

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

    await db.notes.create();
  }

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

When React renders the EmptyNote Server Component, it will create a reference to the createNoteAction function, and pass that reference to the Button Client Component. When the button is clicked, React will send a request to the server to execute the createNoteAction function with the reference provided:

"use client";

export default function Button({onClick}) { 
  console.log(onClick); 
  return <button onClick={onClick}>Create Empty Note</button>
}

Importing and using a Server Action in a Client Component:

Client Components can import Server Actions from files that use the "use server" directive:

"use server";

export async function createNoteAction() {
  await db.notes.create();
}

When the bundler builds the EmptyNote Client Component, it will create a reference to the createNoteAction function in the bundle. When the button is clicked, React will send a request to the server to execute the createNoteAction function using the reference provided:

"use client";
import {createNoteAction} from './actions';

function EmptyNote() {
  console.log(createNoteAction);
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  <button onClick={createNoteAction} />
}

New Hooks and APIs

Besides the React Compiler and Server Components, React 19 introduces several new hooks and APIs that make it easier to build complex applications.

useOptimistic

The useOptimistic hook allows you to update the UI optimistically before the server responds. This can make your application feel more responsive and reduce the perceived latency. The hook takes a callback function that performs the optimistic update, and an optional configuration object that specifies the server request to send after the optimistic update.

useFormStatus

The useFormStatus hook allows you to track the status of a form, such as whether it is pristine, dirty, valid, or invalid. This can be useful for displaying feedback to the user, such as error messages or success messages.

useFormState

The useFormState hook allows you to manage the state of a form, such as the values of the form fields and the validity of the form. This can be useful for building complex forms with dynamic validation logic.

This hook requires two arguments: the initial form state and a validation function. The validation function takes the form state as input and returns an object with the validity of each form field.

The new use API

React 19 introduces a new use API that is a versatile way to read values from resources like Promises or context. The use API is similar to the useEffect hook, but it doesn't take a callback function. Instead, it returns the value of the resource, and re-renders the component when the value changes.

const value = use(resource);

Example:

import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

Conclusion - Should You Upgrade to React 19?

React 19 is a major release that introduces several groundbreaking features and enhancements to the core framework. The new React Compiler, Server Components, and Server Actions are designed to make the development process more efficient and the resulting applications faster and more powerful. The new hooks and APIs make it easier to build complex applications and improve the user experience. If you're already using React, upgrading to React 19 is definitely worth considering.

But at the same time it's important to note that React 19 is still in experimental mode, and some features may change before the final release. It's recommended to test your application with React 19 in a non-production environment before upgrading. If you're starting a new project, React 19 is a great choice, as it provides a solid foundation for building modern web applications.

Atas ialah kandungan terperinci React Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!