ReactJS - Komponen Tingkat Tinggi

Komponen tingkat tinggi adalah fungsi JavaScript yang digunakan untuk menambahkan fungsi tambahan ke komponen yang sudah ada. Fungsi-fungsi ini adalahpure, yang berarti mereka menerima data dan mengembalikan nilai sesuai dengan data tersebut. Jika data berubah, fungsi tingkat tinggi dijalankan kembali dengan input data yang berbeda. Jika kami ingin memperbarui komponen pengembalian kami, kami tidak perlu mengubah HOC. Yang perlu kita lakukan adalah mengubah data yang digunakan fungsi kita.

Higher Order Component(HOC) membungkus komponen "normal" dan memberikan input data tambahan. Ini sebenarnya adalah fungsi yang mengambil satu komponen dan mengembalikan komponen lain yang membungkus yang asli.

Mari kita lihat contoh sederhana untuk memahami dengan mudah bagaimana konsep ini bekerja. ItuMyHOC adalah fungsi tingkat tinggi yang hanya digunakan untuk meneruskan data MyComponent. Fungsi ini membutuhkanMyComponent, menyempurnakannya dengan newData dan mengembalikan komponen yang ditingkatkan yang akan ditampilkan di layar.

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

Jika kita menjalankan aplikasi, kita akan melihat bahwa data diteruskan ke MyComponent.

Note- Komponen tingkat tinggi dapat digunakan untuk berbagai fungsi. Fungsi murni ini adalah inti dari pemrograman fungsional. Setelah Anda terbiasa, Anda akan melihat bagaimana aplikasi Anda menjadi lebih mudah untuk dipertahankan atau ditingkatkan.