React dan HTML: Memberi data dan acara pengendalian

React dengan cekap menjadikan data melalui negeri dan prop, dan mengendalikan peristiwa pengguna melalui sistem peristiwa sintesis. 1) Gunakan UseState untuk menguruskan keadaan, seperti contoh kaunter. 2) Pemprosesan acara dilaksanakan dengan menambahkan fungsi dalam JSX, seperti klik butang. 3) Atribut utama diperlukan untuk membuat senarai, seperti komponen todolist. 4) Untuk pemprosesan borang, useState dan E.PreventDefault (), seperti komponen bentuk.

Pengenalan

Dalam pembangunan front-end moden, React telah menjadi perpustakaan pilihan untuk membina antara muka pengguna, dan gabungannya dengan HTML menjadikan pemprosesan data dan pemprosesan acara sangat cekap dan intuitif. Saya memilih untuk menulis ini kerana kerjasama antara React dan HTML sentiasa terpesona sepanjang kerjaya pembangunan saya, yang bukan sahaja memudahkan aliran kerja saya, tetapi juga membolehkan saya membuat lebih banyak aplikasi interaktif. Melalui artikel ini, anda akan belajar bagaimana untuk menjadikan data dan mengendalikan peristiwa pengguna dengan berkesan, yang akan meningkatkan keupayaan dan kecekapan anda dalam pembangunan front-end.

Semak pengetahuan asas

React adalah perpustakaan JavaScript untuk membina antara muka pengguna. Ia membolehkan pemaju membina UI dengan cara modular melalui komponen. HTML adalah bahasa markup standard untuk kandungan laman web. Mereka terutamanya digabungkan dalam React melalui sintaks JSX, membolehkan anda menulis struktur HTML secara langsung dalam kod JavaScript.

Dalam React, setiap komponen boleh dianggap sebagai dokumen HTML kecil yang berasingan, secara dinamik mengawal kandungannya melalui prop dan keadaan. Memahami konsep asas ini adalah penting untuk menguasai pengendalian dan pengendalian acara berikutnya.

Konsep teras atau analisis fungsi

Rendering data dalam React

Dalam React, rendering data dilaksanakan melalui keadaan komponen dan prop. Negeri digunakan untuk menguruskan negeri di dalam komponen, sementara prop adalah data yang diluluskan dari komponen induk ke komponen kanak -kanak. Melalui kedua -dua mekanisme ini, React boleh mengemas kini UI secara dinamik untuk mencerminkan perubahan dalam data.

 Import React, {Usestate} dari 'React';

kaunter fungsi () {
  const [count, setCount] = useState (0);

  Kembali (
    <div>
      <p> anda mengklik {count} kali </p>
      <butang onclick = {() => setCount (count 1)}> klik saya </butang>
    </div>
  );
}

Dalam contoh kaunter mudah ini, cangkuk useState digunakan untuk menguruskan keadaan count . Apabila pengguna mengklik butang, nilai count meningkat dan bertindak balas secara automatik akan membuat semula komponen untuk mencerminkan keadaan terkini.

Pengendalian acara

Pengendalian acara dalam React adalah serupa dengan pengendalian acara HTML tradisional, tetapi ia dilaksanakan dengan secara langsung menambah pengendali acara di JSX. React menggunakan sistem peristiwa sintetik, yang bermaksud bahawa objek peristiwa dicipta oleh React sendiri, bukan objek peristiwa asli pelayar, yang memastikan konsistensi merentasi pelayar yang berbeza.

 fungsi myComponent () {
  fungsi handleclick () {
    Alert ('Butang telah diklik!');
  }

  Kembali (
    <butang onclick = {handleclick}> klik saya </butang>
  );
}

Dalam contoh ini, fungsi handleClick dipanggil apabila butang diklik. Cara mengendalikan peristiwa dalam React menjadikan kod lebih mudah untuk mengurus dan menguji.

Contoh penggunaan

Penggunaan asas

Mari kita lihat contoh yang lebih praktikal yang menunjukkan cara membuat senarai dalam React:

 fungsi todolist ({todos}) {
  Kembali (
    <ul>
      {todos.map ((todo, index) => (
        <li key = {index}> {todo} </li>
      ))}
    </ul>
  );
}

