Apa itu Constructor?

  • Post
    Apa itu Constructor?

    Konstruktor adalah metode yang digunakan untuk menginisialisasi status objek di kelas. Ini secara otomatis dipanggil selama pembuatan objek di kelas.

    Konsep konstruktor sama di React. Konstruktor dalam komponen React dipanggil sebelum komponen dipasang. Saat Anda mengimplementasikan konstruktor untuk komponen React, Anda perlu memanggil metode super (props) sebelum pernyataan lainnya. Jika Anda tidak memanggil metode super (props), this.props tidak akan ditentukan dalam konstruktor dan dapat menyebabkan bug.

    Syntax

    1. Constructor (props) {
    2. super (props);
    3. }

    Di React, konstruktor terutama digunakan untuk dua tujuan:

    1. Ini digunakan untuk menginisialisasi status lokal komponen dengan menetapkan objek ke this.state.
    2. Ini digunakan untuk mengikat metode penanganan kejadian yang terjadi di komponen Anda.

    Catatan: Jika Anda tidak menginisialisasi state atau bind method untuk komponen React Anda, Anda tidak perlu mengimplementasikan konstruktor untuk komponen React.

    Anda tidak bisa memanggil metode setState () secara langsung di konstruktor () . Jika komponen perlu menggunakan status lokal, Anda perlu menggunakan ‘ this.state ‘ secara langsung untuk menetapkan status awal di konstruktor. Konstruktor hanya menggunakan this.state untuk menetapkan status awal, dan semua metode lain perlu menggunakan metode set.state ().

    Contoh

    Konsep konstruktor dapat dipahami dari contoh di bawah ini.

    App.js

    1. import React, {Component} dari  ‘react’ ;
    2. class App  extends  Component {
    3. konstruktor (props) {
    4. super (props);
    5. this .state = {
    6. data:  ‘www.javatpoint.com’
    7. }
    8. ini .handleEvent =  ini .handleEvent.bind ( ini );
    9. }
    10. handleEvent () {
    11. log ( ini .props);
    12. }
    13. render () {
    14. return (
    15. <h2> Contoh React Constructor </h2>
    16. <input type = “text” value = { this .state.data} />
    17. <button onClick = { this .handleEvent}> Silakan Klik </button>
  • );
  • }
  • }
  • export   Aplikasi default ;
  • Main.js

    1. import React dari  ‘react’ ;
    2. impor ReactDOM dari  ‘react-dom’ ;
    3. impor Aplikasi dari  ‘./App.js’ ;
    4. render (<App />, document.getElementById ( ‘app’ ));
    5. Apakah perlu memiliki konstruktor di setiap komponen?

    Tidak, tidak perlu memiliki konstruktor di setiap komponen. Jika komponen tidak kompleks, itu hanya mengembalikan sebuah node.

    1. class App  extends  Component {
    2. render () {
    3. return (
    4. <p> Nama: {  this .props.name} </p>
    5. );
    6. }
    7. }
    8. Apakah perlu memanggil super () di dalam konstruktor?

    Ya, perlu memanggil super () di dalam konstruktor. Jika Anda perlu menyetel properti atau mengakses ‘ini’ di dalam konstruktor di komponen Anda, Anda perlu memanggil super ().

    1. class App  extends  Component {
    2. konstruktor (props) {
    3. ini .fName =  “Jhon” ; // ‘ini’ tidak diperbolehkan sebelum super ()
    4. }
    5. render () {
    6. return (
    7. <p> Nama: {  this .props.name} </p>
    8. );
    9. }
    10. }

    Ketika Anda menjalankan kode di atas, Anda mendapatkan pesan kesalahan yang mengatakan ‘ini’ tidak diperbolehkan sebelum super () . Jadi jika Anda perlu mengakses props di dalam konstruktor, Anda perlu memanggil super (props).

    Fungsi Panah

    Fungsi Panah adalah fitur baru dari standar ES6. Jika Anda perlu menggunakan fungsi panah, acara apa pun tidak perlu diikat ke ‘this.’ Di sini, cakupan ‘ini’ bersifat global dan tidak terbatas pada fungsi pemanggilan apa pun. Jadi, jika Anda menggunakan Fungsi Panah, tidak perlu mengikat ‘ini’ di dalam konstruktor.

    1. import React, {Component} dari  ‘react’ ;
    2. class App  extends  Component {
    3. konstruktor (props) {
    4. super (props);
    5. this .state = {
    6. data:  ‘www.javatpoint.com’
    7. }
    8. }
    9. handleEvent = () => {
    10. log ( ini .props);
    11. }
    12. render () {
    13. return (
    14. <h2> Contoh React Constructor </h2>
    15. <input type = “text” value = { this .state.data} />
    16. <button onClick = { this .handleEvent}> Silakan Klik </button>
    17. );
    18. }
    19. }
    20. ekspor   Aplikasi default ;

    Kita dapat menggunakan konstruktor dengan cara berikut:

    1) Konstruktor digunakan untuk menginisialisasi status.

    1. class App  extends  Component {
    2. konstruktor (props) {
    3. // di sini, ini menyetel nilai awal untuk ‘inputTextValue’
    4. this .state = {
    5. inputTextValue:  ‘nilai awal’ ,
    6. };
    7. }
    8. }

    2) Menggunakan ‘ini’ di dalam konstruktor

    1. class App  extends  Component {
    2. konstruktor (props) {
    3. // ketika Anda menggunakan ‘ini’ dalam konstruktor, super () harus dipanggil terlebih dahulu
    4. super ();
    5. // artinya, ketika Anda ingin menggunakan ‘this.props’ dalam konstruktor, panggil seperti di bawah ini
    6. super (props);
    7. }
    8. }

    3) Memulai pustaka pihak ketiga

    1. class App  extends  Component {
    2. konstruktor (props) {
    3. this .myBook =  new  MyBookLibrary ();
    4. // Di sini, Anda dapat mengakses alat peraga tanpa menggunakan ‘ini’
    5. ini .Book2 =  new  MyBookLibrary (props.environment);
    6. }
    7. }

    4) Mengikat beberapa konteks (ini) ketika Anda membutuhkan metode kelas untuk diteruskan di props ke children.

    1. class App  extends  Component {
    2. konstruktor (props) {
    3. // ketika Anda perlu ‘mengikat’ konteks ke suatu fungsi
    4. ini .handleFunction =  ini .handleFunction.bind ( ini );
    5. }
    6. }

     

     

    credit. javatpoint

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.