React Kemas kini baharu

Minggu ini, kita akan bercakap tentang kemas kini dan cangkuk React 19 baharu. Setelah melalui dan menggunakan beberapa kemas kini baharu ini, saya hanya boleh bersetuju bahawa ia telah memudahkan beberapa aktiviti ketat yang dilalui pembangun semasa membina apl, terutamanya aplikasi berkaitan borang interaktif.

Sertai saya dan izinkan kami meneroka beberapa kemas kini baharu ini.

React Compiler: React compiler memilih kod React anda, menterjemahkannya ke dalam kod JavaScript untuk penyemak imbas dan mengurus keadaan komponen atau Antara Muka Pengguna anda. Tindakan tunggal ini membantu mengoptimumkan prestasi aplikasi anda.

Jika anda biasa dengan cangkuk useMemo, cangkuk useCallback dan React.Memo, anda akan faham bahawa ia membantu menghafal (menyimpan nilai atau fungsi untuk kegunaan masa hadapan) komponen anda, jadi mereka tidak perlu mengulang- render apabila tiada perubahan keadaan. Apabila terdapat perubahan dalam keadaan, React memaparkan semula komponen yang dipersoalkan dan anak-anaknya, dan apabila tiada perubahan dalam kod anda, komponen itu kekal seperti mengekalkan memori, nilai dan keadaan sebelumnya dalam komponen atau cangkuk untuk masa hadapan kegunaan; dengan itu mengoptimumkan prestasi komponen anda. Inilah yang dilakukan oleh React Compiler secara automatik, tanpa perlu memanggil mana-mana cangkuk yang disebutkan di atas secara manual.

Tindakan Bentuk: Salah satu kelebihan terbesar menggunakan React ialah pengurusan dan mutasi keadaan, dan ini kebanyakannya berlaku apabila kita menggunakan elemen. Borang membantu kami mencipta dan mengendalikan interaktiviti pengguna dengan lebih berkesan.

Dengan tindakan borang, anda tidak memerlukan pengendali acara seperti onSubmit dan onChange untuk melaksanakan mutasi langsung data, sebaliknya kami boleh lulus tindakan prop kepada elemen

yang menerima fungsi yang mencetuskan acara.

const myFunction = async (formData) => {
  const [name, setName] = useState("")

  const updatedName = await nameChange(formData.get("name"))
     setName(updatedName)
}

<form action={myFunction}>
   <input type="name" 
          name="name" _// this is important to be able to get our data //_
   />
   <button type="submit">Submit</button>
</form>

Dengan pendekatan ini, kami tidak memerlukan aplikasi useState untuk memutasi data melalui event.target.value, Sebaliknya, dalam myFunction kita boleh dapatkan data bermutasi melalui hujah.

Ini bermakna daripada elemen dalam bentuk kita, kita perlu menetapkan atribut nama. Menggunakan kaedah ini bermakna kami membenarkan React mengendalikan borang itu sendiri melalui Native React form Object dan bukannya menukar keadaan secara manual melalui pengendali acara.

Komponen Pelayan: React 19 membenarkan komponen dipaparkan pada pelayan sebelum digabungkan, dalam persekitaran yang berasingan daripada aplikasi klien atau persediaan pelayan SSR. Komponen Pelayan tidak sama dengan SSR (penyediaan sisi pelayan), tetapi persekitaran pelayan yang berasingan dalam Komponen Pelayan Bertindak balas.
Ciri ini membolehkan komponen pra-memapar sebelum masa, dengan itu menghasilkan paparan kandungan yang pantas dan masa muat yang lebih baik.

Metadata: React 19 membenarkan metadata yang fleksibel. Pembangun boleh mengurus tajuk, penerangan dan tag meta komponen individu yang lain melalui komponen DocumentHead. Ini akan membantu meningkatkan SEO (Pengoptimuman Enjin Carian).

Const AboutUs = () => {
 return (
    <>
      <title>Learn more about our company</title>
      <meta name="AboutUs" description="You can find us on ..." />
      // content
    </>
  );
}

React 19 mempunyai siri cangkuk baharu, beberapa, baharu, yang lain penambahbaikan kepada cangkuk sedia ada. Mari kita bincangkan tentang mereka di bawah.

Penggunaan() cangkuk: Cangkuk guna ialah API percubaan yang boleh digunakan terus untuk membaca nilai Janji atau konteks dalam komponen atau cangkuk (yang merupakan satu-satunya had yang diketahui buat masa ini ).
Cangkuk penggunaan adalah sangat serba boleh dan juga boleh digunakan sebagai ganti useEffect, kerana Ia boleh digunakan untuk pengambilan data tak segerak. Ini membantu untuk
mencapai blok kod yang lebih kemas dan padat.

Kaveat: Ia bukan pengganti useEffect kerana ia masih mempunyai hadnya sendiri yang _useEffect _akan dilaksanakan tanpa had.

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    <div className='username'>{user.name}</div>
  );
}

useActionState(): Ini ialah cangkuk baharu yang membantu mengurus perubahan keadaan. Ia membantu mengurus keadaan belum selesai, pengendalian ralat dan akhir
kemas kini negeri. useActionState _berfungsi seperti _useReduce _di mana ia menerima dua(2) parameter: fungsi yang akan dipanggil apabila borang diserahkan dan _initialState dan ia mengembalikan tatasusunan yang mengandungi tiga(3) nilai: keadaan, yang kini menjadi keadaan semasa jika terdapat mutasi keadaan, tindakan baharu(formAction) yang boleh diluluskan sebagai prop dalam komponen borang kami untuk memanggil tindakan pelayan, dan _isPending _yang mengembalikan _boolean _value jika atau tidak borang diserahkan.

import { useActionState } from "react";

async function incrementFunction(initialState, formData) {
  return initialState + 1;
}

function StatefulForm({}) {
  const [state, formAction, isPending] = useActionState(incrementFunction, 0);

  console.log(state);

  return (
    <form>
      <button formAction={formAction}>{state}</button>
    </form>
  )
}

From this example, the incrementFunction adds 1 to the state every time the button is clicked. The initialState being 0, and then increases to 1 at the first click of the button, thereby changing the state to 1, and for every other click on the button adds 1 to the last state of the component.

useOptimistic() hook:

This is a new hook that allows users to see the outcome of their action even before the pages load completely. The pages are optimistically rendered to the user even when the server is still in its data fetching mode.

With the hope that data fetching will be successful, React displays the intended result to the client, and when data fetching fails, React reverts to the value of the previous state in order not to display incorrect data. This singular action helps in a seamless and fast display of data thereby improving user experience.

useFormStatus():

As the name implies, useFormStatus gives us the status of our form or form fields. This hook does not take in any parameter, but it sure returns 4 objects:

pending: This returns a boolean value: true or false. It returns true when the form is submitting, and false when the form is submitted.

data: When the form is successfully submitted, we can get the information of the user or object from the form field like this:

(formData.get("name"))
(formData.get("address"))

method: The default method of a form is GET, unless stated otherwise. We can get the method of our form with .method. When we are submitting a form, a string method property should be specified as a POST.

action: This is a reference to the function that will be passed to the action prop in our element.

The useFormStatus must always be called from a element or a component that is rendered inside a .

There's quite a few more updates that I can't really write about, so you don't get bored having to read so much. You can click on the React Docs Website to check out some of the other updates.

I hope you had a great time learning with me.

Do well to follow me if you enjoyed my articles.

Thanks, and have a great week ahead my friends.

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