React: Membuat antara muka pengguna yang dinamik dan interaktif

React adalah alat pilihan untuk membina antara muka pengguna yang dinamik dan interaktif. 1) Komponen dan JSX membuat UI berpecah dan menggunakan semula mudah. 2) Pengurusan negeri dilaksanakan melalui cangkuk UseState untuk mencetuskan kemas kini UI. 3) Mekanisme pemprosesan acara bertindak balas terhadap interaksi pengguna dan meningkatkan pengalaman pengguna.

Pengenalan

Dalam pembangunan front-end moden, React telah menjadi alat pilihan untuk membina antara muka pengguna yang dinamik dan interaktif. Sama ada anda pemula atau pemaju yang berpengalaman, adalah penting untuk memahami bagaimana untuk memanfaatkan bertindak balas untuk mewujudkan UI yang cekap dan responsif. Artikel ini akan membawa anda ke dalam menyelidiki konsep teras dan teknik praktikal React untuk membantu anda menguasai seni mewujudkan antara muka pengguna yang dinamik dan interaktif.

Dengan membaca artikel ini, anda akan belajar bagaimana untuk membina antara muka pengguna yang kompleks menggunakan pemikiran komponen React, pengurusan negeri, dan pemprosesan peristiwa. Kami juga akan meneroka beberapa perangkap biasa dan amalan terbaik untuk memastikan anda dapat memulakan dengan mudah dalam projek sebenar.

Semak pengetahuan asas

React adalah perpustakaan JavaScript untuk membina antara muka pengguna. Ia menguruskan keadaan dan logik UI melalui cara yang komponen. Komponen boleh menjadi komponen berfungsi atau komponen kelas, dan struktur UI biasanya diterangkan melalui sintaks JSX. Idea utama React adalah untuk memecah UI ke dalam komponen bebas, boleh diguna semula, masing -masing bertanggungjawab untuk keadaan dan tingkah lakunya sendiri.

Dalam React, keadaan dan sifat adalah konsep utama. Negeri digunakan untuk menguruskan data di dalam komponen, manakala atribut adalah data yang diluluskan dari komponen induk ke komponen kanak -kanak. Memahami perbezaan dan senario penggunaan antara kedua -duanya adalah asas untuk membina UI yang dinamik.

Konsep teras atau analisis fungsi

Komponen dan JSX

Idea komponen React membolehkan pemaju memecah UI kompleks ke bahagian yang lebih kecil dan terkawal. JSX adalah sambungan sintaks yang serupa dengan HTML. Ia membolehkan anda menulis kod seperti HTML dalam JavaScript, menjadikan penerangan UI lebih intuitif dan mudah dikekalkan.

 fungsi selamat datang (props) {
  kembali <h1 id="hello-props-name"> hello, {props.name} </h1>;
}

