React Context API: Semua yang perlu Anda ketahui – Codewithaden

Dalam khas Reaksi aplikasi, data diteruskan top-down ( orang tua ke anak ) melalui alat peraga, tetapi ini bisa rumit dan tidak baik untuk alat peraga tertentu (mis., Preferensi lokal, tema) yang diperlukan oleh banyak komponen dalam aplikasi.

Tim React menyarankan untuk tetap berpegang pada alat peraga jika Anda hanya memiliki beberapa tingkat anak untuk lulus karena masih merupakan API yang jauh lebih rumit daripada Konteks API

Buat aplikasi React baru menggunakan perintah berikut.

npx create-react-app contextapi
cd contextapi
npm start 

React

Saat Anda memulai server pengembangan reaksi dan menemukan kesalahan tentang Webpack-dev-server, Anda akan menemukan solusi di terminal; Jika berhasil untuk Anda, maka sebaiknya, Anda dapat menggunakan solusi di bawah ini.

Buat satu .env file di root dan tambahkan kode berikut.

SKIP_PREFLIGHT_CHECK=true 

Instal Bootstrap 4 Kerangka kerja CSS juga oleh perintah berikut.

yarn add bootstrap

# or

npm install bootstrap 

Anda membuat konteks menggunakan React.createContext () , yang mengembalikan Konteks obyek.

const {Provider, Consumer} = React.createContext() 

Kemudian Anda membuat komponen pembungkus yang mengembalikan Pemberi komponen, dan Anda menambahkan sebagai anak -anak semua elemen dari mana Anda ingin mengakses konteksnya. Mari kita ambil contoh.

Tulis kode berikut di dalam SRC >> app.js mengajukan.

// App.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

const BtnColorContext = React.createContext('btn btn-dark');

class App extends Component {
  render() {
    return (
      
        ;
  }
}

export default App;
 

Di output halaman web, Anda dapat melihat bahwa warna tombol diubah sesuai dengan BTN BTN-INFO.

React Context API

Reaksi konteks dirancang untuk berbagi data yang dapat dianggap sebagai “ global ”Untuk Tree of React Components, seperti pengguna, tema, atau pengaturan bahasa yang diotentikasi saat ini. Konteks memungkinkan melewati data melalui pohon komponen tanpa memberi alat peraga secara manual di setiap level.

Mari kita pahami konteks React menggunakan contoh. Pertama, kami membuat konteks kelas tombol dan menetapkan btn btn-dark.

Lalu di dalam Aplikasi kelas, kami mengubah nilai konteks ke BTN BTN-INFO.

Sekarang, di dalam Aplikasi Komponen, komponen bersarangnya Tombol. Ini adalah komponen tanpa kewarganegaraan, hanya komponen fungsional, menerima alat peraga sebagai argumen.

Sekarang, di dalam komponen itu, kami memiliki satu komponen bersarang lagi yang disebut Bertema. Tapi kami belum melewati properti apa pun dari Tombol komponen ke Bertema.

Jadi, sekarang, jika kita ingin mengakses nilai kelas tombol, yang telah kita tentukan di Reaksi konteks, maka kita perlu menulis kode berikut di dalam Bertema kelas.

class ThemedButton extends Component {
  
  static contextType = BtnColorContext;
  render() {
    return ;
  }
}
 

Jadi, kami telah mendefinisikan Kontekstype statis dan menggunakan nilai konteks saat ini . Kita bisa sekarang Lihat nilai konteks terbaru yang dijelaskan dalam kode ini.


   

Jika kita menulis kode di atas seperti ini, maka lihat output pada hasilnya.

Simpan file dan lihat warna tombol. Ini akan berubah menjadi gelap sesuai dengan konteks React yang ditentukan. Misalnya, jika kita memodifikasi konteks antara aliran orang tua ke anak -anak, maka itu akan mengambil nilai terbaru. Kalau tidak, itu akan mengambil nilai yang ditentukan pertama.

Cara membuat konteks di reaksi

1. React.createContext

Anda dapat membuat konteks menggunakan sintaks berikut.

const MyContext = React.createContext(defaultValue); 

Menciptakan objek konteks. Saat React membuat komponen yang berlangganan objek konteks ini, itu akan membaca nilai konteks saat ini dari pencocokan terdekat Pemberi di atasnya di pohon. Dalam contoh kami, kami telah menggunakan ini untuk mengubah Kelas tombol dari gelap ke info.

Itu DefaultValue argumen adalah hanya Digunakan saat komponen tidak memiliki penyedia yang cocok di atasnya di pohon. Dengan demikian, bermanfaat untuk menguji komponen dalam isolasi tanpa membungkusnya. Harap dicatat bahwa passing tidak terdefinisi sebagai nilai penyedia tidak menyebabkan komponen konsumsi untuk digunakan DefaultValue

2. Context.Provider

Sintaksnya mengikuti.

 

Setiap objek konteks dilengkapi dengan komponen reaksi penyedia yang memungkinkan komponen konsumsi untuk berlangganan perubahan konteks. Menerima nilai Prop harus diteruskan ke komponen konsumsi yang merupakan keturunan dari ini Pemberi . Satu penyedia dapat dihubungkan ke banyak konsumen. Penyedia dapat bersarang untuk mengesampingkan nilai -nilai yang lebih dalam di dalam pohon. Kami telah mengganti nilai default dari ClassName dan mendapatkan nilai terbaru dari ClassName di pohon komponen.

3. Context.Consumer

Sintaksnya mengikuti.


  {value => /* render something based on the context value */}
 

Ini adalah Reaksi Komponen yang berlangganan perubahan konteks. Ini memungkinkan kita berlangganan konteks di dalam komponen fungsi . Membutuhkan berfungsi sebagai seorang anak .

Fungsi menerima nilai konteks saat ini dan mengembalikan simpul bereaksi. Itu nilai Argumen yang diteruskan ke suatu fungsi akan sama dengan a nilai Prop penyedia terdekat untuk konteks ini di atas di pohon. Jika tidak ada penyedia untuk konteks di atas, nilai Argumen akan sama dengan DefaultValue diteruskan ke createContext ()

Itu untuk tutorial ini.

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *