Higher Order Components

Higher Order Components adalah teknik lanjutan dalam React untuk menggunakan kembali logic dari suatu komponen. HOC menerima sebuah komponen dan mengembalikan komponen baru. HOC umum digunakan di aplikasi pihak ketiga React seperti Redux dan Relay.

  1. Agar lebih memahami, kita lihat studi kasus berikut.Higher Order Components
  2. Komponen CommentList mengambil initial data comments dari DataSource.getComments
  3. Menambahkan subscription
  4. Menghapus subscription
  5. Dan mengupdate state comments setiap ada perubahanHigher Order Components
  6. Komponen BlogPost mengambil initial data blogPost dari DataSource.getBlogPost
  7. Menambahkan subscription
  8. Menghapus subscription
  9. Dan mengupdate state blogPost setiap ada perubahan

Higher-Order Components
  1. Kedua komponen memiliki pola logika yang sama, tapi tidak identik
  2. Kedua komponen ini memanggil metode yang berbeda pada DataSource dan me-render komponen yang berbeda juga
  3. Pada aplikasi berskala besar, pola logika ini akan digunakan berulang-ulang.
  4. Pada kasus ini, HOC dapat berperan untuk mendefinisikan logika pada satu tempat dan dapat digunakan oleh banyak komponen.
  5. Kita dapat membuat sebuah HOC yang melakukan subscribe ke DataSource
  6. Komponen ini menerima argument komponen child dan data yang di-subscribeHigher Order Components
  7. HOC withSubscription mengambil initial data sesuai dengan argument yang diterima
  8. Menambahkan subscription
  9. Menghapus subscription
  10. Dan mengupdate statenya untuk setiap perubahan yang terjadiHigher Order Components

Kesimpulan

HOC dapat menjadi abstrak dari komponen yang memiliki logika serupa