Apakah React ⚛️ dan Konsep Komponen

React ⚛️ ialah perpustakaan JavaScript yang berkuasa untuk membina antara muka pengguna. Dibangunkan oleh Facebook pada 2013, ia merevolusikan pembangunan UI dengan seni bina berasaskan komponen dan pendekatan deklaratifnya. Sama ada anda mencipta apl web mudah atau sistem yang kompleks, React menjadikan bangunan boleh guna semula, UI dinamik cekap dan menyeronokkan.

Artikel ini menyelami asas React dan konsep terasnya: Komponen, dengan banyak contoh kod untuk menggambarkan idea ini.

Apakah React?

Pada terasnya, React ialah pustaka JavaScript yang direka untuk membina antara muka pengguna yang dinamik dan interaktif. Ia memfokuskan pada lapisan paparan aplikasi, mengikut seni bina Model-View-Controller (MVC). React memudahkan untuk membuat antara muka yang mengemas kini dengan cekap apabila data aplikasi anda berubah.

Kenapa Pilih React?

1. Komponen Boleh Guna Semula: Bangunkan UI modular dengan memecahkannya kepada komponen bebas dan boleh guna semula.
2. DOM Maya: Kemas kini yang lebih pantas dengan mengira perubahan dalam DOM Maya yang ringan sebelum mengemas kini DOM sebenar.
3. Deklaratif: Terangkan perkara yang anda mahu lihat dalam UI dan React mengendalikan yang lain.
4. Ekosistem Kaya: Manfaatkan perpustakaan seperti Redux, React Router dan Next.js untuk memperluaskan keupayaan React.

Konsep Komponen dalam React

Aplikasi React dibina menggunakan komponen, yang merupakan blok binaan apl React. Komponen ialah bahagian bebas UI yang merangkumi logik, struktur dan gayanya.

Komponen Berfungsi

Komponen fungsian ialah fungsi JavaScript ringkas yang menerima props sebagai input dan mengembalikan elemen React. Ia adalah jenis komponen yang paling biasa dalam aplikasi React moden.

Contoh: Komponen Fungsi Asas

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

Komponen Kelas

Komponen kelas ialah kelas ES6 yang memanjangkan kelas React.Component. Ia biasanya digunakan sebelum pengenalan cangkuk.

Contoh: Komponen Kelas Asas

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

Anatomi Komponen

Contoh: Komponen Fungsian dengan Keadaan

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// Usage
<Welcome name="Alice" />;

Pecahan:

1. Pengurusan Negeri: Cangkuk useState digunakan untuk mengurus keadaan (kiraan) dalam komponen.
2. Props: Data boleh dihantar ke komponen melalui prop.
3. Acara: Pengendali acara onClick mengemas kini keadaan apabila butang diklik.

Prop lwn Negeri

Feature	Props	State
Definition	Data passed to a component from its parent.	Data managed within the component.
Mutability	Immutable (cannot be changed by the receiving component).	Mutable (can be updated within the component).
Usage	Used for passing data to child components.	Used for dynamic data that changes over time.

Ciri Props Negeri Takrif Data dihantar kepada komponen daripada induknya. Data diurus dalam komponen. Mutability Tidak boleh ubah (tidak boleh diubah oleh komponen penerima). Mutable (boleh dikemas kini dalam komponen). Penggunaan Digunakan untuk menghantar data kepada komponen anak. Digunakan untuk data dinamik yang berubah dari semasa ke semasa.

Nyatakan dalam Komponen

State ialah objek khas dalam React yang digunakan untuk menyimpan data yang perlu dibuat oleh komponen. Komponen berfungsi menggunakan cangkuk useState untuk pengurusan keadaan.

Contoh: Kaunter dengan Negeri

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

Prop dalam Komponen

Props ialah hujah yang dihantar daripada komponen induk kepada komponen anak, membenarkan data mengalir ke bawah hierarki komponen.

Contoh: Melepasi Props

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// Usage
<Welcome name="Alice" />;

Komponen Mengarang

React menggalakkan komponen bersarang untuk membina UI kompleks daripada blok binaan yang lebih kecil dan boleh digunakan semula.

Contoh: Komponen Bersarang

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Kaedah Kitar Hayat dalam Komponen Kelas

Komponen kelas termasuk kaedah kitar hayat untuk melakukan tindakan semasa fasa pemasangan, pengemaskinian dan nyahlekap. Untuk komponen berfungsi, cangkuk React seperti useEffect menggantikan kaedah kitaran hayat ini.

Contoh: Kaedah Kitar Hayat

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
;

Contoh: Kitaran hayat dengan useEffect

function Greeting({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

function App() {
  return <Greeting name="John" />;
}

// Renders: Welcome, John!

Pengendalian Acara dalam React

React memudahkan pengendalian acara. Pengendali acara diserahkan sebagai prop kepada elemen dan dilaksanakan apabila acara itu berlaku.

Contoh: Klik Acara

function Header() {
  return <header><h1>My Website</h1></header>;
}

function Main() {
  return <main><p>This is the main content.</p></main>;
}

function Footer() {
  return <footer><p>© 2024 My Website</p></footer>;
}

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

// Usage
<App />;

Contoh: Pengendalian Input

import React, { Component } from 'react';

class Timer extends Component {
  componentDidMount() {
    console.log('Timer mounted');
  }

  componentWillUnmount() {
    console.log('Timer unmounted');
  }

  render() {
    return <p>Timer running...</p>;
  }
}

// Usage
<Timer />;

Pemarahan Bersyarat

React membolehkan anda membuat komponen atau elemen secara bersyarat berdasarkan logik aplikasi.

Contoh: Rendering Bersyarat

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log('Timer mounted');
    return () => console.log('Timer unmounted');
  }, []);

  return <p>Timer running...</p>;
}

// Usage
<Timer />;

Senarai dan Kunci

Apabila memaparkan senarai dalam React, adalah penting untuk memberikan kunci unik kepada setiap elemen untuk membantu React mengenal pasti perubahan.

Contoh: Membuat Senarai

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

// Usage
<Button />;

Komponen Boleh Guna Semula

React menggalakkan mencipta komponen yang boleh digunakan semula di seluruh aplikasi untuk mengurangkan lebihan.

Contoh: Komponen Butang Boleh Digunakan Semula

import React, { useState } from 'react';

function InputExample() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

// Usage
<InputExample />;

Kesimpulan

React ialah alat yang berkuasa untuk membina aplikasi web moden. Seni bina berasaskan komponennya, ditambah dengan ciri seperti prop, keadaan dan cangkuk, memungkinkan untuk mencipta UI yang dinamik, cekap dan boleh digunakan semula. Dengan menguasai konsep teras React dan menggunakan alatannya dengan berkesan, pembangun boleh menyampaikan pengalaman pengguna yang luar biasa sambil mengekalkan pangkalan kod yang bersih dan boleh diselenggara. Bersedia untuk bermula? Bina apl React pertama anda dan lihat keajaiban komponen dalam tindakan! ?

Atas ialah kandungan terperinci Apakah React ⚛️ dan Konsep Komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!