React: memberi tumpuan kepada antara muka pengguna (frontend)

React adalah perpustakaan JavaScript untuk membina antara muka pengguna yang meningkatkan kecekapan melalui pembangunan komponen dan DOM maya. 1. Komponen dan JSX: Gunakan sintaks JSX untuk menentukan komponen untuk meningkatkan intuitif dan kualiti kod. 2. 3. Pengurusan dan cangkuk negeri: cangkuk seperti useState dan useeffect memudahkan pengurusan negeri dan pengendalian kesan sampingan. 4. Contoh Penggunaan: Dari Bentuk Asas hingga Pengurusan Negeri Global Lanjutan, gunakan API Konteks. 5. Kesilapan dan debug biasa: Elakkan masalah pengurusan dan komponen yang tidak betul, dan gunakan React DevTools untuk debug. 6. Pengoptimuman Prestasi dan Amalan Terbaik: Gunakan React.Memo, USECallback dan Usememo untuk mengoptimumkan prestasi untuk mengekalkan kebolehbacaan dan penyelenggaraan kod.

Pengenalan

React, ah, ketika datang ke sana, saya selalu merasa seperti itu bukan hanya perpustakaan, tetapi falsafah yang mengubah cara minda pembangunan depan. Saya masih ingat kali pertama saya bersentuhan dengan React, keseronokan itu seperti menemui dunia baru - dunia baru yang membina antara muka pengguna. Dalam artikel ini, saya akan membawa anda ke dalam pemahaman yang mendalam tentang perkembangan depan React dan mendedahkan daya tarikannya. Anda akan belajar cara menggunakan React untuk membina antara muka responsif dan pengalaman pengguna. Pada masa yang sama, saya akan berkongsi beberapa pengalaman dan pelajaran yang saya alami secara peribadi, dengan harapan dapat membantu anda mengelakkan lencongan.

Semak pengetahuan asas

React, ringkasnya, adalah perpustakaan JavaScript untuk membina antara muka pengguna. Ia dibangunkan oleh Facebook dan bertujuan untuk menyelesaikan kecekapan operasi DOM tradisional. React memperkenalkan cara pemikiran baru - pembangunan komponen. Daripada menulis sekumpulan operasi DOM, kami membahagikan antara muka ke dalam komponen yang kecil dan boleh diguna semula. Komponen ini boleh menjadi elemen UI mudah atau struktur halaman yang kompleks.

Dalam React, konsep keadaan dan atribut sangat penting. Negeri adalah data di dalam komponen, yang mempengaruhi rendering komponen, manakala prop adalah data yang diluluskan dari komponen induk ke komponen kanak -kanak. Memahami kedua -dua konsep ini adalah kunci untuk menguasai React.

Konsep teras atau analisis fungsi

Komponen dan JSX

Inti React adalah komponen, dan definisi komponen biasanya dilaksanakan melalui sintaks JSX. JSX adalah sintaks sambungan JavaScript yang membolehkan anda menulis struktur HTML dalam JavaScript. Mari lihat contoh komponen yang mudah:

 Import bertindak balas daripada 'bertindak balas';

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

Eksport Default Welcome;

Komponen ini mengambil name yang dinamakan nama dan menjadikannya menjadi tag <h1> . JSX bukan sahaja menjadikan kod itu lebih intuitif, tetapi juga melakukan pemeriksaan jenis pada masa kompilasi untuk meningkatkan kualiti kod.

Dom maya dan rendering

Satu lagi konsep teras React adalah dom maya. Operasi DOM tradisional sering perlahan kerana setiap pengubahsuaian akan menyebabkan seluruh pokok Dom ditolak. React mengekalkan dom maya ringan. Apabila keadaan berubah, ia mula -mula beroperasi pada DOM maya, kemudian menggunakan algoritma diff untuk mengetahui bahagian -bahagian yang perlu dikemas kini, dan akhirnya hanya membuat kemas kini yang diperlukan untuk DOM sebenar. Pendekatan ini meningkatkan prestasi.

 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>
  );
}

kaunter lalai eksport;

Dalam komponen kaunter ini, setiap kali butang diklik, perubahan keadaan count , tetapi bertindak balas hanya mengemas kini bahagian yang diperlukan, bukan seluruh pokok Dom.

Pengurusan status dan cangkuk

React 16.8 memperkenalkan cangkuk, ciri revolusioner. Cangkuk membolehkan kita menggunakan ciri -ciri reaksi negeri dan lain -lain tanpa menulis kelas. Cangkuk yang paling biasa digunakan adalah useState dan useEffect .

 import react, {usestate, useeffect} dari 'react';

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

  useeffect (() => {
    document.title = `Anda mengklik $ {count} times`;
  }, [Count]);

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

Contoh lalai eksport;

Dalam contoh ini, useEffect mengemas kini tajuk dokumen apabila count perubahan. Ini menunjukkan bagaimana cangkuk memudahkan pengurusan negeri dan pengurusan kesan sampingan.

Contoh penggunaan

Penggunaan asas

Mari kita mulakan dengan komponen bentuk yang mudah. Katakan kami ingin membuat borang di mana pengguna memasuki nama:

 Import React, {Usestate} dari 'React';

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

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

  Kembali (
    <form onSubmit = {handlesubmit}>
      <label>
        Nama:
        <input
          type = "Text"
          value = {name}
          onChange = {(e) => setName (e.target.value)}
        />
      </label>
      <input type = "hantar" value = "hantar" />
    </form>
  );
}

