React Higher-Order Components

  • Post
    React Higher-Order Components

    Ia juga dikenal sebagai HOC. Di React, HOC adalah teknik lanjutan untuk menggunakan kembali logika komponen. Ini adalah fungsi yang mengambil komponen dan mengembalikan komponen baru. Menurut situs resminya, ini bukanlah fitur (bagian) dalam React API, tetapi sebuah pola yang muncul dari sifat komposisi React. Mereka mirip dengan fungsi JavaScript yang digunakan untuk menambahkan fungsi tambahan ke komponen yang ada.

    Fungsi komponen orde tinggi menerima fungsi lain sebagai argumen. Fungsi map adalah contoh terbaik untuk memahami hal ini. Tujuan utamanya adalah untuk menguraikan logika komponen menjadi fungsi yang lebih sederhana dan lebih kecil yang dapat digunakan kembali sesuai kebutuhan.

    Sintak

    1. constNewComponent = higherOrderComponent(WrappedComponent);

    Kita tahu bahwa komponen mengubah alat peraga menjadi UI, dan komponen tingkat tinggi mengubah komponen menjadi komponen lain dan memungkinkan untuk menambahkan data atau fungsionalitas tambahan ke dalamnya. Hocs umum di perpustakaan pihak ketiga. Contoh HOC adalah koneksi Redux dan createFragmentContainer Relay .

    Sekarang, kita dapat memahami cara kerja HOC dari contoh di bawah ini.

    1. //Function Creation
    2. function add (a, b) {
    3. return a + b
    4. }
    5. function higherOrder(a, addReference) {
    6. return addReference(a, 20)
    7. }
    8. //Function call
    9. higherOrder(30, add) // 50

    Dalam contoh di atas, kami telah membuat dua fungsi add () dan higherOrder () . Sekarang, kami menyediakan fungsi add () sebagai argumen ke fungsi higherOrder (). Untuk pemanggilan, ganti namanya menjadi addReference di fungsi higherOrder (), lalu invoke it.

    Di sini, fungsi yang Anda teruskan disebut fungsi panggilan balik, dan fungsi tempat Anda meneruskan fungsi panggilan balik disebut fungsi higher-order (HOCs .

    Contoh

    Buat file baru dengan nama HOC.js. Di file ini, kami telah membuat satu fungsi HOC. Ini menerima satu argument sebagai komponen. Di sini, komponen tersebut adalah App .

    HOC.js

    1. importReact, {Component} from ‘react’;
    2. export defaultfunction Hoc(HocComponent){
    3. return class extends Component{
    4. render(){
    5. return (
    6. <div>
    7. <HocComponent></HocComponent>
    8. </div>
    9. );
    10. }
    11. }
    12. }

    Sekarang, sertakan file HOC.js ke dalam file App.js. Di file ini, kita perlu memanggil fungsi HOC.

    1. App = Hoc (App);

    Komponen App dibungkus di dalam komponen React lain sehingga kita dapat memodifikasinya. Dengan demikian, ini menjadi aplikasi utama dari Komponen Orde Tinggi.

    App.js

    1. importReact, { Component } from ‘react’;
    2. importHoc from ‘./HOC’;
    3. classApp extends Component {
    4. render() {
    5. return (
    6. <div>
    7. <h2>HOC Example</h2>
    8. JavaTpoint provides best CS tutorials.
    9. </div>
    10. )
    11. }
    12. }
    13. App = Hoc(App);
    14. export defaultApp;

    Konvensi Komponen Tingkat Tinggi

    • Jangan gunakan HOC di dalam metode render komponen.
    • Metode statis harus disalin untuk mengaksesnya. Anda dapat melakukan ini menggunakan paket hoist-non-react-statics untuk menyalin semua metode statis non-React secara otomatis.
    • HOC tidak bekerja untuk ref karena ‘Ref’ tidak lewat sebagai parameter atau argumen. Jika Anda menambahkan ref ke elemen dalam komponen HOC, ref merujuk ke instance komponen container terluar, bukan komponen yang dibungkus.

     

     

    credit. javatpoint

Tagged: 

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