React Context

  • Post
    React Context

    Konteks memungkinkan melewatkan data melalui pohon komponen tanpa melewatkan props secara manual di setiap level.

    Dalam aplikasi React, kami meneruskan data dengan pendekatan top-down melalui props. Terkadang tidak nyaman untuk beberapa jenis props yang dibutuhkan oleh banyak komponen dalam aplikasi React. Konteks menyediakan cara untuk meneruskan nilai antar komponen tanpa secara eksplisit melewatkan prop melalui setiap level pohon komponen.

    Cara menggunakan Konteks

    Ada dua langkah utama untuk menggunakan konteks React ke dalam aplikasi React:

    1. Siapkan penyedia konteks dan tentukan data yang ingin Anda simpan.
    2. Gunakan konsumen konteks kapan pun Anda membutuhkan data dari toko

    Kapan menggunakan Konteks

    Konteks digunakan untuk berbagi data yang dapat dianggap “global” untuk pohon komponen React dan menggunakan data tersebut jika diperlukan, seperti pengguna terotentikasi saat ini, tema, dll. Misalnya, dalam potongan kode di bawah ini, kami secara manual memasukkan ” theme “prop untuk memberi gaya pada komponen Tombol.

    1. classApp extendsComponent {
    2. render() {
    3. return <Toolbar theme=”dark” />;
    4. }
    5. }
    6. function Toolbar(props) {
    7. return (
    8. <div>
    9. <ThemedButton theme={props.theme} />
    10. </div>
    11. );
    12. }
    13. classThemedButton extendsComponent {
    14. render() {
    15. return<Button theme={this.props.theme} />;
    16. }
    17. }

    Dalam kode di atas, komponen fungsi Toolbar mengambil prop “theme” ekstra dan meneruskannya ke ThemedButton. Akan merepotkan jika setiap tombol dalam aplikasi perlu mengetahui tema karena harus melewati semua komponen. Tetapi dengan menggunakan konteks, kita dapat menghindari melewatkan props untuk setiap komponen melalui elemen perantara.

    Kita bisa memahaminya dari contoh di bawah ini. Di sini, konteks meneruskan nilai ke dalam pohon komponen tanpa memasukkannya ke setiap komponen secara eksplisit.

    1. // Create a context for the current theme which is “light” as the default.
    2. constThemeContext = React.createContext(‘light’);
    3. classApp extendsComponent {
    4. render() {
    5. /* Use a ContextProvider to pass the current theme, which allows every component to read it, no matter how deep it is. Here, we are passing the “dark” theme as the current value.*/
    6. return (
    7. <ThemeContext.Provider value=”dark”>
    8. <Toolbar />
    9. </ThemeContext.Provider>
    10. );
    11. }
    12. }
    13. // Now, it is not required to pass the theme down explicitly for every component.
    14. function Toolbar(props) {
    15. return(
    16. <div>
    17. <ThemedButton />
    18. </div>
    19. );
    20. }
    21. classThemedButton extendsComponent {
    22. staticcontextType = ThemeContext;
    23. render() {
    24. return<Button theme={this.context} />;
    25. }
    26. }

    API Konteks React

    React Context API adalah struktur komponen, yang memungkinkan kita untuk berbagi data di semua level aplikasi. Tujuan utama dari API Konteks adalah untuk memecahkan masalah pengeboran prop (juga disebut “Threading”). API Konteks di React diberikan di bawah ini.

    • React.createContext
    • Context.provider
    • Context.Consumer
    • Class.contextType

    React.createContext

    Ini menciptakan objek konteks. Saat React merender komponen yang berlangganan objek konteks ini, maka React akan membaca nilai konteks saat ini dari penyedia yang cocok di pohon komponen.

    Sintaksis

    1. const MyContext = React.createContext (defaultValue);

    Ketika sebuah komponen tidak memiliki Penyedia yang cocok di pohon komponen, ia mengembalikan argumen defaultValue. Ini sangat membantu untuk menguji isolasi komponen (secara terpisah) tanpa membungkusnya.

    Context.Provider

    Setiap objek Context memiliki komponen Provider React yang memungkinkan konsumsi komponen untuk berlangganan perubahan konteks. Ini bertindak sebagai layanan pengiriman. Ketika komponen konsumen meminta sesuatu, ia menemukannya dalam konteks dan menyediakannya di tempat yang dibutuhkan.

    Sintaksis

    1. <MyContext.Provider value={/* some value */}>

    Ini menerima nilai prop dan meneruskan ke komponen konsumsi yang merupakan turunan dari Penyedia ini. Kami dapat menghubungkan satu Penyedia dengan banyak konsumen. Penyedia Konteks dapat disarangkan untuk mengganti nilai lebih dalam di dalam pohon komponen. Semua konsumen yang merupakan keturunan dari Penyedia selalu merender ulang setiap kali penyangga nilai Penyedia diubah. Perubahan ditentukan dengan membandingkan nilai lama dan baru menggunakan algoritma yang sama seperti algoritma Object.is .

    Konteks. Consumer

    Ini adalah komponen React yang mengikuti perubahan konteks. Ini memungkinkan kita untuk berlangganan konteks di dalam komponen fungsi. Ini membutuhkan fungsi sebagai komponen. Konsumen digunakan untuk meminta data melalui penyedia dan memanipulasi penyimpanan data pusat jika penyedia mengizinkannya.

    Sintaksis

    1. <MyContext.Consumer>
    2. {value => /* render something which is based on the context value */}
    3. </MyContext.Consumer>

    Komponen fungsi menerima nilai konteks saat ini dan kemudian mengembalikan simpul React. Argumen nilai yang diteruskan ke fungsi akan sama dengan prop nilai Penyedia terdekat untuk konteks ini di pohon komponen. Jika tidak ada Penyedia untuk konteks ini, argumen nilai akan sama dengan defaultValue yang diteruskan ke createContext ().

    Class.contextType

    Properti contextType pada kelas yang digunakan untuk menetapkan objek Konteks yang dibuat oleh React.createContext (). Ini memungkinkan Anda untuk menggunakan nilai terdekat saat ini dari tipe Konteks tersebut menggunakan this.context. Kita bisa mereferensikan ini di salah satu metode siklus hidup komponen, termasuk fungsi render.

    Catatan: Kami hanya dapat berlangganan ke satu konteks menggunakan API ini. Jika kita ingin menggunakan sintaks bidang kelas publik eksperimental, kita dapat menggunakan bidang kelas statis untuk menginisialisasi contextType.

    Contoh React Context API

    Langkah 1 Buat aplikasi React baru menggunakan perintah berikut.

    1. $ npx buat-reaksi-aplikasi mycontextapi

    Langkah2 Instal kerangka CSS bootstrap menggunakan perintah berikut.

    1. $ npm install react-bootstrap bootstrap –save

    Step3 Tambahkan potongan kode berikut di file src / APP.js.

    1. importReact, { Component } from ‘react’;
    2. import‘bootstrap/dist/css/bootstrap.min.css’;
    3. constBtnColorContext = React.createContext(‘btn btn-darkyellow’);
    4. classApp extends Component {
    5. render() {
    6. return (
    7. <BtnColorContext.Provider value=”btn btn-info”>
    8. <Button />
    9. </BtnColorContext.Provider>
    10. );
    11. }
    12. }
    13. function Button(props) {
    14. return(
    15. <div className=”container”>
    16. <ThemedButton />
    17. </div>
    18. );
    19. }
    20. classThemedButton extendsComponent {
    21. staticcontextType = BtnColorContext;
    22. render() {
    23. return<button className={this.context} >
    24. welcome to javatpoint
    25. </button>;
    26. }
    27. }
    28. export defaultApp;

    Dalam potongan kode di atas, kami telah membuat konteks menggunakan React.createContext (), yang mengembalikan objek Context. Setelah itu, kita telah membuat komponen pembungkus yang mengembalikan komponen Penyedia, dan kemudian menambahkan semua elemen sebagai anak dari mana kita ingin mengakses konteksnya.

     

    credit. javatpoint

Tagged: 

  • You must be logged in to reply to this topic.