Reaksi Baharu yang Dibawa ke Jadual - Dapatkan Pemahaman Yang Jelas

React 19 telah dikeluarkan pada 25 April 2024. Dunia JavaScript berubah dengan pantas sehingga kadangkala berasa sukar untuk mengikutinya. Tetapi apabila perubahan ini bertujuan untuk menjadikan hidup anda sebagai pembangun React lebih mudah, anda patut melihatnya, bukan? Memandangkan React merupakan bahagian penting dalam ekosistem ini, sentiasa dikemas kini adalah satu kemestian.

Bahagian terbaik tentang React 19 ialah ia memfokuskan untuk menjadikan perkara lebih mudah. Kemas kini direka untuk menjadikan pembelajaran React lebih mudah dan membolehkan anda meluangkan lebih banyak masa untuk membuat dan bukannya berurusan dengan persediaan yang rumit. Beberapa ciri baharu benar-benar mengubah permainan dan boleh membuat perubahan besar dalam cara anda bekerja, jadi anda pasti tidak mahu ketinggalan.

Saya sentiasa cuba menerangkan sesuatu dengan cara yang mudah difahami, tanpa melemparkan perkataan yang rumit. Artikel ini tidak terkecuali. Matlamat saya ialah untuk memastikan anda mendapat segala-galanya dengan jelas, jadi mari kita terokai kemas kini hebat dalam React 19 bersama-sama!

Ingat, React 19 belum lagi stabil. Pada masa ini ia dipanggil React Canary. Jadi, perlu diingat bahawa ia sebenarnya tidak disyorkan untuk pengeluaran.

Penyusun Reaksi

Untuk mengoptimumkan aplikasi React kami, kami menggunakan beberapa kaedah terbina seperti useMemo, useCallback atau memo. Ini memberitahu React untuk tidak menyusun kod lagi jika input tidak berubah. Tetapi jika anda terlupa menggunakan penghafalan, ia mengakibatkan pembaziran sumber React dan kuasa pengiraan. Untuk menangani perkara ini, React 19 memperkenalkan React Compiler. Penyusun baharu React ialah bola mata keluaran baharu versi ke-19. Pengkompil baharu mengoptimumkan kod anda di sebalik tabir, jadi anda boleh melepaskan cangkuk ini dan menumpukan pada menulis komponen React yang cantik dan bersih.

Ringkasnya, anda tidak perlu membungkus fungsi anda dengan useMemo atau useCallback untuk prestasi yang dioptimumkan, dan anda juga tidak perlu membungkus komponen anda dengan memo untuk mengelakkan memaparkan semula komponen anda.

Tindakan (gunakan cangkuk Transition)

Mari kita bercakap kosong?!! Pernahkah anda perasan bagaimana cangkuk useTransition hampir tidak disebut sebelum React 19 keluar? Atau adakah hanya saya? Nah, sekurang-kurangnya itulah yang saya perhatikan, terutamanya dalam kalangan Pemaju Muda. Bagaimanapun, izinkan saya memberi anda idea tentang cara ia berfungsi dalam versi sebelumnya dan kemudian kita akan melihat mengapa ciri ini menjadi ciri penting sekarang.

useTransition mengembalikan tatasusunan dengan dua elemen, fungsi startTransition dan isPending boolean. Anda boleh membungkus kemas kini keadaan anda di dalam fungsi startTransition untuk menandakannya sebagai peralihan (kurang kod keutamaan). Ini bermakna bahagian yang dibalut dengan startTransition mula berfungsi selepas tugasan berterusan yang lain selesai.

Dalam React 18, fungsi startTransition tidak menyokong fungsi async secara langsung. Ini adalah had kerana startTransition direka bentuk untuk menandakan kemas kini sebagai keutamaan rendah tetapi tidak dapat mengendalikan logik tak segerak secara asli.

