Komponen Tingkat Tinggi dalam Bereaksi: Contoh Pola Kasus Penggunaan Umum – Beragampengetahuan

Dalam postingan blog ini, kita akan mempelajari apa itu Higher-Order Components dan mempelajari tentang pola kasus penggunaan yang umum. Kita juga akan melihat contoh kode dari pola kasus penggunaan umum yang menggunakan komponen tingkat tinggi.

Komponen Urutan Tinggi atau HOC pada dasarnya adalah fungsi yang menggunakan komponen sebagai argumen dan mengembalikan komponen baru.

Komponen tingkat tinggi dapat digunakan untuk abstrak logika bersama yang digunakan oleh banyak komponen.

Komponen dalam React memungkinkan penggunaan kembali kode dan mencegah duplikasi kode.

Namun, menerapkan prinsip DRY tidak selalu mudah saat Anda mengembangkan aplikasi React, dan Anda harus menulis kode duplikat di beberapa komponen.

Tetapi dengan menggunakan HOC Anda dapat mengurangi kode duplikat dengan mengenkapsulasi logika tersebut ke dalam komponen yang lebih tinggi. Kita akan melihat beberapa contoh dan pola di bawah ini.

Mari kita lihat contoh yang sangat mendasar untuk memahami Komponen Urutan Tinggi.

Ini adalah contoh yang sangat mendasar dan tidak masuk akal di dunia nyata untuk merangkum logika ke dalam HOC, tetapi ini berfungsi sebagai contoh yang baik untuk memahami HOC.

Kita juga akan melihat di mana komponen tingkat tinggi digunakan dalam kasus penggunaan dunia nyata dalam contoh dan skenario nanti di postingan blog ini.

Mari kita lihat contoh kita di mana kita akan membuat komponen React yang mengubah warna latar belakangnya menjadi biru saat mouse diarahkan.

const TextComponent = ({ text }) => {
const [isHovered, setHovered] = useState(false);
function handleMouseEnter() {
setHovered(true);
}
function handleMouseLeave() {
setHovered(false);
}
return (
<>
<p
style={{ backgroundColor: isHovered ? "blue" : "white" }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
{ text }
</p>
</>
);
};

Kami membuat React Componenet sederhana bernama TextComponent ketika mouse melayang TextComponent Warna latar belakangnya berubah menjadi biru.

Untuk mencapai ini, kami menggunakan isHovered variabel dan atur ke true ada MouseEnter acara, lalu setel ulang ke false ada MouseLeave peristiwa.

Namun, jika kita ingin menambahkan fungsionalitas yang sama ke komponen lain dari aplikasi kita, maka kita harus mengulang kode yang sama di komponen lain.

Untuk mencegah hal ini kita dapat membungkus logika untuk mendeteksi hover di HOC, mari kita lihat contoh terbaru menggunakan HOC.

// Higher Order Component that Contians the logic
// to detect the hover.
function withHover(WrappedComponent) {
return function (props) {
const [isHovered, setHovered] = useState(false);
function handleMouseEnter() {
setHovered(true);
}
function handleMouseLeave() {
setHovered(false);
}
return (
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<WrappedComponent {...props} isHovered={isHovered} />
</div>
);
};
}
// Updated Text Component without the Hover Logic
const TextComponent = ({ text, isHovered }) => {
return (
<>
<p style={{ backgroundColor: isHovered ? "blue" : "white" }}>{text}</p>
</>
);
};
// Updated Input Component without the Hover Logic
const InputComponent = ({ type, isHovered }) => {
return (
<input
type={type}
style={{ backgroundColor: isHovered ? "blue" : "white" }}
/>
);
};
// Creating components that contain hover logic using
// Higher Order Component.
const TextComponentWithHover = withHover(TextComponent);
const InputComponentWithHover = withHover(InputComponent);
// Using the Components in our App
const App = () => {
return (
<div className="App">
<TextComponentWithHover
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat."
/>
<InputComponentWithHover type="text" />
</div>
);
};
export default App;

Dalam contoh kode di atas, kami membuat sebuah kelas bernama withHover.

di dalam withHover Komponen Orde Tinggi, yang sedang kita hadapi MouseEnter Dan MouseLeave peristiwa dan pengaturan isHovered tiba true saat melayang di atas komponen.

kami juga lulus isHovered sebagai penyangga WrappedComponent Kami menggunakan prop ini untuk menangani kondisi hover WrappedComponents.

Kami juga memperbarui TextComponent dan kode TextComponent menjadi jauh lebih kecil.di dalam TextComponent Kami hanya memeriksa apakah isHover Alat peraga diatur ke true Jika diset ke true maka kita atur warna background menjadi biru.

Untuk melihat sampel, klik di sini: Contoh APP

Sekarang mari kita bahas beberapa pola kasus penggunaan umum yang menguntungkan untuk menggunakan komponen orde tinggi.

Komponen tingkat tinggi dapat digunakan untuk mengelola status dan melakukan pengambilan data asinkron, sedangkan komponen normal akan berfokus pada menampilkan data.

Ini mengarah pada penciptaan komponen yang digabungkan secara longgar dengan pemisahan peran yang jelas. Mari kita lihat sebuah contoh:

contoh:

import "./styles.css";
import { useState, useEffect } from "react";
function withDataFetch(WrappedComponent, fetchData) {
return function (props) {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchWrapper = async () => {
try {
const data = await fetchData(props);
setData(data);
setIsLoading(false);
} catch (error) {
setError(error);
setIsLoading(false);
}
};
fetchWrapper();
}, [props]);
return (
<WrappedComponent
{...props}
data={data}
isLoading={isLoading}
error={error}
/>
);
};
}
const fetchPosts = async () => {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const data = await response.json();
return data;
};
const PostComponent = ({ data, isLoading, error }) => {
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
};
const PostComponentWithData = withDataFetch(PostComponent, fetchPosts);
export default function App() {
return (
<div className="App">
<PostComponentWithData />
</div>
);
}

Dalam contoh kode di atas, kami membuat komponen urutan lebih tinggi yang disebut withDataFetchHOC ini menerima komponen dan metode untuk mendapatkan data sebagai parameter.

HOC berisi logika untuk memanggil fetchData metode untuk mengambil data, mengirimkan data ke WrappedComponent.Itu juga berlalu isLoading Dan error pasangan negara WrappedComponent sehingga komponen dapat menampilkan UI yang sesuai kepada pengguna.

Lalu kita buat milik kita PostComponent. ini PostComponet Tampilkan data dalam daftar dan periksa error Dan isLoading alat peraga dan tampilkan pesan yang sesuai.

Akhirnya, kami membuat milik kami fetchPosts metode, yang panggilan jsonplaceholder.typicode.com/posts API untuk mendapatkan daftar postingan yang disimulasikan.

Kemudian kami memanggil HOC kami, dan melewati kami PostComponent dan metode pengambilan data kami fetchPosts dan menghasilkan komponen pembungkus PostComponentWithData dan menambahkannya ke aplikasi kita.

Dan PostComponetWithData Menampilkan daftar posting:

Dengan Obrolan Sederhana Mati, Anda dapat dengan mudah menambahkan fungsionalitas obrolan ke aplikasi Anda. SDK Obrolan JavaScript yang andal yang disediakan oleh Dead Simple Chat memungkinkan Anda menambahkan obrolan dalam hitungan menit.

Komponen orde tinggi juga dapat digunakan untuk hanya menampilkan komponen ketika suatu kondisi terpenuhi.

Misalnya: sekumpulan komponen hanya boleh terlihat oleh pengguna yang berwenang, atau fitur eksperimental hanya boleh diaktifkan saat bendera fitur disetel.

Jadi, dengan menggunakan komponen yang lebih tinggi, kita dapat mengabstraksi logika untuk mendapatkan informasi apakah komponen tersebut harus ditampilkan atau tidak, dan menggunakannya kembali di beberapa komponen.

Contoh 1: Otorisasi

Mari kita lihat contoh berikut:

import "./styles.css";
// Higher Order Component
function withAuthorization(WrappedComponent, checkPermissions) {
return function (props) {
// You can also wrap it in useEffect for async permission checks.
return checkPermissions(props) ? (
<WrappedComponent {...props} />
) : (
<p>Please login with appropriate role</p>
);
};
}
const PrivateComponent = () => {
return <div>This is a Private Component, only visible to Admin Users.</div>;
};
const checkPermission = (props) => {
return props.userRole === "admin";
};
const PrivateComponentComponentWithAuthorization = withAuthorization(
PrivateComponent,
checkPermission
);
export default function App() {
return (
<div className="App">
<PrivateComponentComponentWithAuthorization userRole="admin" />
<PrivateComponentComponentWithAuthorization userRole="guest" />
</div>
);

Dalam kode di atas, kami membuat komponen urutan lebih tinggi yang disebut withAuthorization.

HOC menerima a WrappedComponent metode yang disebut checkPermissions Periksa apakah pengguna memiliki izin untuk melihat WrappedComponenet

Sekarang dalam contoh kita, kita asumsikan checkPermission metode sinkron, tetapi contoh ini juga dapat dengan mudah dimodifikasi untuk bekerja dengan pemeriksaan izin asinkron dengan menggunakan useEffect kait.

belajar bagaimana menggunakan useEffect Kait di HOC lihat contoh fetchPosts sebelumnya.

Selanjutnya kita buat file bernama PrivateComponent. ini PrivateComponent Tidak ada logika untuk memeriksa izin pengguna, komponen ini hanya boleh ditampilkan kepada pengguna admin.

Pada akhirnya kami membuat metode yang sangat mendasar untuk memeriksa izin yang disebut checkPermission metode.Metode ini hanya memeriksa apakah userRole Ya admin.

Contoh 2: Toggle Fitur

Berikut adalah contoh menambahkan toggle fitur menggunakan komponen tingkat tinggi:

import "./styles.css";
import React from "react";
function withFeatureToggle(WrappedComponent, featureEnabled) {
return function (props) {
return featureEnabled ? <WrappedComponent {...props} /> : <></>;
};
}
const NewFeatureComponent = () => {
return (
<div>
<button>New Feature</button>
</div>
);
};
// Global Feature Toggle.
const enableNewFeatures = false;
const NewFeatureComponentWithFeatureToggle = withFeatureToggle(
NewFeatureComponent,
enableNewFeatures
);
export default function App() {
return (
<div className="App">
<NewFeatureComponentWithFeatureToggle />
</div>
);
}

Kami membuat sakelar fitur global yang disebut sebagai enableNewFeatures Ketika disetel ke true komponen NewFeatureComponent akan ditampilkan, jika tidak maka akan disembunyikan.

Komponen tingkat tinggi juga tersedia untuk menambahkan terjemahan, internasionalisasi, dan kemampuan untuk beralih antar bahasa dengan mudah.

Mari kita lihat sebuah contoh:

import "./styles.css";
import React, { useState } from 'react';
const i18n = {
en: {
"Please Login": 'Please Login',
},
es: {
"Please Login": 'Por favor Iniciar sesión',
},
fr: {
"Please Login": 'Veuillez vous connecter'
}
};
function withTranslation(WrappedComponent, translation) {
return function (props) {
const [language, setLanguage] = useState('en');
const translate = (key) => translation[language][key] || key;
const changeLanguage = (lang) => {
setLanguage(lang);
};
return (
<WrappedComponent
{...props}
t={translate}
language={language}
changeLanguage={changeLanguage}
/>
);
};
}
const LoginComponent = ({ t, language, changeLanguage }) => {
return (
<div>
<p>{t('Please Login')}</p>
<p>Current language: {language}</p>
<button onClick={() => changeLanguage('en')}>English</button>
<button onClick={() => changeLanguage('es')}>Español</button>
<button onClick={() => changeLanguage('fr')}>Français</button>
</div>
);
};
const LoginComponentWithTranslation = withTranslation(LoginComponent, i18n);
export default function App() {
return (
<div className="App">
<LoginComponentWithTranslation />
</div>
);
}

Mari kita pahami contoh di atas.Kami membuat objek yang disebut sebagai i18n Berisi terjemahan dalam 3 bahasa.

Kemudian kami membuat komponen urutan lebih tinggi yang disebut withTranslation Menerima komponen dan transformasi sebagai argumen.

ini withTranslation HOC mengembalikan objek anak i18n Objek berdasarkan bahasa yang dipilih oleh pengguna. Ini juga menyediakan cara untuk mengubah bahasa yang dipilih.

Kemudian kami membuat milik kami LoginComponentini LoginComponent Menerima props dari komponen tingkat tinggi, termasuk terjemahan yang disimpan di props t Bahasa yang saat ini dipilih dalam alat peraga language Dan changeLanguage metode.

Akhirnya kami membuat file bernama LoginComponentWithTranslation Menggunakan HOC kami memungkinkan kami untuk dengan mudah beralih antar bahasa.

Untuk melihatnya beraksi, klik di sini: https://deadsimplechat.com/blog/higher-order-components-in-react/#4-error-boundary

Komponen tingkat tinggi juga dapat digunakan untuk menangani kesalahan yang tidak tertangani menggunakan batasan kesalahan. Perhatikan bahwa komponen fungsional tidak mendukung batasan kesalahan.

Oleh karena itu, hanya HOC yang harus menjadi komponen kelas, WrappedComponent Dapat menjadi komponen fungsional.

Mari kita lihat contoh batas kesalahan menggunakan HOC:

import React, { Component } from "react";
function withErrorBoundary(WrappedComponent) {
return class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
console.error("Error handled by ErrorBoundary:", error, errorInfo);
}
render() {
if (this.state.hasError) {
return <p>Something went wrong: {this.state.error.message}</p>;
}
return <WrappedComponent {...this.props} />;
}
};
}
const DataViewerComponent = ({ data }) => {
if (!data) {
throw new Error("Please specify the data");
}
return (
<div>
<h2>Data:</h2>
{data}
</div>
);
};
const DataViewerWithErrorBoundary = withErrorBoundary(DataViewerComponent);
export default function App() {
return (
<div className="App">
<DataViewerWithErrorBoundary />
</div>
);

Pada kode di atas kita membuat HOC withErrorBoundary Mengembalikan komponen kelas yang membungkus batas kesalahan WrappedComponent.

setiap kali pengecualian terjadi getDerivedStateFromError dipanggil, kami menyimpan kesalahan dalam status dan set hasError tiba true.

Kapan hasError Setel ke true dan kami akan menampilkan pesan “Ada yang salah:” bersama dengan pesan kesalahan.

jika hasError set ke false maka kami akan menampilkan <WrappedComponent />

Kemudian kita membuat DataViewerComponent dan masuk DataViewerComponent jika data Alat peraga kosong.

Saat kami menjalankan aplikasi, Anda akan melihat pesan “Terjadi kesalahan: Silakan tentukan data” ditampilkan.

Kami telah melihat banyak contoh Higher Order Components di posting blog ini.Anda mungkin telah memperhatikan HOC dengan kata tersebut with.

withErrorBoundary, withTranslation dll.Tidak ada konvensi penamaan yang ketat untuk komponen tingkat tinggi, tetapi lebih baik menambahkan kata kunci sebelum HOC with.

Dan komponen baru yang kita buat setelah membungkusnya dengan HOC harus berisi nama HOC untuk menunjukkan bahwa komponen tersebut telah ditingkatkan dengan HOC.

Contoh: Kami membuat HOC withTranslation dan panggilan LoginComponent Komponen kami yang disempurnakan disebut LoginComponentWithTranslation

const LoginComponentWithTranslation = withTranslation(LoginComponent, i18n);

Dalam postingan blog ini, kita mempelajari apa itu komponen tingkat tinggi dan cara membuat komponen tingkat tinggi yang sederhana.

Kami juga melihat contoh skenario di mana komponen orde tinggi biasanya digunakan.

Semoga artikel ini memberi Anda pemahaman yang baik tentang bagaimana dan di mana menggunakan Komponen Tingkat Tinggi dalam aplikasi Anda.

HOC adalah pola React hebat yang mempromosikan penggunaan kembali kode dan membantu Anda membuat kode yang bersih dan dapat dipelihara.