Membuat Pilihan Antara Komponen Kelas Dan Komponen Fungsional Dalam React

Diterbitkan Ulang Oleh Plato

Followers: 0

Membuat Pilihan Antara Komponen Kelas dan Komponen Fungsional dalam React PlatoBlockchain Data Intelligence. Pencarian Vertikal. Ai.

Perbedaan inti

Di React, komponen adalah potongan kode yang mewakili bagian dari antarmuka pengguna. Ada dua jenis komponen utama dalam React: komponen kelas dan komponen fungsional.

Komponen kelas didefinisikan menggunakan kelas yang memperluas kelas React.Component. Mereka lebih kaya fitur dan memiliki lebih banyak opsi untuk menangani peristiwa status dan siklus hidup. Seperti inilah tampilan komponen kelas:

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

Komponen fungsional hanyalah fungsi JavaScript yang mengembalikan elemen React. Mereka lebih sederhana daripada komponen kelas dan lebih mudah dibaca dan ditulis. Ini adalah komponen yang sama seperti di atas, ditulis sebagai komponen fungsional:

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

Kapan menggunakan apa

Secara umum, Anda harus menggunakan komponen fungsional kecuali jika Anda perlu menggunakan fitur yang hanya tersedia di komponen kelas, seperti metode status atau siklus hidup.
Ada beberapa alasan mengapa Anda mungkin lebih suka menggunakan komponen kelas atas komponen fungsional:

minat: Komponen kelas dapat memudahkan untuk memahami kode, terutama jika Anda memiliki banyak metode status atau siklus proses. Kode diatur ke dalam metode yang didefinisikan dengan jelas dan mudah ditemukan.
Dapat digunakan kembali: Komponen kelas dapat digunakan kembali dengan lebih mudah, karena dapat diperluas untuk membuat komponen baru. Ini bisa sangat berguna jika Anda memiliki banyak fungsi bersama antar komponen.
Organisasi: Komponen class dapat mempermudah pengaturan kode Anda, karena Anda dapat mengelompokkan metode terkait bersama-sama dalam komponen yang sama. Ini dapat memudahkan untuk menemukan dan memelihara kode.

Ada juga beberapa alasan mengapa Anda mungkin ingin memilih untuk menulis komponen fungsional:

Saat Anda tidak perlu menggunakan metode status atau siklus hidup: Jika Anda tidak perlu menggunakan metode status atau siklus hidup, maka komponen fungsional adalah pilihan yang baik, karena lebih sederhana dan lebih mudah dibaca dan ditulis daripada komponen kelas.
Saat Anda membutuhkan komponen murni: Komponen fungsional adalah komponen "murni", artinya komponen tersebut hanya bergantung pada propertinya dan tidak memiliki statusnya sendiri. Ini bisa berguna jika Anda ingin memastikan bahwa komponen dirender ulang hanya ketika propsnya berubah.
Saat Anda ingin mengoptimalkan kinerja: Karena komponen fungsional murni, mereka dapat dioptimalkan dengan lebih mudah oleh React, yang dapat menghasilkan kinerja yang lebih baik.
Saat Anda ingin menulis kode yang ringkas dan mudah dibaca: Karena komponen fungsional lebih sederhana dan memiliki bagian yang bergerak lebih sedikit, mereka dapat lebih mudah dibaca dan dipahami, terutama jika Anda memiliki banyak komponen dalam aplikasi Anda.

secara umum, Anda harus menggunakan komponen fungsional kecuali Anda memiliki kebutuhan khusus yang hanya dapat dipenuhi dengan komponen kelas.

useEffect & useState

Namun, penting untuk diperhatikan bahwa Anda juga dapat menggunakan metode status dan siklus hidup dalam komponen fungsional, dengan menggunakan gunakanNegara dan gunakanEfek kait. Secara umum, Anda harus memilih jenis komponen yang paling masuk akal untuk kebutuhan Anda, dan itu akan membuat kode Anda paling mudah dibaca dan dipahami.

Jika Anda masih ingin mengimplementasikan peristiwa status atau siklus hidup, Anda akan memiliki kemungkinan untuk menggunakan pengait untuk mengaktifkan komponen Anda.

Ini adalah bagaimana Anda akan menerapkan gunakanEfek dan gunakanNegara di dalam komponen fungsional Anda

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

Di sini, kami memiliki komponen yang melacak hitungan, dan menampilkan hitungan saat ini kepada pengguna. Komponen menggunakan gunakanNegara hook untuk menambahkan status ke komponen fungsional, dan gunakanEfek kait untuk melakukan suatu tindakan (memperbarui judul dokumen) saat hitungan berubah.

Pengambilan Kunci

Ini adalah kesimpulan utama ketika harus memilih antara komponen kelas dan komponen fungsional di React:

Komponen kelas didefinisikan menggunakan kelas yang memperluas kelas React.Component, dan memiliki lebih banyak opsi untuk menangani peristiwa status dan siklus hidup.
Komponen fungsional hanyalah fungsi JavaScript yang mengembalikan elemen React, dan lebih sederhana serta lebih mudah untuk dibaca dan ditulis.
Anda harus menggunakan komponen fungsional kecuali jika Anda perlu menggunakan fitur yang hanya tersedia di komponen kelas, seperti metode status atau siklus hidup.
Anda dapat menggunakan hook useState dan useEffect untuk menambahkan status dan melakukan efek samping pada komponen fungsional.
Secara keseluruhan, pilihan antara komponen kelas dan komponen fungsional tergantung pada apa yang paling sesuai dengan kebutuhan Anda dan apa yang membuat kode Anda paling mudah dibaca dan dipahami.

Semoga penjelasan singkat ini dapat membantu Anda. Jika Anda ingin mentoring atau panduan apa pun di jalur Anda untuk mempelajari javascript, react, atau pengembangan web secara umum, jangan ragu untuk menghubungi saya untuk sesi 1:1.