useContext

React useContext Hook

React Context

React Context - bu global tarzda holatni boshqarish usuli.

Bu useState Hook bilan birga ishlatilishi mumkin, bu holatni chuqur joylashgan komponentlar orasida osonroq bo'lishiga yordam beradi.

Muammo

Holat, holatga kirish zarur bo'lgan eng yuqori ota komponentda saqlanishi kerak.

Misol uchun, ko'plab ichki komponentlar mavjud. Pilet ustida va pastki qismidagi komponentlar holatga kirish zarur.

Agar Contextdan foydalanmasak, biz holatni har bir ichki komponent orqali "props" sifatida uzatishimiz kerak bo'ladi. Bu "prop drilling" deb ataladi.

Misol

Ichki komponentlar orqali "props" uzatish:

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function Component1() {
  const [user, setUser] = useState('Jesse Hall');
 
  return (
    <>
      <h1>{`Salom ${user}!`}</h1>
      <Component2 user={user} />
    </>
  );
}
 
function Component2({ user }) {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 user={user} />
    </>
  );
}
 
function Component3({ user }) {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 user={user} />
    </>
  );
}
 
function Component4({ user }) {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 user={user} />
    </>
  );
}
 
function Component5({ user }) {
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Yana salom ${user}!`}</h2>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);

Garchi 2-4 komponentlar holatga muhtoj bo'lmasa ham, ular holatni o'tkazishlari kerak edi, shunda bu holat 5-komponentga yetib borishi mumkin.

Yechim

Yechim - Context yaratishdir.

Context Yaratish

Context yaratish uchun, createContext-ni import qilish va uni inicializatsiya qilish kerak:

import { useState, createContext } from 'react';
import ReactDOM from 'react-dom/client';
 
const UserContext = createContext();

Keyingi qadamda, Context Provider yordamida holat Contexti kerak bo'lgan komponentlar daraxtini o'rab chiqamiz.

Context Provider

Bolalar komponentlarni Context Provider bilan o'ralgan va holat qiymatini taqdim etamiz.

function Component1() {
  const [user, setUser] = useState('Jesse Hall');
 
  return (
    <UserContext.Provider value={user}>
      <h1>{`Salom ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

Endi bu daraxtdagi barcha komponentlar UserContext-ga kirish huquqiga ega bo'ladi.

useContext Hook-dan Foydalanish

Bolalar komponentda Contextdan foydalanish uchun useContext Hook-dan foydalanishimiz kerak.

Birinchidan, useContext import bayonotiga qo'shilsin:

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

Keyin barcha komponentlarda UserContext-ni olishingiz mumkin:

function Component5() {
  const user = useContext(UserContext);
 
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Yana salom ${user}!`}</h2>
    </>
  );
}

To'liq Misol

Bu yerda React Context yordamida to'liq misol keltirilgan:

import { useState, createContext, useContext } from 'react';
import ReactDOM from 'react-dom/client';
 
const UserContext = createContext();
 
function Component1() {
  const [user, setUser] = useState('Jesse Hall');
 
  return (
    <UserContext.Provider value={user}>
      <h1>{`Salom ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}
 
function Component2() {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 />
    </>
  );
}
 
function Component3() {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 />
    </>
  );
}
 
function Component4() {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 />
    </>
  );
}
 
function Component5() {
  const user = useContext(UserContext);
 
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Yana salom ${user}!`}</h2>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);

Ushbu sahifada