React: asas untuk pembangunan frontend moden

React adalah perpustakaan JavaScript untuk membina aplikasi front-end moden. 1. Ia menggunakan komponen dan maya DOM untuk mengoptimumkan prestasi. 2. Komponen menggunakan definisi JSX, keadaan dan atribut untuk menguruskan data. 3. Cangkuk memudahkan pengurusan kitaran hidup. 4. Gunakan API konteks untuk menguruskan status global. 5. Kesilapan biasa memerlukan kemas kini status debugging dan kitaran hayat. 6. Teknik pengoptimuman termasuk memoisasi, pemisahan kod dan menatal maya.

Pengenalan

Dalam dunia pembangunan web hari ini, React telah menjadi asas untuk membina aplikasi front-end moden. Sama ada anda baru bermula dengan pembangunan front-end atau sudah menjadi pemaju yang berpengalaman, kepentingan pemahaman React dan ekosistemnya jelas. Artikel ini akan membawa anda lebih mendalam ke dalam konsep teras, ciri, dan amalan terbaik untuk membantu anda menguasai alat yang berkuasa ini.

Dengan membaca artikel ini, anda akan belajar cara menggunakan React untuk mewujudkan antara muka pengguna yang cekap, dapat dipelihara, memahami falsafah reka bentuk di belakangnya, dan bagaimana untuk mengelakkan perangkap biasa dan salah faham. Bersedia untuk memulakan perjalanan React anda!

Semak pengetahuan asas

React adalah perpustakaan JavaScript yang dibangunkan oleh Facebook (sekarang Meta) untuk membina antara muka pengguna. Ia mengamalkan idea komponenisasi, yang membolehkan pemaju memecah UI ke dalam komponen yang bebas dan boleh diguna semula. Pendekatan ini sangat meningkatkan pemeliharaan dan kebolehgunaan semula kod.

Dalam React, komponen adalah blok bangunan. Mereka boleh menjadi komponen fungsi atau komponen kelas, tetapi React Modern lebih suka menggunakan komponen fungsi dan cangkuk. React juga memperkenalkan konsep DOM maya, mekanisme yang dioptimumkan prestasi untuk meningkatkan kelajuan tindak balas aplikasi dengan meminimumkan operasi DOM sebenar.

Konsep teras atau analisis fungsi

Komponen React dan JSX

Komponen React adalah blok bangunan asas aplikasi React. Mereka boleh menjadi elemen UI yang mudah atau modul berfungsi kompleks. JSX adalah lanjutan sintaks React yang membolehkan menulis kod seperti HTML dalam JavaScript, menjadikan definisi komponen lebih intuitif dan mudah dibaca.

 // fungsi komponen reaksi mudah dialu -alukan (props) {
  kembali <h1 id="hello-props-name"> hello, {props.name} </h1>;
}

Contoh ini menunjukkan bagaimana untuk menentukan komponen fungsi mudah menggunakan JSX. JSX bukan sahaja meningkatkan kebolehbacaan kod, tetapi juga menjadikan struktur komponen lebih jelas.

Status dan alat peraga

Negeri (Negeri) dan sifat (props) dalam React adalah kunci untuk menguruskan data komponen. Negeri adalah data yang berubah -ubah di dalam komponen, manakala atribut adalah data yang tidak berubah yang diluluskan dari komponen induk ke komponen kanak -kanak.

 // Contoh komponen menggunakan keadaan dan sifat import reaksi, {usestate} dari 'react';

kaunter fungsi ({initialcount}) {
  const [count, setCount] = useState (initialCount);

  Kembali (
    <dana>
      <p> Count: {Count} </p>
      <butang onclick = {() => setCount (count 1)}> kenaikan </butang>
    </div>
  );
}

Dalam contoh ini, kami menggunakan cangkuk useState untuk menguruskan keadaan komponen. Dengan cara ini, komponen boleh bertindak balas terhadap interaksi pengguna dan mengemas kini UI.

Kitaran hayat dan cangkuk

Kitaran hidup komponen React mentakrifkan tingkah laku komponen pada peringkat yang berbeza. Komponen kelas tradisional menggunakan kaedah kitaran hayat, manakala React Modern mengesyorkan menggunakan cangkuk untuk menguruskan kesan sampingan dan kitaran hayat.

 // Gunakan useeffect Hook untuk menguruskan kesan sampingan import react, {usestate, useeffect} dari 'react';