Dalam React 19, had ini telah ditangani. Sekarang, startTransition menyokong fungsi tak segerak, bermakna anda boleh melaksanakan tugas tak segerak di dalamnya (cth., pengambilan data) sambil memastikan kemas kini tersebut ditandakan sebagai peralihan. Penambahbaikan ini membolehkan penggunaan startTransition yang lebih fleksibel dan intuitif, menjadikannya seperti ciri "baharu" walaupun secara teknikalnya adalah penambahbaikan kepada yang sedia ada.

?
Mengikut konvensyen, fungsi yang menggunakan peralihan tak segerak dipanggil "Tindakan".

Sebagai contoh, anda boleh mengendalikan keadaan belum selesai dan ralat dalam useState:

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

React 19 menyokong menggunakan fungsi async dalam peralihan untuk mengendalikan keadaan belum selesai, ralat, borang dan kemas kini optimistik secara automatik. Sebagai contoh, anda boleh menggunakan useTransition untuk mengendalikan keadaan belum selesai untuk anda:

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Peralihan async akan segera menetapkan keadaan isPending kepada benar, membuat permintaan async(s) dan menukar isPending kepada false selepas sebarang peralihan. Ini membolehkan anda memastikan UI semasa responsif dan interaktif semasa data berubah.

Tindakan

Pasukan React menambah sokongan untuk menghantar fungsi sebagai tindakan.

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

Fungsi formAction (anda boleh menamakan apa sahaja) memberi anda data borang dalam parameternya. Setiap medan dilambangkan dengan atribut nama dan oleh itu anda perlu berhati-hati dalam menamakan input. parameter formData sebenarnya adalah objek API Web FormData asli. Anda boleh mengetahuinya di mdn web docs. Satu lagi perkara yang baik ialah anda tidak perlu menggunakan event.preventDefault() kerana ia dikendalikan oleh React.

Apabila Tindakan borang berjaya, React menetapkan semula borang secara automatik. Tetapi jika anda ingin menetapkan semula secara manual, anda boleh memanggil requestFormReset React DOM API baharu.

Cangkuk Baharu: useActionState

?
React.useActionState sebelum ini dipanggil ReactDOM.useFormState dalam keluaran Canary, tetapi ia telah dinamakan semula dan tidak digunakan lagi useFormState.

useActionState menjejaki keadaan komponen, status belum selesai dan menyediakan fungsi tindakan yang dibungkus untuk digunakan dalam bentuk atau mana-mana tempat lain yang mungkin kita mahu lakukan mutasi.

Berikut ialah contoh untuk memecahkannya dengan lebih deskriptif:

import { useActionState } from "react"
import { updateNameInDB } from "../api/user"

