melihat bertindak balas melalui kanta java

Dalam bootcamp pengekodan kami, semasa kami berlari dengan pantas melalui React dan berpeluh melalui makmal kami, pengajar kami akan berkata - "Jika anda juling, React adalah sama seperti Java."

Pada mulanya, ia hanyalah frasa yang menarik dan lucu. ? Walau bagaimanapun, yang terbaru, saya melawat semula React semasa mengerjakan projek kalkulator Peta Google peribadi. Beberapa hari kemudian, saya dapat mula melihat beberapa persamaan itu terserlah.

Mari kita mendalami hubungan ini dan lihat bagaimana konsep asas Java dapat menerangkan pemahaman kita tentang React. ?

Jadual Kandungan

1. App.jsx sebagai Kelas utama Java (psvm)

2. Pengurusan Negeri dengan Cangkuk sebagai Pengambil dan Penetap Java

3. Bekas sebagai Kelas Java

4. Komponen sebagai Kaedah Java

5. Pulangan React dalam Komponen

6. Prop sebagai Parameter Kaedah Java

7. Panggil Balik Berfungsi sebagai Kaedah Java yang Mengembalikan Nilai

1. App.jsx sebagai Kelas utama Java (psvm)

Jawa:

Di Java, kelas utama berfungsi sebagai titik masuk untuk program dan ia memulakan pelaksanaan program.

Sebagai contoh, anda mungkin membuat instantiate objek dari kelas yang berbeza dan menggunakan kaedah masing-masing:

public class Main {
    public static void main(String[] args) {
        Home home = new Home();
        home.render();
        About about = new About();
        about.show();
    }
}

Reaksi:

Begitu juga, dalam aplikasi React, fail App.jsx memainkan peranan yang setanding dengan mengatur aliran aplikasi utama.

Sama seperti kaedah utama dalam Java boleh memanggil berbilang fungsi, App.jsx bertanggungjawab untuk memaparkan semua komponen berdasarkan penghalaan dan keadaan semasa aplikasi.

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

Dalam contoh React di atas daripada App.jsx, komponen yang diberikan dalam pernyataan pulangan mencerminkan proses memanggil kaedah atau memulakan objek dalam Java.

Dalam kes ini, bekas dan halaman dipaparkan berdasarkan laluan URL halaman web.

2. Pengurusan Negeri dengan Cangkuk sebagai Pengambil dan Penetap Java

Jawa:
Di Java, anda mengurus sifat dengan pembolehubah dan kaedah pengambil/penetap awam untuk mendapatkan dan menetapkan sifat atribut, seperti nama pengguna pengguna.

private String username;

public String getUsername() {
    return this.username;
}

public void setUserData(String username) {
    this.username = username;
}

Reaksi:

Kait useState React mengendalikan keadaan aplikasi sama seperti cara Java menggunakan kaedah getter dan setter untuk mengurus sifat objek.

Kait useState dalam React membolehkan anda mengisytiharkan pembolehubah keadaan yang boleh berubah dari semasa ke semasa, sama seperti pembolehubah tika Java dalam kelas.

const [username, setUsername] = useState("");

Dalam contoh di atas:

• setUserName berfungsi sebagai kaedah penetap, membenarkan kemas kini kepada nama pengguna. Walaupun useState("") bermaksud nama pengguna dimulakan sebagai rentetan kosong, setUserName mengemas kini nilai.

Di bawah ini kami mempunyai fungsi handleInputChange yang mengesan perubahan dalam borang web untuk mengemas kini maklumat pengguna dan mengemas kini nilai nama pengguna kepada perkara yang dimasukkan pengguna.

public class Main {
    public static void main(String[] args) {
        Home home = new Home();
        home.render();
        About about = new About();
        about.show();
    }
}

• Anda boleh memikirkan untuk mengakses nama pengguna sebagai pengambil.

Setiap kali anda merujuk nama pengguna dalam komponen, anda menggunakan pengambil dengan berkesan untuk mengakses nilainya. Sebagai contoh, halaman web saya boleh memaparkan nama pengguna dengan:

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

3. Bekas sebagai Kelas Java

Jawa:
Di Java, kelas mengumpulkan tugas dan data yang berkaitan bersama-sama. Mereka membantu mengurus cara maklumat mengalir dalam aplikasi anda.

Dalam contoh ini, kelas Kalkulator mengendalikan pengiraan dan menyimpan hasilnya.

private String username;

public String getUsername() {
    return this.username;
}

public void setUserData(String username) {
    this.username = username;
}

Reaksi:

Begitu juga, dalam React, bekas memainkan peranan penting dengan menyambungkan data aplikasi kepada komponen. Mereka mengendalikan perkara seperti mengambil data daripada panggilan API dan mengurus keadaan apl.

Dalam contoh ini, bekas Kalkulator mengurus keadaan nilai input dan hasilnya,

const [username, setUsername] = useState("");

4. Komponen sebagai Kaedah Java

Jawa:

Kaedah dalam Java melakukan tindakan tertentu, seperti mengendalikan input pengguna. Kaedah ini boleh digunakan mengikut keperluan untuk memudahkan pelbagai fungsi dalam aplikasi anda.

const handleInputChange = (event) => { 
    setUserName(event.target.value);
};

Reaksi:

Sama seperti kaedah Java adalah tugas yang kecil dan fokus, React Components mempunyai tujuan yang sama, bertindak sebagai blok binaan asas antara muka pengguna anda.