const element = <welcome name = "sara" />;
ReactDom.render (elemen, document.getElementById (&#39;root&#39;));

Dalam contoh ini, Welcome adalah komponen fungsi yang menerima atribut name dan mengembalikan elemen JSX. Dengan cara ini, kita boleh membuat dan menggunakan semula komponen dengan mudah.

Pengurusan Status

Pengurusan negeri adalah salah satu teras aplikasi React. Dengan menggunakan Hook useState (Hook), kita boleh menguruskan keadaan dalam komponen fungsi. Perubahan dalam pencetus keadaan semula komponen, dengan itu mengemas kini UI.

 Import React, {Usestate} dari 'React';

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

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

Dalam contoh ini, cangkuk useState digunakan untuk membuat count pembolehubah negeri dan fungsi kemas kini setCount . Apabila pengguna mengklik butang, nilai count meningkat dan komponennya diperuntukkan semula untuk mencerminkan keadaan baru.

Pengendalian acara

React menyediakan mekanisme pengendalian peristiwa yang kuat, yang membolehkan kami dengan mudah bertindak balas terhadap interaksi pengguna. Fungsi pengendalian acara biasanya ditakrifkan oleh fungsi anak panah atau mengikat this .

 fungsi togol () {
  const [iSToggleon, setistoggleon] = useState (true);

  fungsi handleclick () {
    setistoggleon (! iSToggleon);
  }

  Kembali (
    <butang onclick = {handleclick}>
      {Istoggleon? &#39;On&#39;: &#39;off&#39;}
    </butang>
  );
}

Dalam contoh ini, fungsi handleClick dipanggil apabila pengguna mengklik butang, yang akan menukar keadaan isToggleOn , dengan itu mengubah teks butang.

Contoh penggunaan

Penggunaan asas

Mari kita lihat komponen bentuk mudah yang menunjukkan cara menggunakan pemprosesan negeri dan acara untuk membuat UI dinamik.

 fungsi nama () {
  const [nilai, setValue] = useState ('');

  const handlechange = (event) => {
    setValue (event.target.value);
  };

  const handlesubmit = (event) => {
    Alert ('Nama yang Dihantar:' Nilai);
    event.PreventDefault ();
  };

  Kembali (
    <form onSubmit = {handlesubmit}>
      <label>
        Nama:
        <input type = "text" value = {value} onChange = {handlechange} />
      </label>
      <input type = "hantar" value = "hantar" />
    </form>
  );
}

Dalam contoh ini, komponen NameForm menggunakan useState untuk menguruskan nilai kotak input dan fungsi handleChange dan handleSubmit untuk mengendalikan input pengguna dan penyerahan borang.

Penggunaan lanjutan

Sekarang, mari kita lihat contoh yang lebih kompleks: komponen senarai yang boleh diedit. Komponen ini menunjukkan cara menggunakan rendering negeri dan bersyarat untuk mewujudkan UI yang dinamik dan interaktif.

 fungsi edodableList () {
  const [item, setItems] = useState (['item 1', 'item 2', 'item 3']);
  const [EditingIndex, setEditingIndex] = useState (null);
  const [newItem, setNewItem] = useState ('');

  const handleEdit = (index) => {
    seteditingIndex (indeks);
    setNewItem (item [indeks]);
  };

  const handlesave = (index) => {
    const NewItems = [... item];
    NewItems [index] = NewItem;
    setItems (NewItems);
    seteditingIndex (null);
  };

  const handledelete = (index) => {
    const newItems = items.filter ((_, i) => i! == indeks);
    setItems (NewItems);
  };

  const handleadd = () => {
    jika (newItem.trim ()) {
      setItems ([... item, newItem]);
      setNewItem ('');
    }
  };

  Kembali (
    <dana>
      <ul>
        {items.map ((item, indeks) => (
          <li key = {index}>
            {EditingIndex === Indeks? (
              <input
                type = "Text"
                nilai = {newItem}
                onChange = {(e) => setNewItem (e.target.value)}
              />
            ): (
              item
            )}
            {EditingIndex === Indeks? (
              <butang onclick = {() => handlaSave (index)}> simpan </butang>
            ): (
              <butang onclick = {() => handleEdit (index)}> edit </butang>
            )}
            <butang onclick = {() => handledelete (index)}> padam </butang>
          </li>
        ))}
      </ul>
      <input
        type = "Text"
        nilai = {newItem}
        onChange = {(e) => setNewItem (e.target.value)}
      />
      <butang onclick = {handLeadd}> Tambah </butang>
    </div>
  );
}

Dalam contoh ini, komponen EditableList menggunakan pelbagai pembolehubah negeri untuk menguruskan item senarai, edit status, dan input item baru. Melalui pemprosesan bersyarat dan pemprosesan acara, kami boleh melaksanakan senarai yang boleh diedit di mana pengguna boleh menambah, mengedit dan memadam item senarai.

Kesilapan biasa dan tip debugging

Kesalahan biasa apabila menggunakan React termasuk kemas kini keadaan yang salah, pengikatan pengendali acara yang salah, dan rendering komponen yang salah. Berikut adalah beberapa petua debug:

• Kemas kini status yang salah : Pastikan anda menggunakan fungsi kemas kini yang betul (seperti fungsi kemas kini setState atau useState ) apabila mengemas kini status. Elakkan mengubahsuai pembolehubah negeri secara langsung, kerana ini tidak mencetuskan semula.

• Fungsi pengendali peristiwa mengikat ralat : Pastikan fungsi pengendali acara betul -betul terikat kepada contoh komponen, terutamanya dalam komponen kelas. Gunakan fungsi anak panah atau kaedah bind untuk memastikan this .

• Komponen tidak diberikan dengan betul : Periksa logik rendering bersyarat komponen untuk memastikan semua keadaan yang mungkin diambil kira. Gunakan console.log atau React DevTools untuk memeriksa alat dan keadaan komponen.

Pengoptimuman prestasi dan amalan terbaik

Dalam aplikasi praktikal, adalah penting untuk mengoptimumkan prestasi aplikasi React. Berikut adalah beberapa cadangan untuk pengoptimuman prestasi dan amalan terbaik:

• Gunakan useMemo dan useCallback : Cangkuk ini boleh membantu anda mengelakkan penanaman semula yang tidak perlu dan meningkatkan prestasi aplikasi.

 import react, {useMemo, useCallback} dari 'react';

fungsi myComponent ({item}) {
  const sortEdItems = useMemo (() => {
    kembali [... item] .sort ((a, b) => a - b);
  }, [item]);

  const handleclick = useCallback (() => {
    // mengendalikan acara klik}, []);

  Kembali (
    <dana>
      {sortEdItems.map ((item) => (
        <div key = {item}> {item} </div>
      ))}
      <butang onclick = {handleclick}> klik saya </butang>
    </div>
  );
}

Dalam contoh ini, useMemo digunakan untuk menyenaraikan senarai cache untuk mengelakkan menyusun semula setiap kali anda membuatnya. useCallback digunakan untuk pengendali acara cache untuk mengelakkan rekreasi yang tidak perlu.

• Elakkan penyampaian semula yang tidak perlu : Gunakan React.memo untuk membungkus komponen fungsi dan elakkan daripada penanaman semula apabila props tidak berubah.

 Import bertindak balas daripada 'bertindak balas';

const myComponent = react.memo (fungsi myComponent (props) {
  // Komponen logik kembali <div> {props.value} </div>;
});

• Kod bacaan dan penyelenggaraan : Simpan satu tanggungjawab komponen dan elakkan daripada komponen komponen. Gunakan penamaan dan komen yang jelas untuk memastikan bahawa kod itu mudah difahami dan dikekalkan.

• Amalan Terbaik untuk Pengurusan Negeri : Untuk aplikasi yang kompleks, pertimbangkan untuk menggunakan REDUX atau konteks API untuk menguruskan negara global untuk mengelakkan komponen bersarang berlebihan yang disebabkan oleh ketinggian negeri.

Dengan petua dan amalan ini, anda boleh membina aplikasi reaksi yang cekap dan dapat diselenggarakan yang memberikan pengalaman pengguna yang sangat baik.

Dalam projek yang sebenar, saya telah menemui masalah kesesakan prestasi: komponen senarai besar yang melahirkan semua subkomponen setiap kali status dikemas kini, menyebabkan kegagapan halaman. Dengan menggunakan React.memo dan useMemo , kami berjaya menyempitkan semula untuk hanya mengandungi perubahan, meningkatkan prestasi permohonan.

Singkatnya, React memberikan kita alat dan konsep yang berkuasa untuk mewujudkan antara muka pengguna yang dinamik dan interaktif. Dengan memahami dan mengamalkan teknik -teknik ini, anda akan dapat membina UI yang cekap dan responsif yang memenuhi keperluan aplikasi web moden.

Atas ialah kandungan terperinci React: Membuat antara muka pengguna yang dinamik dan interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!