Cara menggunakan Konteks dalam React

Selamat datang kembali, kawan-kawan!


Hari ini kita membincangkan asas React Hook yang dipanggil useContext. useContext ialah alat berkuasa yang melampaui useState untuk mencipta Negeri seperti global yang boleh menyalurkan maklumat kepada komponen anak dan cucu tanpa memberikan props secara langsung.

Tetapi saya semakin mendahului diri saya sendiri.
Jika anda tidak biasa dengan useState, lompat dan baca artikel saya sebelum ini, kemudian kembali dan bersedia untuk kagum!


Cara menggunakan ‘useState’: https://dev.to/deborah/how-to-use-state-in-react-2pah

Sekarang anda sudah bersedia untuk menggunakan 'useState', mari kita selami 'useContext'!

Apakah useContext?:

useContext adalah sesuai untuk data yang perlu diletakkan pada skop global (seperti nama pengguna yang akan memastikan seseorang dilog masuk sepanjang keseluruhan aplikasi) tetapi ia bukan pintasan akhir-semua-semua untuk menurunkan props kepada komponen kanak-kanak.
Walau bagaimanapun, useContext membenarkan kami menghantar data tanpa menghantar props secara langsung dan oleh itu amat membantu apabila kami menemui data yang perlu diakses oleh beberapa komponen kanak-kanak atau disediakan di seluruh aplikasi.

Untuk mendapatkan useContext dan berjalan, kita perlu mengambil dua langkah: pertama, kita perlu mencipta objek konteks ('createContext'), kemudian kita perlu mengakses nilai melalui pembekal menggunakan cangkuk 'useContext' .

Contoh berikut telah dipermudahkan untuk memberi anda idea yang lebih baik tentang maksud useContext dan cara menggunakannya, tetapi anda harus sedar bahawa createContext selalunya diisytiharkan dalam fail tersendiri. Saya, walau bagaimanapun, menyamakan 'Parent.js' kepada fail 'App.js' biasa (komponen di bahagian atas hierarki komponen). Parent.js ialah tempat saya telah menentukan semua pembolehubah keadaan saya, fungsi yang mengemas kini pembolehubah keadaan tersebut dan membuat pengambilan ke pangkalan data menggunakan useEffect. Saya memilih untuk mengisytiharkan createContext dalam komponen peringkat atas saya dan bukannya mencipta fail sendiri untuk memudahkan penjelasan ini supaya anda boleh memahami konsep teras Konteks dengan lebih baik.

Dengan semua yang dikatakan, mari kita mulakan dari awal lagi: createContext!

1. Perkara pertama yang perlu kami lakukan ialah mengisytiharkan dan mengeksport pembolehubah yang dipanggil 'Konteks' yang akan kami gunakan kemudian dalam komponen anak kami [kami membuat pembolehubah sekarang untuk menjadikan kod kami lebih mudah dan supaya kami boleh meletakkan nilai (data) di dalamnya untuk diakses kemudian]:

export Context = React.createContext();

'Konteks' ialah objek konteks yang dicipta dengan memanggil 'createContext'. Objek konteks memegang komponen yang dipanggil Pembekal yang kini boleh kami panggil dan kemudian lulus pembolehubah dan fungsi yang kami mahu kekalkan pada tahap 'global' kami.

2. Dengan pembolehubah 'Konteks' kami, mari beralih ke JSX kami dalam penyata pulangan. Di sini kami akan memanggil 'Konteks' dan membungkusnya dalam tag pembukaan (kurung sudut), dan juga memanggil Pembekal seperti itu:




return(
    <Context.Provider >
        // Other JSX & the child components we want to hand Context to.

    </Context.Provider>
);

Untuk melengkapkan 'Context.Provider', kami juga perlu memberikan nilai kepada 'Provider'. Di sinilah kita akan menghantar objek dengan mana-mana dan semua pembolehubah dan fungsi yang akan kita panggil dengan 'Konteks' dalam komponen anak:

return(
    <Context.Provider value ={{ example, setExample, handleExample }}>
        // Other JSX & the child components we want to hand Context to.

    </Context.Provider>
);

AMAT PENTING untuk ambil perhatian bahawa kita perlu meletakkan SEMUA komponen kanak-kanak yang akan menggunakan pembolehubah dan fungsi di antara teg. Contohnya:

return(
    <Context.Provider value ={{ example, setExample, handleExample }}>
        <Child />
    <Components />
    <Go />
    <Here />
    </Context.Provider>
);

Perhatikan bahawa kita tidak perlu menghantar sebarang prop terus kepada komponen anak (seperti yang kita lakukan dengan 'useState') asalkan kita meletakkan props di dalam 'nilai'.

Sekarang kami telah menggunakan createContext dan menyerahkan semua item global kami kepada 'Context.Provider', kami bersedia untuk beralih kepada komponen anak dan melihat cara menggunakan 'Context'.

3. Let’s go onto a child component which (for the sake of this example) is housed in the file "Child.js". As life is with coding: if you want to use something, you need to import it. Let’s go ahead and get ‘Context’ from where we declared it in ‘Parent.js’ so we can use it in this child component (‘Child.js’):

import Context from ‘./Parent.js’;

4. Now that we have access to ‘Context’ in the child component, we now need to import 'useContext' into the file so we can pass 'Context' to it (more on that shortly):

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

5. Great! Now let’s use 'useContext'. First we need to declare a variable to use 'useContext' with. We’ll do this inside the component in a similar fashion to how we would declare useState:

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

In this code we are using curly braces {} to denote destructuring assignment. That's a fancy way of saying we are able to call multiple variables and functions stored in Context. We are also passing ‘Context’ to 'useContext' so we can access the values defined in Context.Provider (which we declared in ‘Parent.js’).



6. Believe it or not, you are all set! You can now use the context values in your code just like you would normally use State. For example:

const expId = example.id;

or

setExample(newExample);

Let’s Recap:

Congratulations! You now have all the tools to get started with createContext and useContext. You understand that useContext allows you to create something of a ‘global state' that can pass variables and functions to components without passing props directly through child components.

We also delved into the six steps required to get context working in your applications. You are now ready to begin coding with createContext and useContext, but in case you ever need a quick-start guide, here you go:


In your parent component, declare and export a variable called 'Context' using 'createContext':

export const Context = React.createContext();

In the parent component’s JSX, wrap all child components that need access to context in Context.Proivder, and pass any variables/functions inside an object:

<Context.Provider value={{ example, setExample, handleExample }}>
   //Child components
</Context.Provider>

In you child component, import 'useContext':

import React, { useContext } from ‘react’;

Also import ‘Context’ from the parent component:

import Context from “./Parent.js’;

Then use useContext and pass it your ‘Context’ variable:

const { example, handleExample } = useContext(Context);

Finally, use the context you now have access to (in our examples above this would be 'example' and 'handleExample') however you need to in the child component.

Well done! And until next time, happy coding!

One last note, if you would like to delve deeper into this subject, here are the official documentation resources I also referenced while learning useContext and writing this blog:


Official Documentation:
https://react.dev/reference/react/createContext


Legacy Official Documentation, still somewhat helpful for understanding useContext:
https://legacy.reactjs.org/docs/context.html

Atas ialah kandungan terperinci Cara menggunakan Konteks dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!