fungsi datafetcher () {
  const [data, setData] = useState (null);

  useeffect (() => {
    Ambil ('/API/Data')
      .then (response => response.json ())
      .tua (data => setData (data));
  }, []);

  kembali <div> {data? Json.stringify (data): &#39;memuatkan ...&#39;} </div>;
}

Hook useEffect digunakan di sini untuk melakukan operasi data selepas komponen dipasang. Ini menunjukkan bagaimana cangkuk memudahkan pengurusan kitaran hayat, menjadikan kod lebih ringkas dan mudah difahami.

Contoh penggunaan

Penggunaan asas

Mari kita lihat aplikasi React mudah yang menunjukkan cara membuat dan menggabungkan komponen.

 // Import aplikasi reaksi asas bertindak balas dari 'bertindak balas';
Import Reactdom dari 'React-Dom';

aplikasi fungsi () {
  Kembali (
    <dana>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

tajuk fungsi () {
  kembali <h1 id="Selamat-datang-ke-aplikasi-saya"> Selamat datang ke aplikasi saya </h1>;
}

fungsi utamaContent () {
  kembali <p> ​​Ini adalah kandungan utama aplikasi. </p>;
}

fungsi footer () {
  kembali <p> ​​& salinan; 2023 aplikasi saya </p>;
}

ReactDom.render (<app />, document.getElementById (&#39;root&#39;));

Contoh ini menunjukkan cara membuat dan menggabungkan pelbagai komponen untuk membina aplikasi mudah. Setiap komponen bertanggungjawab untuk bahagian yang berlainan dan bersama -sama membentuk antara muka pengguna yang lengkap.

Penggunaan lanjutan

Sekarang mari kita lihat bagaimana menguruskan keadaan global menggunakan API konteks React.

 // Gunakan API konteks untuk menguruskan reaksi import negara global, {createContext, useContext, useState} 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} style = {{BackgroundColor: tema === &#39;Light&#39;? &#39;Putih&#39;: &#39;Hitam&#39;, Warna: Tema === &#39;Cahaya&#39;? &#39;hitam&#39;: &#39;putih&#39;}}>
      Tema togol
    </butang>
  );
}

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

Dalam contoh ini, kami menggunakan API konteks untuk menguruskan keadaan topik aplikasi. Ini menjadikan keadaan perkongsian antara komponen yang berbeza sangat mudah dan cekap.

Kesilapan biasa dan tip debugging

Apabila menggunakan React, pemaju mungkin menghadapi masalah yang biasa, seperti kemas kini negeri yang tidak mencetuskan pengaduan semula, atau komponen yang tidak dipasang dengan betul. Berikut adalah beberapa petua debug:

• Semak Kemas Kini Status : Pastikan anda menggunakan fungsi kemas kini status yang betul apabila mengemas kini status, seperti fungsi kemas kini setState atau useState .
• Debugging LifeCycle : Gunakan alat console.log atau debugging untuk mengesan kitaran hayat komponen untuk memastikan kaedah kitaran hayat dilakukan seperti yang diharapkan.
• Isu-isu Prestasi : Gunakan React DevTools untuk menganalisis prestasi komponen rendering dan mencari penanaman semula yang tidak perlu.

Pengoptimuman prestasi dan amalan terbaik

Pengoptimuman prestasi adalah penting dalam aplikasi React. Berikut adalah beberapa petua pengoptimuman dan amalan terbaik:

• Gunakan Memoization : Gunakan React.memo atau useMemo untuk mengelakkan penanaman semula yang tidak perlu.

 // gunakan react.memo untuk mengoptimumkan komponen import reaksi dari 'reaksi';

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

• Pemisahan Kod : Gunakan React.lazy dan ketegangan untuk melaksanakan pemisahan kod untuk mengurangkan masa pemuatan awal.

 // gunakan react.lazy dan ketegangan untuk kod split import reaksi, {ketegangan, malas} dari 'react';

const lain yang lain = malas (() => import ('./ Lain -lain komponen'));

fungsi myComponent () {
  Kembali (
    <dana>
      <Suspense Fallback = {<div> Loading ... </div>}>
        <LainComponent />
      </Suspense>
    </div>
  );
}

• Menatal maya : Untuk senarai panjang, gunakan teknik menatal maya seperti Window React untuk meningkatkan prestasi.

 // Gunakan Window React untuk melaksanakan import menatal maya dari 'React';
import {fixedSizeList sebagai senarai} dari 'react-window';

const row = ({index, style}) => (
  <div style = {style}> row {index} </div>
);

const contoh = () => (
  <Senarai
    ketinggian = {400}
    itemcount = {1000}
    itemize = {35}
    lebar = {300}
  >
    {Row}
  </List>
);

Dalam projek sebenar, teknik pengoptimuman ini dapat meningkatkan prestasi dan pengalaman pengguna aplikasi dengan ketara.

Singkatnya, React bukan sahaja alat yang berkuasa, tetapi juga cara berfikir untuk membina aplikasi front-end moden. Dengan memahami dan menerapkan konsep teras dan amalan terbaik React, anda akan dapat mewujudkan antara muka pengguna yang dapat dipelihara yang dapat memenuhi keperluan pengguna yang berubah -ubah.

Atas ialah kandungan terperinci React: asas untuk pembangunan frontend moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!