Bermula dengan Komponen Bahagian React, Keadaan dan Props

Selamat datang kembali ke perjalanan kami ke React.js! Dalam catatan kami sebelum ini, kami memperkenalkan asas React, menonjolkan kekuatannya sebagai perpustakaan untuk membina antara muka pengguna dinamik. Hari ini, kami menyelam lebih dalam kepada tiga konsep asas yang penting untuk mencipta aplikasi React: komponen, keadaan dan prop. Mari teroka konsep ini secara terperinci!

Apakah Komponen Reaksi?

Komponen React ialah bahan binaan bagi mana-mana aplikasi React. Ia adalah kepingan kod boleh guna semula yang mentakrifkan bagaimana bahagian tertentu UI sepatutnya kelihatan dan berkelakuan. Komponen boleh dianggap sebagai elemen HTML tersuai dan ia terdapat dalam dua jenis utama: komponen berfungsi dan komponen kelas.

1. Komponen Berfungsi
Komponen fungsional ialah fungsi JavaScript ringkas yang mengembalikan elemen React. Mereka sering diutamakan kerana kesederhanaan dan kebolehbacaannya.

Contoh Komponen Berfungsi:

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

2. Komponen Kelas
Komponen kelas lebih kompleks. Mereka ditakrifkan sebagai kelas ES6 yang melanjutkan daripada React.Component. Komponen kelas boleh mengekalkan keadaannya sendiri dan menggunakan kaedah kitaran hayat.

Contoh Komponen Kelas:

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

Mengapa Menggunakan Komponen?

• Kebolehgunaan semula: Komponen boleh digunakan semula sepanjang aplikasi anda, mengurangkan pertindihan kod.
• Pemisahan Kebimbangan: Dengan memecahkan UI kepada bahagian yang lebih kecil, anda boleh mengurus kerumitan dengan lebih mudah.
• Kebolehujian: Komponen yang lebih kecil lebih mudah untuk diuji secara individu.

---

Memahami Props

Props (singkatan untuk sifat) ialah mekanisme untuk menghantar data dari satu komponen ke komponen yang lain. Ia tidak boleh diubah, bermakna komponen tidak boleh mengubah suai propnya sendiri.

Menggunakan Props
Anda boleh menghantar prop kepada komponen sama seperti anda menghantar atribut kepada elemen HTML.

Contoh Props Lulus:

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

Dalam contoh ini, komponen Apl memaparkan komponen Ucapan, menghantar prop nama dengan nilai "John".

Mengakses Prop
Dalam komponen, props boleh diakses melalui objek props.

Contoh Mengakses Props:

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

---

Mengurus Negeri

State ialah objek terbina dalam yang membenarkan komponen memegang dan mengurus data mereka sendiri. Tidak seperti prop, keadaan boleh berubah dan boleh berubah dari semasa ke semasa, selalunya sebagai tindak balas kepada tindakan pengguna.

Menggunakan Keadaan dalam Komponen Berfungsi
Dalam komponen berfungsi, anda boleh menggunakan useStatehook untuk mengurus keadaan.

Contoh Penggunaan useStateHook:

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

Dalam contoh ini, useState memulakan pembolehubah keadaan kiraan kepada 0 dan setCount ialah fungsi yang mengemas kini keadaan

Menggunakan Keadaan dalam Komponen Kelas

Dalam komponen kelas, keadaan diurus menggunakan objek this.state dan kaedah setState.

Contoh Penggunaan Keadaan dalam Komponen Kelas:

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

Negeri lwn Props

• Negeri: Diuruskan dalam komponen. Boleh berubah dari semasa ke semasa, biasanya sebagai tindak balas kepada tindakan pengguna.
• Props: Dihantar kepada komponen oleh ibu bapa. Tidak boleh ubah dalam komponen.

Dalam siaran ini, kami meneroka konsep asas React: komponen, keadaan dan prop. Kami mengetahui bahawa komponen berfungsi sebagai bahan binaan aplikasi React, membolehkan kebolehgunaan semula dan organisasi kod yang lebih baik. Komponen berfungsi menawarkan kesederhanaan dan kejelasan, manakala komponen kelas menyediakan ciri tambahan seperti kaedah keadaan dan kitaran hayat.

Kami juga menyelidiki prop, yang membolehkan kami menghantar data antara komponen, memupuk aliran data satu arah yang meningkatkan kebolehselenggaraan. Dengan memahami cara menggunakan prop dengan berkesan, kami boleh mencipta antara muka yang lebih dinamik dan responsif.

Akhir sekali, kami membincangkan keadaan, aspek penting React yang membolehkan komponen mengurus dan bertindak balas terhadap interaksi pengguna. Dengan bantuan cangkuk useState dalam komponen berfungsi dan kaedah setState dalam komponen kelas, pembangun boleh membina aplikasi interaktif yang mencerminkan perubahan dalam data dari semasa ke semasa.

Sambil anda meneruskan perjalanan anda dengan React, menguasai konsep ini akan meletakkan asas yang kukuh untuk mencipta aplikasi yang canggih. Dalam siaran seterusnya, kami akan menyelami pengendalian acara dan pengurusan borang, memperkayakan lagi kit alat React anda. Nantikan!

Atas ialah kandungan terperinci Bermula dengan Komponen Bahagian React, Keadaan dan Props. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!