Konteks dalam React

Sebelum beralih kepada pembelajaran hook seterusnya, kita perlu mempertimbangkan konsep konteks dalam React.

Biasanya kita menghantar data dari komponen ibu bapa kepada komponen anak melalui prop. Kaedah ini bagus jika anda tidak mempunyai banyak komponen dan anda tidak perlu melontar prop dari komponen ibu bapa kepada komponen yang anda perlukan melalui komponen anak lebih daripada 2-3 kali.

Kaedah ini juga boleh menjadi sangat tidak selesa dan membawa kepada pelbagai masalah, jika dalam komponen perantaraan prop ini langsung tidak digunakan (masalah seperti ini dipanggil prop drilling), atau anda perlu menghantar data yang sama kepada sejumlah besar komponen.

Dalam kes ini, konteks boleh membantu kita, yang membolehkan data komponen ibu bapa boleh diakses oleh mana-mana komponen anak, tidak kira kedudukannya dalam pokok komponen, tanpa menghantarnya melalui prop. Oleh itu, hanya komponen yang memerlukannya sahaja akan menerima data.

Untuk menggunakan konteks, ia perlu dicipta. Pertama, mari kita buat fail MyContext.js dan import fungsi createContext ke dalamnya:

Sekarang mari kita buat objek konteks, tuliskan ia ke dalam pembolehubah MyContext, yang jangan lupa untuk dieksport. Dalam kes kami, kami menetapkan dalam createContext nilai permulaan null, kerana ia tidak penting bagi kami (boleh juga dibiarkan dengan kurungan kosong sahaja). Nilai lalai yang ditetapkan akan muncul apabila membaca konteks, jika tiada yang lain ditemui. Nilai ini boleh menjadi sebarang jenis:

Dalam pelajaran seterusnya, kami akan mencipta aplikasi daripada beberapa komponen yang terletak dalam fail berasingan. Jika semua komponen berada dalam satu fail, maka untuk mencipta konteks kami tidak akan membuat fail berasingan dan tidak akan mengeksportnya.

Sekarang mari import MyContext.js ke dalam komponen kosong App - ke dalam komponen yang daripadanya kami ingin menghantar data: