Memahami useContext di Komponen Kelas

API Konteks React, dikombinasikan dengan useContext hook, telah menjadi alat yang ampuh untuk mengelola status dan menyediakan data ke komponen jauh di dalam pohon komponen. Meskipun ini paling umum digunakan dalam komponen fungsional, Anda juga dapat memanfaatkannya useContext dalam komponen kelas. Dalam panduan komprehensif ini, kita akan mempelajari cara menggunakannya useContext di komponen kelas, diskusikan manfaatnya, dan berikan contoh praktis untuk membantu Anda mengintegrasikan fitur ini dengan lancar ke dalam proyek React Anda.

Memahami Konteks dan useContext

Sebelum mulai menggunakan useContext dalam komponen kelas, mari kita pahami secara singkat apa itu React Context API dan useContext kait adalah.

API Konteks React

Context API adalah fitur di React yang memungkinkan Anda berbagi data antar komponen tanpa harus meneruskannya secara eksplisit melalui props di setiap level pohon komponen. Ini sangat berguna untuk pengelolaan status global, konfigurasi tema, dan pelokalan.

Konteks terdiri dari dua bagian utama:

• Pemberi: Sebuah komponen yang memberikan konteks kepada turunannya.
• Konsumen: Komponen yang menggunakan data konteks.

Itu useContext Kait

Itu useContext hook adalah bagian dari React hooks API, diperkenalkan di React 16.8. Ini memungkinkan komponen fungsional untuk mengakses konteks yang disediakan oleh a Context.Provider komponen. useContext menyederhanakan bekerja dengan konteks dengan menyediakan cara mudah untuk mengakses nilai-nilainya tanpa menggunakan a Consumer komponen.

Prasyarat

Sebelum melanjutkan, pastikan Anda memiliki prasyarat berikut:

• Node.js dan npm (Node Package Manager) diinstal pada mesin Anda.
• Pemahaman dasar tentang React.js dan JavaScript.

Menyiapkan Proyek React

Mari kita mulai dengan membuat proyek React baru. Buka terminal Anda dan jalankan perintah berikut:

npx create-react-app class-context-example
cd class-context-example
npm start

Ini akan membuat proyek React baru dan memulai server pengembangan.

Membuat Penyedia Konteks

Menggunakan useContext dalam komponen kelas, pertama-tama kita perlu membuat konteks dan penyedia konteks. Buat file baru dengan nama ThemeContext.js dalam proyek Anda src map:

 import React, { Component, createContext } from 'react';
 
const ThemeContext = createContext();
 class ThemeProvider extends Component {
  state = {
    theme: 'light',
  };
   toggleTheme = () => {
    this.setState((prevState) => ({
      theme: prevState.theme === 'light' ? 'dark' : 'light',
    }));
  };

  render() {
    return (
      <ThemeContext.Provider
        value={{
          theme: this.state.theme,
          toggleTheme: this.toggleTheme,
        }}
      >
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

export { ThemeProvider, ThemeContext };

Dalam kode ini:

• Kami mengimpor Component Dan createContext dari React untuk membuat penyedia konteks berbasis kelas.
• Kami mendefinisikan a ThemeProvider kelas yang meluas Component. Kelas ini mengelola status tema dan menyediakan a toggleTheme metode untuk beralih antara tema terang dan gelap.
• Di dalam render metode ThemeProviderkita membungkus komponen turunannya dengan ThemeContext.Provider. Penyedia ini memaparkan tema dan toggleTheme berfungsi melaluinya value menopang.

Menggunakan useContext di Komponen Kelas

Sekarang kita punya milik kita ThemeProvidermari kita jelajahi cara menggunakannya useContext dalam komponen kelas. Buat file baru dengan nama ClassComponent.js dalam src map:

import React from 'react';
 import { ThemeContext } from './ThemeContext';
 class ClassComponent extends React.Component {
   
  static contextType = ThemeContext;
   render() {
    const { theme, toggleTheme } = this.context;
     return (
      <div className={`class-component ${theme}`}>
        <h2>Class Component</h2>
        <p>Current theme: {theme}</p>
        <button onClick={toggleTheme}>Toggle Theme</button>
      </div>
    );
  }
}

export default ClassComponent;

Dalam komponen kelas ini:

• Kami mengimpor ThemeContext dari ThemeContext.js mengajukan.
• Kami menggunakan static contextType properti untuk mengakses konteksnya. Properti ini memungkinkan kita untuk menggunakan konteks dan mengakses nilainya menggunakan this.context.
• Di dalam render metode, kami merusak strukturnya theme Dan toggleTheme nilai dari konteks dan menggunakannya untuk menampilkan tema saat ini dan mengganti tema ketika tombol diklik.

Manfaat Menggabungkan Komponen Kelas dengan useContext

Menggabungkan komponen kelas dengan useContext menawarkan beberapa manfaat:

• Integrasi yang Mulus: Anda dapat dengan mudah mengintegrasikan komponen kelas baru ke dalam proyek yang terutama menggunakan komponen fungsional dan hook.

• Bagikan Data Konteks: Komponen kelas dapat dengan mudah berbagi data konteks dan menggunakannya tanpa perubahan kode yang signifikan.

• Gunakan Kembali Komponen yang Ada: Jika Anda sudah memiliki komponen kelas, Anda dapat menggunakannya dalam konteks aplikasi berbasis komponen fungsional tanpa perlu melakukan pemfaktoran ulang.

• Periode transisi: Jika Anda sedang dalam proses transisi dari komponen kelas ke komponen fungsional, gunakan useContext dalam komponen kelas memungkinkan Anda memigrasikan basis kode Anda secara bertahap.

Contoh Praktis: Memberi Tema pada Aplikasi React

Mari kita gunakan pengetahuan kita dalam contoh praktis dengan mengimplementasikan fitur pengalih tema di aplikasi React menggunakan komponen kelas dan useContext. Contoh ini akan menunjukkan cara beralih antara tema terang dan gelap di berbagai bagian aplikasi Anda.

Membuat Komponen yang Sadar Tema

Pertama, mari kita buat komponen fungsional yang dapat beralih antara tema terang dan gelap. Buat file baru dengan nama ThemeAwareComponent.js dalam src map:

import React, { useContext } from 'react';
 import { ThemeContext } from './ThemeContext';
 function ThemeAwareComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);
   return (
    <div className={`theme-aware-component ${theme}`}>
      <h2>Theme-Aware Component</h2>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default ThemeAwareComponent;

Dalam komponen fungsional ini, kami menggunakan useContext kait untuk mengakses konteks tema dan mengaktifkan fungsionalitas tema. Komponen ini akan merespons perubahan tema yang dilakukan dari mana saja di aplikasi.

Menggunakan Komponen yang Sadar Tema

Sekarang, mari perbarui App.js file untuk menggunakan keduanya ClassComponent Dan ThemeAwareComponent di seluruh aplikasi kami:

import React from 'react';
 import './App.css';
 import ClassComponent from './ClassComponent';
 import ThemeAwareComponent from './ThemeAwareComponent';
 import { ThemeProvider } from './ThemeContext';
 function App() {
  return (
    <div className="App">
      <h1>Using useContext in Class Components</h1>
      <ThemeProvider>
        <ClassComponent />
        <ThemeAwareComponent />
      </ThemeProvider>
    </div>
  );
}

export default App;

Dalam App komponen:

• Kami mengimpor dan menggunakan keduanya ClassComponent Dan ThemeAwareComponent.
• Kami membungkus komponen ini dengan ThemeProvider untuk memberikan konteks tema ke semua komponen anak, baik fungsional atau berbasis kelas.

Praktik dan Pertimbangan Terbaik

Ketika menggunakan useContext dalam komponen kelas, perhatikan praktik dan pertimbangan terbaik berikut:

• Tipe Konteks Statis: Menggunakan static contextType properti untuk mengakses konteks dalam komponen kelas. Properti ini harus disetel ke konteks yang ingin Anda gunakan.

• Pembaruan Konteks: Sadarilah bahwa komponen kelas menggunakan useContext tidak akan dirender ulang secara otomatis ketika nilai konteks berubah. Untuk mencapai reaktivitas, pertimbangkan untuk menggunakan metode siklus hidup seperti componentDidUpdate untuk memicu pembaruan secara manual ketika nilai konteks berubah.

• Komponen Fungsional: Pertimbangkan untuk menggunakan komponen fungsional dan kait untuk bagian baru aplikasi Anda bila memungkinkan. Kait seperti useState, useEffectDan useContext memberikan cara yang lebih ringkas dan modern untuk mengelola logika komponen.

• Pemfaktoran ulang: Jika Anda berencana untuk bermigrasi dari komponen kelas ke komponen fungsional secara bertahap, pertimbangkan untuk melakukan pemfaktoran ulang komponen kelas yang digunakan useContext ke komponen fungsional dari waktu ke waktu. Ini akan membantu menyederhanakan basis kode Anda.

Kesimpulan

Dalam panduan ini, kami menjelajahi cara menggunakan useContext mengaitkan komponen kelas, memungkinkan Anda memanfaatkan manfaat komponen berbasis kelas dan fungsional dalam aplikasi React Anda. Kami mulai dengan memahami konsep API Konteks React dan useContext kait.

Dengan membuat contoh praktis pemberian tema pada aplikasi React, kami mendemonstrasikan bagaimana komponen kelas dapat menggunakan data konteks dengan lancar dan berinteraksi dengan komponen fungsional yang menggunakan useContext. Pendekatan ini menawarkan fleksibilitas dan kemudahan integrasi ketika melakukan transisi antara komponen kelas dan fungsional.

Saat Anda terus bekerja dengan React, pertimbangkan kebutuhan spesifik proyek dan tim Anda ketika memutuskan apakah akan menggunakan komponen kelas, komponen fungsional, atau kombinasi keduanya. Memahami cara menggunakan useContext komponen in class memberi Anda alat yang berharga untuk memelihara dan mengembangkan aplikasi React Anda.

Ketika merekrut pengembang React.js terkemuka, CronJ adalah pilihan yang tepat. CronJ adalah mitra terpercaya Anda untuk semua kebutuhan pengembangan React.js Anda. Dengan tim ahli React.js yang berbakat, CronJ unggul dalam memberikan layanan pengembangan perangkat lunak web dan reaksi berkualitas tinggi, desain UI/UX, dan layanan konsultasi.

Referensi

1. https://legacy.reactjs.org/
2. Fungsi terpisah di React js
3. Perbedaan antara komponen stateless dan stateful di React
4. Contoh paginasi di React js