const todos = [&#39;belajar bertindak balas&#39;, &#39;membina projek&#39;, &#39;digunakan untuk pengeluaran&#39;];

Komponen ini mengambil todo array sebagai alat peraga dan menjadikan setiap item todo ke dalam item senarai melalui fungsi map . Beri perhatian untuk menggunakan atribut key , yang diperlukan untuk bertindak balas untuk mengemas kini senarai dengan cekap.

Penggunaan lanjutan

Sekarang, mari kita lihat contoh yang lebih kompleks yang menunjukkan cara mengendalikan kemas kini input dan status borang:

 bentuk fungsi () {
  const [nama, setName] = useState ('');
  const [e -mel, setemail] = useState ('');

  const handlesubmit = (e) => {
    E.PreventDefault ();
    Alert (`Dihantar: $ {name} - $ {email}`);
  };

  Kembali (
    <form onSubmit = {handlesubmit}>
      <input
        type = "Text"
        value = {name}
        onChange = {(e) => setName (e.target.value)}
        Placeholder = "Nama"
      />
      <input
        type = "E -mel"
        value = {e -mel}
        onChange = {(e) => setemail (e.target.value)}
        Placeholder = "E -mel"
      />
      <Button Type = "Hantar"> Hantar </butang>
    </form>
  );
}

Dalam komponen borang ini, kami menggunakan cangkuk useState untuk menguruskan keadaan name dan email , dan mengemas kini negeri -negeri ini melalui pengendali acara onChange . Fungsi handleSubmit akan dipanggil apabila borang diserahkan.

Kesilapan biasa dan tip debugging

Kesalahan biasa apabila memproses data dan peristiwa dalam React termasuk:

• Lupa untuk menambah atribut key ke item senarai, yang akan menyebabkan React gagal mengemas kini senarai dengan berkesan.
• Lupa untuk memanggil e.preventDefault() dalam fungsi pengendali acara, yang boleh menyebabkan borang menyegarkan halaman apabila diserahkan.
• Ubah suai keadaan secara langsung dan bukannya menggunakan cangkuk setState atau useState , yang akan menyebabkan reaksi tidak mengesan perubahan keadaan.

Untuk soalan -soalan ini, nasihat saya ialah:

• Sentiasa tambahkan atribut key yang unik ke item senarai, dan biasanya anda boleh menggunakan pengecam unik dalam data.
• Apabila pemprosesan borang penyerahan, ingatlah untuk memanggil e.preventDefault() untuk menyekat tingkah laku lalai.
• Pastikan untuk mengemas kini keadaan melalui API yang disediakan oleh React supaya React dapat bertindak balas dengan betul kepada perubahan keadaan.

Pengoptimuman prestasi dan amalan terbaik

Dalam aplikasi praktikal, adalah penting untuk mengoptimumkan prestasi aplikasi React. Berikut adalah beberapa petua pengoptimuman yang telah saya ringkaskan dari pengalaman saya:

• Gunakan cangkuk useMemo dan useCallback untuk mengoptimumkan prestasi, terutamanya apabila terdapat pengiraan yang kompleks atau pemprosesan peristiwa yang kerap dalam komponen.
• Elakkan membuat semula semula dan mengoptimumkannya dengan komponen pembalut React.memo .
• Gunakan senarai maya (seperti react-window ) untuk mengendalikan rendering sejumlah besar data, mengelakkan membuat semua data sekaligus.

Mengenai amalan terbaik, saya cadangkan:

• Menjaga tanggungjawab tunggal komponen, setiap komponen hanya melakukan satu perkara, yang dapat meningkatkan pemeliharaan kod.
• Gunakan penamaan yang bermakna dan anotasi yang jelas untuk menjadikan kod mudah difahami dan diselenggarakan.
• Kurangkan kedalaman bersarang komponen dan memudahkan struktur dengan meningkatkan logik awam ke dalam komponen peringkat tinggi.

Dalam pengalaman pembangunan saya, saya mendapati bahawa teknik dan amalan ini bukan sahaja meningkatkan prestasi aplikasi, tetapi juga menjadikan kerjasama pasukan lebih cekap. Semoga perkongsian ini akan membantu anda pergi lebih jauh dalam perjalanan React dan HTML.

Atas ialah kandungan terperinci React dan HTML: Memberi data dan acara pengendalian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!