Eksport nama lalai;

Komponen ini menunjukkan cara menguruskan keadaan borang menggunakan useState dan bagaimana untuk mengendalikan penyerahan borang.

Penggunaan lanjutan

Sekarang mari kita lihat cara menggunakan API konteks React (API konteks) untuk menguruskan keadaan global. Katakan kita mempunyai keperluan penukaran topik:

 Import React, {Usestate, CreateContext, useContext} dari 'React';

const themeContext = createContext ();

fungsi temaProvider ({Children}) {
  const [tema, setTheme] = useState ('light');

  const toggletheme = () => {
    setTheme (tema === 'cahaya'? 'gelap': 'cahaya');
  };

  Kembali (
    <ThemeContext.provider value = {{tema, toggletheme}}>
      {anak}
    </ThemeContext.provider>
  );
}

fungsi themedButton () {
  const {tema, toggletheme} = useContext (themeContext);

  Kembali (
    <butang
      onclick = {toggletheme}
      gaya = {{latar belakangColor: tema === &#39;cahaya&#39;? &#39;#ffffff&#39;: &#39;#000000&#39;, warna: tema === &#39;cahaya&#39;? &#39;#000000&#39;: &#39;#ffffff&#39;}}
    >
      Tema togol
    </butang>
  );
}

aplikasi fungsi () {
  Kembali (
    <SememProvider>
      <ThemedButton />
    </Temaprovider>
  );
}

aplikasi lalai eksport;

Contoh ini menunjukkan cara menggunakan API konteks untuk lulus dan menggunakan keadaan global dalam pokok komponen.

Kesilapan biasa dan tip debugging

Dalam pembangunan React, kesilapan biasa termasuk pengurusan negeri yang tidak betul, kemas kini komponen yang salah, dan lain -lain. Mari lihat beberapa masalah dan penyelesaian biasa:

• Pengurusan Negeri yang tidak betul : Pastikan anda mengemas kini status di tempat yang betul. Sebagai contoh, kemas kini keadaan dalam fungsi pengendali acara, bukan dalam fungsi render.

• Komponen tidak dikemas kini dengan betul : periksa bahawa anda menggunakan atribut key dengan betul, terutamanya apabila membuat senarai. Jika key tidak digunakan dengan betul, React mungkin tidak mengenali dan mengemas kini komponen dengan betul.

• Petua Debug : Menggunakan React Devtools dapat membantu anda melihat perubahan dalam pokok komponen, negeri, dan sifat. Di samping itu, console.log dan useEffect cangkuk boleh membantu anda debug perubahan keadaan.

Pengoptimuman prestasi dan amalan terbaik

Pengoptimuman prestasi dan amalan terbaik adalah penting dalam pembangunan reaksi. Berikut adalah beberapa cadangan:

• Elakkan penyampaian semula yang tidak perlu : Gunakan React.memo untuk membungkus komponen fungsi, atau gunakan kaedah kitaran hayat shouldComponentUpdate dalam komponen kelas untuk mengawal pengubahsuaian komponen.

• Gunakan useCallback dan useMemo : Cangkuk ini dapat membantu anda mengoptimumkan prestasi, terutama ketika melepasi fungsi panggil balik atau mengira nilai mahal.

 import react, {usestate, useCallback, usememo} dari 'react';

fungsi expensiveComponent ({compute}) {
  const result = useMemo (() => compute (), [compute]);
  kembali <div> hasil: {result} </div>;
}

fungsi parentComponent () {
  const [count, setCount] = useState (0);
  const compute = useCallback (() => {
    // Katakan terdapat pengiraan yang mahal di sini untuk mengembalikan kiraan * 2;
  }, [Count]);

  Kembali (
    <dana>
      <butang onclick = {() => setCount (count 1)}> kenaikan </butang>
      <ExpensiveComponent compute = {compute} />
    </div>
  );
}

Eksport Komponen Lalai;

• Kod pembacaan dan penyelenggaraan : Pastikan komponen kecil dan berdedikasi, gunakan penamaan bermakna, tambahkan komen dan dokumentasi yang sesuai. Amalan -amalan ini bukan sahaja meningkatkan kebolehbacaan kod, tetapi juga meningkatkan kecekapan kerja berpasukan.

Dalam kerjaya pembangunan saya, saya mendapati bahawa amalan terbaik ini bukan sahaja meningkatkan prestasi aplikasi, tetapi juga menjadikan kod lebih mudah untuk mengekalkan dan skala. Saya masih ingat kali pertama saya menggunakan useMemo , ia sangat mengurangkan bilangan penahan semula komponen saya dan membuat permohonan saya lebih lancar.

Secara keseluruhannya, React memberikan kita cara baru pembangunan front-end. Dengan memahami dan menggunakan konsep teras dan amalan terbaik ini, anda boleh membina antara muka pengguna yang cekap dan boleh dipelihara. Semoga artikel ini memberikan anda beberapa pandangan dan inspirasi yang berguna dan mengucapkan selamat berlayar ke React!

Atas ialah kandungan terperinci React: memberi tumpuan kepada antara muka pengguna (frontend). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!