React Hooks: UseContext-ga kirish

UseContext kancasi React 16.8 da React Hooks API ning bir qismi sifatida taqdim etilgan. Uni joriy etishdan oldin, React ilovalarida global holatni boshqarish odatda sinfga asoslangan kontekst provayderi/iste'molchi yondashuvi bilan Redux yoki Context API kabi kutubxonalarni talab qiladi.

React mavzular, foydalanuvchi ma'lumotlari va boshqa ma'lumotlar kabi qadriyatlarni komponentlar bo'ylab almashishning oddiyroq muqobil usulini taklif qilish zarurligini his qildi, chunki oldingi yechim ancha og'ir edi va ba'zida tarkibiy qismlarning chuqur ierarxiyasiga rekvizitlarni cheksiz ravishda o'tkazish kerakdek tuyuldi. useContext Redux-ga asoslangan murakkabroq yondashuvsiz ilovamizning global holatiga kirishning ancha intuitiv usulini taqdim etadi.

Kontekst nima?

UseContext-dan foydalanish uchun avvalo React ilovamizda kontekst faylini yaratishimiz kerak. React-da "kontekst" ma'lum bir ma'noga ega: u har bir darajadagi rekvizitlarni qo'lda o'tkazmasdan komponentlar daraxti orqali ma'lumotlarni uzatish usulini ta'minlaydi. U turli xil ma'lumotlarni taqdim etishi mumkin:

• Ilova holati:Ilovaning joriy holati haqida foydalanuvchi ma'lumotlari, afzalliklar va sozlamalar kabi ma'lumotlar.
• Atrof-muhitga oid ma'lumotlar: API so'nggi nuqtalari, tizim konfiguratsiyasi yoki qurilma imkoniyatlari kabi joriy tizim yoki muhit haqida tafsilotlar.
• Ish holati: U joriy foydalanuvchi, faol modal yoki tanlangan mavzu kabi ma'lum doiradagi mavjud holatni ifodalaydi.

Kontekst faylini qanday yaratish kerak

Amalda, kontekst fayli oddiygina .js fayli boʻlib, siz odatda React ilovalari src jildidagi “Kontekstlar” jildida saqlaysiz. Bu odatiy, funktsional komponentga juda o'xshaydi. Keling, uni qanday amalga oshirish kerakligi haqidagi misolni ko'rib chiqaylik:

import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
    const [user, setUser] = useState({
        name: 'Jane',
        surname: 'Doe',
        address: '123 React St, Hooks City',
        //...other details
    });

    return (
        <UserContext.Provider value={{ user, setUser }}>
            {children}
        </UserContext.Provider>
    );
};

Bu erda biz createContext() yordamida yangi kontekst yaratmoqdamiz. Bu Provider va Consumer bilan ob'ektni qaytaradi. Zamonaviy React with hooks kontekstida Consumer tez-tez ishlatilmaydi, chunki useContext kanca kontekst qiymatlarini iste'mol qilishning yanada sodda usulini ta'minlaydi.

Keyin biz UserProvider ni e'lon qilamiz va eksport qilamiz. Ushbu komponent asosan o'rashdir. Komponentlar uning ichiga (bolalar) o'ralgan bo'lsa, ular user holatiga kirish va potentsial ravishda o'zgartirish imkoniyatiga ega bo'ladilar, bu uning bola komponentlarida qanday amalga oshirilishiga bog'liq. Ichkarida davlat o'zgaruvchisi mavjud. Aynan shu holatda biz barcha o'zgaruvchilarni saqlash va kuzatib borish uchun ob'ekt yaratamiz, biz unga obuna bo'lgan barcha yordamchi komponentlarga taqdim etmoqchimiz.

Qaytarilgan ‹UserContext.Provider› maʼlumotni oʻzining asosiy komponentlarini taʼminlaydi. Qaysi ma'lumotlarni taqdim etishni aniq belgilaydigan valuepropni oladi. Shu nuqtai nazardan, biz ham kontekstni o'qishimiz va o'zgartirishimiz uchun foydalanuvchi ham, setUser ham taqdim etiladi.

UseContect-dan qanday foydalanish kerak

Biz ilgari yaratgan kontekstdan foydalanish uchun biz UserProvider komponentiga ushbu ma'lumotlarga kirishga muhtoj bo'lgan komponentlarni o'rashimiz kerak. Bu bizning butun Ilova komponentimiz bo'lishi mumkin yoki bu ma'lumot bolalar ierarxiyasida zarur bo'lgan ilovaning bir qismidagi quyi komponent bo'lishi mumkin. Keling, bir misolni ko'rib chiqaylik:

import React from 'react';
import { UserProvider } from './contexts/UserContext'; 
import BioCard from './components/BioCard'; 

function App() {
  return (
    <UserProvider>
      <header>
        <h1>Welcome to My App</h1>
      </header>
      <main>
        <BioCard />
        {/* Maybe some routes or other components */}
      </main>
      <footer>
        App Footer
      </footer>
    </UserProvider>
  );
}

export default App;

Bu erda biz ilovamizning butun ildizini UserProvider ichiga o'rab oldik. Bu shuni anglatadiki, har qanday komponent endi userContext ma'lumotlariga kirish huquqiga ega. Shuningdek, biz BioCard nomli maxsus komponentni import qilamiz. Keling, ushbu komponent kontekstdan ma'lumotni qanday iste'mol qilishi mumkinligini ko'rib chiqaylik:

import React, { useContext } from 'react';
import { UserContext } from '../contexts/UserContext';

function BioCard() {
  const { user } = useContext(UserContext); // Destructure user from the context value

  return (
    <div className="bio-card">
      <h2>{user.name} {user.surname}</h2>
      <p>Address: {user.address}</p>
      {/* Display other user details as required */}
    </div>
  );
}

export default BioCard;

Bu yerda biz React-dan useContext va siz belgilagan fayldan UserContext import qildik. Komponentda biz foydalanuvchi ma'lumotlariga (va kontekstda taqdim etgan boshqa qiymatlarga) kirish uchun useContext(UserContext) chaqiruvidan foydalanamiz. Keyin BioCard komponenti ushbu ma'lumotlardan foydalangan holda foydalanuvchi ma'lumotlarini ko'rsatadi.

Ilovangiz ishga tushganda, BioCard UserProvider tomonidan taqdim etilgan foydalanuvchi ma'lumotlariga kirish huquqiga ega bo'ladi va u foydalanuvchi ma'lumotlari bilan kartani ko'rsatadi.

Xulosa

Ushbu qo'llanmada biz useContext kancasini ko'rib chiqdik va uning Reactda global davlat boshqaruvidagi rolini ta'kidladik. Biz UserContext yaratilishini ko'rib chiqdik, asosiy App ni UserProvider ichiga o'rash orqali uni amalga oshirishni ko'rsatdik va BioCard komponenti kontekstdan foydalanuvchi ma'lumotlariga qanday qilib osongina kirishi va ko'rsatishi mumkinligini ko'rsatdik.