Setiap komponen direka untuk fungsi tertentu dan boleh digunakan semula sepanjang aplikasi.

Komponen Penapis Manual di bawah hanya tertumpu pada pilihan penapisan untuk pengguna. Ia membentangkan kotak pilihan yang membolehkan pengguna memilih kategori tertentu.

Komponen ini kemudiannya boleh dipanggil dalam halaman bekas UserForm.

  <p>Welcome to our page {username}</p>

5. Pulangan React dalam Komponen

Jawa:

Di Java, kaedah mungkin mengembalikan nilai yang digunakan oleh bahagian lain program untuk menjana output.

Sebagai contoh, kaedah renderOutput mengembalikan rentetan yang mengandungi matlamat pengguna, yang kemudiannya boleh dipaparkan di tempat lain dalam program.

public class Calculator {
    private int result;

    public void calculateSum(int a, int b) {
        result = a + b;
    }

    public int getResult() {
        return result;
    }
}

Reaksi:

Pernyataan pemulangan dalam komponen React adalah penting untuk memaparkan antara muka pengguna. Dalam React, perkara yang anda pulangkan daripada komponen menentukan perkara yang pengguna lihat pada skrin.

Ini adalah serupa dengan cara seperti yang dinyatakan di atas, kaedah dalam Java yang mengembalikan data yang dimaksudkan untuk diproses atau dipaparkan di bahagian lain program.

Dalam contoh ini, komponen UserGoal mengembalikan elemen perenggan yang memaparkan matlamat pengguna.

public class Main {
    public static void main(String[] args) {
        Home home = new Home();
        home.render();
        About about = new About();
        about.show();
    }
}

6. Props sebagai Parameter Kaedah Java

Jawa:

Anda boleh menghantar argumen kepada kaedah Java, yang mana argumen boleh mempengaruhi keadaan atau gelagat objek panggilan.

Sebagai contoh, pertimbangkan kaedah Java mudah yang mengambil mesej sebagai parameter. Mesej yang diterima akan mempengaruhi perkara yang akan ditunjukkan oleh konsol.

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

Reaksi:

Dalam React, komponen boleh menerima prop, yang serupa dengan parameter dalam kaedah Java. Komponen bertindak balas menggunakan prop untuk menentukan kandungan dan fungsinya.

Prop mengawal cara komponen berkelakuan dan data yang mereka paparkan.

Katakanlah kita mempunyai komponen induk yang dipanggil WelcomePage yang akan menghantar mesej kepada komponen anak MessageDisplay.

Dalam erti kata lain, bayangkan MessageDisplay sebagai bahagian pada halaman pendaratan Halaman Selamat Datang di mana mesej dipaparkan.

Kami boleh mentakrifkan mesej dalam komponen induk dan menyampaikannya sebagai prop kepada komponen MessageDisplay:

private String username;

public String getUsername() {
    return this.username;
}

public void setUserData(String username) {
    this.username = username;
}

Komponen MessageDisplay akan menerima prop ini dan menjadikannya:

const [username, setUsername] = useState("");

7. Panggilan Balik Berfungsi sebagai Kaedah Java yang Mengembalikan Nilai

Jawa:

Di Java, anda selalunya mempunyai kaedah dalam kelas yang melaksanakan tindakan tertentu dan mengembalikan nilai kepada pemanggilnya. Sebagai contoh, anda mungkin mempunyai kelas bernama Kalkulator dengan kaedah yang mengira perbezaan antara dua nombor:

const handleInputChange = (event) => { 
    setUserName(event.target.value);
};

^Dalam kelas lain anda mencipta contoh kelas Kalkulator dan memanggil kaedah itu.

Reaksi:

React mengikut konsep yang sama, tetapi ia memfokuskan pada hubungan antara komponen.

Apabila anda mempunyai komponen induk yang mengandungi komponen anak, fungsi panggil balik membantu memudahkan komunikasi antara mereka. (Ingat: induk ialah bekas utama yang menyimpan komponen lain - serupa dengan contoh awal kami tentang "halaman pendaratan" induk dengan sub-komponen kotak mesej)

Sebagai contoh, katakan anda mempunyai ChildComponent yang perlu menghantar beberapa data yang dikira kembali ke komponen induknya.

Di bawah ini kami menghantar fungsi handleCalculationResult daripada ibu bapa kepada anak sebagai prop.

Fungsi ini bertindak seperti panggilan balik:

  <p>Welcome to our page {username}</p>

Anda boleh melihat di bawah bagaimana onCalculate ialah fungsi panggil balik yang diterima dalam ChildComponent daripada komponen induk.

Apabila butang dalam ChildComponent diklik, ia melakukan pengiraan dan menggunakan onCalculate untuk menghantar semula keputusan kepada ibu bapa. Ini meniru cara kaedah Java mengembalikan nilai kepada pemanggilnya.

public class Calculator {
    private int result;

    public void calculateSum(int a, int b) {
        result = a + b;
    }

    public int getResult() {
        return result;
    }
}

Dengan cara ini, ibu bapa menguruskan keadaan aplikasi dan tingkah laku keseluruhan manakala kanak-kanak memfokus pada tindakan tertentu (dalam kes ini, pengiraan).

Atas ialah kandungan terperinci melihat bertindak balas melalui kanta java. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!