export default function App() {
    const [user, formAction, isPending] = useActionState(insertName, {
        name: "John Doe",
        error: null
    })

    async function insertName(prevState, formData){
        try {
            const response = await updateNameInDB(formData.get("name"))
            return {name: response.name}
        }catch(error){
            return {...prevState, error: error.error}
        }
    }

    return (
        <>
            {user?.name && (
                <p>



<p>How this hook works is described with reference to the example:</p>

<ol>
<li><p>The first argument of the useActionState hook is the "Action" function, which is defined here as insertName.</p></li>
<li><p>The second argument is the initial state, which is accessible through the first element of the result array. In this example, the initial state includes name and error, and the state is represented as user in the component.</p></li>
<li><p>The insertName function returns the updated state. If the operation is successful, it updates the name property. If an error occurs, it updates the error property while preserving the rest of the previous state.</p></li>
<li>
<p>The result of the useActionState hook is an array with three elements:</p>

<ul>
<li>The current state (user): Reflects the latest state of the data.</li>
<li>A dispatchable function (formAction): Triggers the action when called, as seen in the form element's action attribute.</li>
<li>A pending state (isPending): Tracks whether the action is currently in progress, useful for managing transitions or loading indicators.</li>
</ul>
</li>
</ol>

<h2>
  
  
  New Hook: useOptimistic
</h2>

<p>When it’s performing a data mutation and to show the final state right after the user instructs (could be a tap on a button) or you could say optimistically while the async request is underway, you need to use this hook. Here is a demonstration how you can do this:<br>
</p>

<pre class="brush:php;toolbar:false">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>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

Kait useOptimistic akan segera memaparkan optimisticName semasa permintaan updateName sedang dijalankan. Apabila kemas kini selesai React akan memasukkan nilai yang dikemas kini dalam currentName atau jika kemas kini mendapat ralat, React akan bertukar semula secara automatik kepada nilai currentName.

Cangkuk Baharu: useFormStatus

useFormStatus hook membantu anda menjejaki penyerahan borang anda. Tunggu sebentar?! adakah ia satu lagi cangkuk untuk menjejaki peralihan async? baik jawapannya adalah 'ya' dan 'tidak' kedua-duanya. Memandangkan anda telah mempelajari cangkuk useActionState, anda boleh mengatakan ini adalah cangkuk lain untuk menjejak peralihan asinkron. Tetapi useFormStatus tidak menyebabkan sebarang tindakan berlaku, sebaliknya ia memberikan maklumat status penyerahan borang terakhir.

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Nah, saya akan katakan perkara paling penting untuk diperhatikan di sini ialah useFormStatus hook sebenarnya berasal dari react-dom, bukan react.

useFormStatus membaca status

seolah-olah borang itu adalah pembekal Konteks. Untuk mendapatkan maklumat status, komponen Hantar mesti dipaparkan dalam . The Hook mengembalikan maklumat seperti harta yang belum selesai yang memberitahu anda jika borang dihantar secara aktif.

Dalam contoh di atas, Hantar menggunakan maklumat ini untuk melumpuhkan menekan semasa borang diserahkan.

API baharu: gunakan

anda boleh membaca janji dengan menggunakan, dan React akan Menggantung Komponen sehingga janji itu diselesaikan:

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Contoh di atas menunjukkan kes penggunaan API penggunaan. 'Komen' ialah komponen yang menggunakan janji yang dipanggil 'komenPromise'. Janji itu digunakan oleh API penggunaan baharu yang menjadikannya menggantung komponen. Ngomong-ngomong, anda perlu membalut komponen dengan Suspense fallback.

API penggunaan mempunyai had yang mesti anda ketahui. Hadnya ialah setiap kali penggunaan API yang mengandungi komponen memaparkan semula ia mencipta janji lain yang membawa kepada prestasi buruk. Jadi, pada asasnya ia tidak mempunyai mekanisme caching. Berikut ialah nota berhati-hati mereka dari blog keluaran:

gunakan API membaca data daripada konteks juga. Sebagai contoh, untuk membaca nilai konteks, kita hanya lulus konteks untuk digunakan(), dan fungsi merentasi pepohon komponen untuk mencari penyedia konteks terdekat.

Tidak seperti useContext() Hook untuk membaca konteks, fungsi use() boleh digunakan dalam syarat dan gelung dalam komponen kami!

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

ref sebagai prop (Tiada forwardRef)

Dalam React 19, anda boleh menghantar rujukan sama seperti mana-mana prop lain yang membawa kepada penamatan forwardRef . Ini menyelaraskan kod komponen anda dan memudahkan pengendalian ref. ?

import { useActionState } from "react"
import { updateNameInDB } from "../api/user"

export default function App() {
    const [user, formAction, isPending] = useActionState(insertName, {
        name: "John Doe",
        error: null
    })

    async function insertName(prevState, formData){
        try {
            const response = await updateNameInDB(formData.get("name"))
            return {name: response.name}
        }catch(error){
            return {...prevState, error: error.error}
        }
    }

    return (
        <>
            {user?.name && (
                <p>



<p>How this hook works is described with reference to the example:</p>

<ol>
<li><p>The first argument of the useActionState hook is the "Action" function, which is defined here as insertName.</p></li>
<li><p>The second argument is the initial state, which is accessible through the first element of the result array. In this example, the initial state includes name and error, and the state is represented as user in the component.</p></li>
<li><p>The insertName function returns the updated state. If the operation is successful, it updates the name property. If an error occurs, it updates the error property while preserving the rest of the previous state.</p></li>
<li>
<p>The result of the useActionState hook is an array with three elements:</p>

<ul>
<li>The current state (user): Reflects the latest state of the data.</li>
<li>A dispatchable function (formAction): Triggers the action when called, as seen in the form element's action attribute.</li>
<li>A pending state (isPending): Tracks whether the action is currently in progress, useful for managing transitions or loading indicators.</li>
</ul>
</li>
</ol>

<h2>
  
  
  New Hook: useOptimistic
</h2>

<p>When it’s performing a data mutation and to show the final state right after the user instructs (could be a tap on a button) or you could say optimistically while the async request is underway, you need to use this hook. Here is a demonstration how you can do this:<br>
</p>

<pre class="brush:php;toolbar:false">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>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

Pasukan React telah memutuskan untuk membuat forwardRef ditamatkan dalam versi yang akan datang.

Komponen Pelayan Bertindak balas

Sebenarnya, ketahui bahawa Komponen Pelayan Bertindak balas (RSC) ialah ciri Reaksi yang menyokong pemaparan sebelah pelayan, tetapi rangka kerja seperti Next.js telah menerima RSC dan menyepadukannya dengan lancar ke dalam aliran kerja mereka. Jika anda pendatang baru dalam ekosistem, jelaskan perkara ini terlebih dahulu untuk mengkaji mekanismenya.

Komponen Pelayan React ialah keupayaan baharu yang diperkenalkan dalam React 19 yang membolehkan kami mencipta komponen React tanpa negara yang berjalan pada pelayan.

Memandangkan Komponen Pelayan React boleh dijalankan pada pelayan web, ia boleh digunakan untuk mengakses lapisan data tanpa perlu berinteraksi dengan API!

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Dengan ini, kami tidak perlu mendedahkan titik akhir API atau menggunakan logik pengambilan sisi klien tambahan untuk memuatkan data terus ke dalam komponen kami. Semua pengendalian data dilakukan pada pelayan.

Perlu diingat bahawa Komponen Pelayan dijalankan pada pelayan dan bukan penyemak imbas. Akibatnya, mereka tidak dapat menggunakan API komponen React tradisional seperti useState. Untuk memperkenalkan interaktiviti kepada tetapan Komponen Pelayan React, kami perlu memanfaatkan Komponen Pelanggan yang melengkapkan Komponen Pelayan untuk mengendalikan interaktiviti.

Apabila bekerja dengan Komponen Pelayan React, "gunakan klien" menandakan bahawa komponen tersebut ialah Komponen Pelanggan, yang bermaksud ia boleh mengurus keadaan, mengendalikan interaksi pengguna dan menggunakan API khusus penyemak imbas. Arahan ini secara eksplisit memberitahu rangka kerja dan pengikat React untuk merawat komponen ini secara berbeza daripada Komponen Pelayan, yang tidak mempunyai kewarganegaraan dan dijalankan pada pelayan.

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Sebaliknya, Komponen Pelayan Bertindak balas adalah lalai jadi kami tidak menyatakan "guna pelayan" di bahagian atas fail Komponen Pelayan. Sebaliknya, "guna pelayan" hanya boleh digunakan untuk menandakan fungsi bahagian pelayan yang boleh dipanggil daripada Komponen Pelanggan.

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

Saya rasa contoh ini menjelaskannya dengan baik.

Kesimpulan

React 19 masih dipanggil React Canary. Jadi, ia bukan idea yang baik untuk menggunakannya untuk pengeluaran. Tetapi terima masa depan dengan React 19 dan jadikan pengalaman pembangunan anda lebih lancar dan menyeronokkan.

Atas ialah kandungan terperinci Reaksi Baharu yang Dibawa ke Jadual - Dapatkan Pemahaman Yang Jelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!