Keluaran Stable React: Perkara Baharu dan Cara Meningkatkan

React 19 secara rasminya stabil dan kini tersedia di npm! Dikemas dengan ciri dan peningkatan, ia direka untuk memperkemas pembangunan, meningkatkan prestasi dan memudahkan pengendalian corak UI biasa. Berikut ialah pandangan menyeluruh tentang perkara baharu dalam React 19 dan cara anda boleh menggunakan ciri ini dalam projek anda.

Tambahan Utama dalam React 19

1. Tindakan dan Peralihan Async

Tindakan memudahkan pengurusan operasi tak segerak seperti mutasi data, keadaan belum selesai, pengendalian ralat dan kemas kini optimistik. Dengan menggunakan useTransition atau cangkuk useActionState baharu, anda boleh:

Kendalikan keadaan belum selesai secara automatik.

Sediakan pengendalian ralat yang lebih baik.

Urus penyerahan borang dengan

elemen menggunakan aksi atau prop formAction.

Contoh: Borang Ringkas dengan useActionState

function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

1. Kemas Kini Optimis dengan useOptimistic

Kait useOptimistic baharu membolehkan anda memberikan maklum balas segera kepada pengguna sambil menunggu respons async.

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <input type="text" name="name" />
    </form>
  );
}

1. gunakan API

API penggunaan membenarkan pemaparan bersyarat bagi janji dan konteks, membolehkan reka bentuk komponen yang lebih fleksibel.

import { use } from 'react';
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

1. Pengurusan Metadata Asli

React 19 menyokong pemaparan

, , dan teg terus dalam komponen, secara automatik mengangkatnya ke bahagian.

function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="author" content="Author Name" />
    </article>
  );
}

1. Pengurusan Lembaran Gaya dan Skrip yang Dipertingkat

React 19 memperkenalkan sokongan terbina dalam untuk:

Lembaran gaya dengan keutamaan terkawal menggunakan .

Skrip async diberikan dalam pepohon komponen, memastikan penyahduplikasian dan susunan pelaksanaan yang betul.

<link rel="stylesheet" href="styles.css" precedence="default" />
<script async src="script.js"></script>

1. Komponen dan Tindakan Pelayan

Komponen Pelayan Bertindak balas kini stabil, membolehkan komponen pemaparan lebih awal daripada masa. Dipasangkan dengan Tindakan Pelayan (didayakan oleh arahan "guna pelayan"), komponen klien boleh memanggil fungsi sebelah pelayan tak segerak dengan lancar.

1. Pengendalian Ralat yang Diperbaiki

React 19 menyatukan pelaporan ralat, memberikan mesej ralat yang ringkas dan boleh diambil tindakan. Pembangun kini boleh menggunakan onCaughtError, onUncaughtError dan onRecoverableError untuk pengendalian ralat berbutir.

1. Rujuk sebagai Prop

Komponen fungsi kini boleh menerima ref sebagai prop, memudahkan kod dengan mengalih keluar keperluan untuk forwardRef.

1. Penghidratan dan Penyepaduan Pihak Ketiga

React 19 mempertingkatkan penghidratan dengan mengendalikan elemen tidak dijangka yang diselitkan oleh sambungan penyemak imbas atau skrip pihak ketiga dengan anggun.

1. Pramuat Sumber

Optimumkan prestasi dengan API pramuat sumber, seperti pramuat dan prainit:

import { preload, preinit } from 'react-dom';
preinit('script.js', { as: 'script' });
preload('font.woff', { as: 'font' });

Cara Menaik taraf

Ikuti Panduan Naik Taraf React 19 (https://react.dev/blog/2024/12/05/react-19) untuk mendapatkan arahan langkah demi langkah. Pertimbangan utama termasuk:

Perubahan pecah (didokumenkan dalam panduan).

Menguji apl anda untuk keserasian.

Mengemas kini kebergantungan yang menggunakan React sebagai kebergantungan rakan sebaya.

Mulakan Hari Ini

Tingkatkan projek anda kepada React 19 melalui npm:

npm pasang react@19 react-dom@19

Terokai dokumentasi rasmi React 19 (https://react.dev/blog/2024/12/05/react-19) untuk mendapatkan cerapan yang lebih mendalam tentang ciri baharu dan amalan terbaik ini.

React 19 mewakili lonjakan ke hadapan, memperkasakan pembangun dengan alatan berkuasa untuk mencipta aplikasi yang dinamik, berprestasi dan boleh diakses. Mula meneroka hari ini!

Atas ialah kandungan terperinci Keluaran Stable React: Perkara Baharu dan Cara Meningkatkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!