M

MLOG

O'zbek

Global auditoriya uchun React holatini boshqarish bo'yicha to'liq qo'llanma. useState, Context API, useReducer va Redux, Zustand, TanStack Query kabi mashhur kutubxonalarni o'rganing.

React Holatini Boshqarishni Mukammal O'rganish: Global Dasturchi Qo'llanmasi

Front-end dasturlash olamida holatni boshqarish eng muhim muammolardan biridir. React'dan foydalanadigan dasturchilar uchun bu muammo oddiy komponent darajasidagi masaladan ilovaning kengaytirilishi, unumdorligi va texnik xizmat ko'rsatish qulayligini belgilaydigan murakkab arxitektura qaroriga aylandi. Siz Singapurdagi yakka dasturchi bo'lasizmi, Yevropadagi tarqoq jamoa a'zosi yoki Braziliyadagi startap asoschisi bo'lasizmi, React holatini boshqarish landshaftini tushunish mustahkam va professional ilovalarni yaratish uchun zarurdir.

Ushbu keng qamrovli qo'llanma sizni React'dagi holatni boshqarishning butun spektrini, uning ichki vositalaridan tortib kuchli tashqi kutubxonalarigacha bo'lgan yo'ldan olib boradi. Biz har bir yondashuvning "nima uchun" degan savolini o'rganamiz, amaliy kod misollarini taqdim etamiz va dunyoning qayerida bo'lishingizdan qat'i nazar, loyihangiz uchun to'g'ri vositani tanlashga yordam beradigan qaror qabul qilish tizimini taklif qilamiz.

React'da 'Holat' (State) nima va u nega bunchalik muhim?

Vositalarni ko'rib chiqishdan oldin, keling, 'holat' haqida aniq va universal tushunchani o'rnatib olaylik. Aslida, holat - bu ma'lum bir vaqtda ilovangizning ahvolini tavsiflovchi har qanday ma'lumotdir. Bu har qanday narsa bo'lishi mumkin:

React UI holatning funksiyasi (UI = f(holat)) degan tamoyilga asoslangan. Holat o'zgarganda, React o'sha o'zgarishni aks ettirish uchun UI'ning kerakli qismlarini samarali ravishda qayta chizadi (re-render). Muammo shundaki, bu holatni komponentlar daraxtida to'g'ridan-to'g'ri bog'liq bo'lmagan bir nechta komponentlar o'rtasida bo'lishish va o'zgartirish kerak bo'lganda paydo bo'ladi. Aynan shu yerda holatni boshqarish muhim arxitektura masalasiga aylanadi.

Asos: useState yordamida lokal holat

Har bir React dasturchisining sayohati useState hook'idan boshlanadi. Bu bitta komponentga xos bo'lgan (lokal) holat qismini e'lon qilishning eng oddiy usuli.

Masalan, oddiy hisoblagich holatini boshqarish:


import React, { useState } from 'react';

function Counter() {
  // 'count' - bu holat o'zgaruvchisi
  // 'setCount' - uni yangilash uchun funksiya
  const [count, setCount] = useState(0);

  return (
    

      
Siz {count} marta bosdingiz

      
    

  );
}

useState forma kiritishlari, o'chirib-yoqgichlar (toggles) yoki holati ilovaning boshqa qismlariga ta'sir qilmaydigan har qanday UI elementi kabi bo'lishish kerak bo'lmagan holat uchun juda mos keladi. Muammo boshqa bir komponent `count` qiymatini bilishi kerak bo'lganda boshlanadi.

Klassik yondashuv: Holatni yuqoriga ko'tarish (Lifting State Up) va Prop Drilling

Komponentlar o'rtasida holatni bo'lishishning an'anaviy React usuli - uni eng yaqin umumiy ajdodiga "yuqoriga ko'tarish". Keyin holat props orqali bola komponentlarga uzatiladi. Bu fundamental va muhim React naqshidir.

Biroq, ilovalar o'sib borishi bilan bu "prop drilling" deb nomlanuvchi muammoga olib kelishi mumkin. Bu holatda siz props'ni chuqur joylashgan va unga ehtiyoji bor bo'lgan bola komponentga yetkazish uchun ma'lumotlarga aslida muhtoj bo'lmagan bir necha oraliq komponentlar qatlamidan o'tkazishingiz kerak bo'ladi. Bu kodni o'qish, refaktor qilish va saqlashni qiyinlashtirishi mumkin.

Foydalanuvchining mavzu tanlovini ('qorong'u' yoki 'yorug'') tasavvur qiling, unga komponentlar daraxtining ichkarisida joylashgan tugma orqali kirish kerak. Siz uni quyidagicha uzatishingiz kerak bo'lishi mumkin: App -> Layout -> Page -> Header -> ThemeToggleButton. Faqat `App` (holat aniqlangan joy) va `ThemeToggleButton` (u ishlatiladigan joy) bu prop haqida qayg'uradi, lekin `Layout`, `Page` va `Header` vositachi sifatida harakat qilishga majbur. Bu muammoni yanada ilg'or holatni boshqarish yechimlari hal qilishga qaratilgan.

React'ning ichki yechimlari: Kontekst va Reducer'larning kuchi

Prop drilling muammosini tan olgan holda, React jamoasi Context API va `useReducer` hook'ini taqdim etdi. Bular tashqi bog'liqliklarni qo'shmasdan ko'plab holatni boshqarish stsenariylarini hal qila oladigan kuchli, ichki o'rnatilgan vositalardir.

1. Context API: Holatni global miqyosda uzatish

Context API ma'lumotlarni komponentlar daraxti orqali har bir darajada qo'lda props uzatmasdan o'tkazish imkonini beradi. Buni ilovangizning ma'lum bir qismi uchun global ma'lumotlar ombori deb tasavvur qiling.

Context'dan foydalanish uchta asosiy qadamni o'z ichiga oladi:

  1. Kontekstni yaratish: Kontekst obyektini yaratish uchun `React.createContext()` dan foydalaning.
  2. Kontekstni ta'minlash: Komponentlar daraxtining bir qismini o'rash va unga `value` uzatish uchun `Context.Provider` komponentidan foydalaning. Ushbu provider ichidagi har qanday komponent qiymatga kira oladi.
  3. Kontekstni iste'mol qilish: Kontekstga obuna bo'lish va uning joriy qiymatini olish uchun komponent ichida `useContext` hook'idan foydalaning.

Misol: Context yordamida oddiy mavzu o'zgartirgich


// 1. Kontekstni yaratish (masalan, theme-context.js faylida)
import { createContext, useState } from 'react';

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  // value obyekti barcha iste'molchi komponentlar uchun mavjud bo'ladi
  const value = { theme, toggleTheme };

  return (
    
      {children}
    
  );
}

// 2. Kontekstni ta'minlash (masalan, asosiy App.js faylida)
import { ThemeProvider } from './theme-context';
import MyPage from './MyPage';

function App() {
  return (
    
      
    
  );
}

// 3. Kontekstni iste'mol qilish (masalan, chuqur joylashgan komponentda)
import { useContext } from 'react';
import { ThemeContext } from './theme-context';

function ThemeToggleButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    
  );
}

Context API'ning afzalliklari:

Kamchiliklari va unumdorlik masalalari:

2. `useReducer` Hook'i: Bashorat qilinadigan holat o'zgarishlari uchun

useState oddiy holat uchun ajoyib bo'lsa-da, `useReducer` uning yanada murakkab holat mantiqini boshqarish uchun mo'ljallangan kuchliroq ukasidir. U ayniqsa, bir nechta quyi qiymatlarni o'z ichiga olgan holatingiz bo'lganda yoki keyingi holat avvalgisiga bog'liq bo'lganda foydalidir.

Redux'dan ilhomlangan `useReducer` `reducer` funksiyasi va `dispatch` funksiyasini o'z ichiga oladi:

Misol: oshirish, kamaytirish va qayta o'rnatish amallari bilan hisoblagich


import React, { useReducer } from 'react';

// 1. Boshlang'ich holatni aniqlash
const initialState = { count: 0 };

// 2. Reducer funksiyasini yaratish
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return initialState;
    default:
      throw new Error('Kutilmagan amal turi');
  }
}

function ReducerCounter() {
  // 3. useReducer'ni ishga tushirish
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      
Hisob: {state.count}

      {/* 4. Foydalanuvchi harakatlarida amallarni jo'natish */}
      
      
      
    
  );
}

`useReducer` dan foydalanish holatni yangilash mantiqini bir joyda (reducer funksiyasida) markazlashtiradi, bu uni yanada bashorat qilinadigan, sinovdan o'tkazish oson va, ayniqsa, mantiq murakkablashgan sari, saqlash uchun qulayroq qiladi.

Ajoyib juftlik: `useContext` + `useReducer`

React'ning ichki hook'larining haqiqiy kuchi `useContext` va `useReducer` ni birlashtirganda namoyon bo'ladi. Bu naqsh sizga hech qanday tashqi bog'liqliklarsiz mustahkam, Redux'ga o'xshash holatni boshqarish yechimini yaratish imkonini beradi.

Bu naqsh ajoyib, chunki `dispatch` funksiyasining o'zi barqaror identifikatorga ega va qayta renderlar orasida o'zgarmaydi. Bu shuni anglatadiki, faqat `dispatch` qilish kerak bo'lgan komponentlar holat qiymati o'zgarganda keraksiz ravishda qayta renderlanmaydi, bu esa ichki unumdorlikni optimallashtirishni ta'minlaydi.

Misol: oddiy xarid savatini boshqarish


// 1. cart-context.js da sozlash
import { createContext, useReducer, useContext } from 'react';

const CartStateContext = createContext();
const CartDispatchContext = createContext();

const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      // Mahsulot qo'shish mantig'i
      return [...state, action.payload];
    case 'REMOVE_ITEM':
      // id bo'yicha mahsulotni o'chirish mantig'i
      return state.filter(item => item.id !== action.payload.id);
    default:
      throw new Error(`Noma'lum amal: ${action.type}`);
  }
};

export const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, []);

  return (
    
      
        {children}
      
    
  );
};

// Oson iste'mol qilish uchun maxsus hook'lar
export const useCart = () => useContext(CartStateContext);
export const useCartDispatch = () => useContext(CartDispatchContext);

// 2. Komponentlarda foydalanish
// ProductComponent.js - faqat amalni jo'natishi kerak
function ProductComponent({ product }) {
  const dispatch = useCartDispatch();
  
  const handleAddToCart = () => {
    dispatch({ type: 'ADD_ITEM', payload: product });
  };

  return ;
}

// CartDisplayComponent.js - faqat holatni o'qishi kerak
function CartDisplayComponent() {
  const cartItems = useCart();

  return 
Savatdagi mahsulotlar: {cartItems.length}
;
}

Holat va dispatch'ni ikkita alohida kontekstga bo'lish orqali biz unumdorlik afzalligiga erishamiz: faqat amallarni jo'natadigan `ProductComponent` kabi komponentlar savat holati o'zgarganda qayta renderlanmaydi.

Qachon tashqi kutubxonalarga murojaat qilish kerak?

`useContext` + `useReducer` naqshi kuchli, lekin u hamma muammolarni hal qiluvchi vosita emas. Ilovalar kengaygan sari, siz maxsus tashqi kutubxonalar tomonidan yaxshiroq xizmat ko'rsatiladigan ehtiyojlarga duch kelishingiz mumkin. Quyidagi hollarda tashqi kutubxonani ko'rib chiqishingiz kerak:

Mashhur holatni boshqarish kutubxonalari bo'ylab global sayohat

React ekotizimi jonli bo'lib, har biri o'z falsafasi va kamchiliklariga ega bo'lgan turli xil holatni boshqarish yechimlarini taklif etadi. Keling, dunyo dasturchilari orasida eng mashhur tanlovlardan ba'zilarini ko'rib chiqaylik.

1. Redux (va Redux Toolkit): O'rnatilgan standart

Redux yillar davomida dominant holatni boshqarish kutubxonasi bo'lib kelgan. U qat'iy bir tomonlama ma'lumotlar oqimini ta'minlaydi, bu holat o'zgarishlarini bashorat qilinadigan va kuzatiladigan qiladi. Dastlabki Redux o'zining ko'p kod yozishni talab qilishi (boilerplate) bilan tanilgan bo'lsa-da, Redux Toolkit (RTK) yordamida zamonaviy yondashuv jarayonni sezilarli darajada soddalashtirdi.

2. Zustand: Minimalist va erkin tanlov

Nemis tilida "holat" degan ma'noni anglatuvchi Zustand minimalist va moslashuvchan yondashuvni taklif etadi. U ko'pincha Redux'ga soddaroq alternativa sifatida qaraladi va ortiqcha kod yozish talablarisiz markazlashtirilgan store afzalliklarini taqdim etadi.


// store.js
import { create } from 'zustand';

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

// MyComponent.js
function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return 
Bu yerda {bears} ta ayiq bor ...
;
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  return ;
}

3. Jotai & Recoil: Atomik yondashuv

Jotai va Recoil (Facebook'dan) "atomik" holatni boshqarish konsepsiyasini ommalashtirdi. Yagona katta holat obyekti o'rniga, siz holatingizni "atomlar" deb ataladigan kichik, mustaqil qismlarga ajratasiz.

4. TanStack Query (avvalgi React Query): Server holatining qiroli

Balki so'nggi yillardagi eng muhim paradigma o'zgarishi shundaki, biz "holat" deb ataydigan narsalarning aksariyati aslida server holati ekanligini anglashdir - bu serverda yashovchi va bizning mijoz ilovamizda olinadigan, keshlangan va sinxronlashtiriladigan ma'lumotlar. TanStack Query umumiy holat menejeri emas; bu server holatini boshqarish uchun ixtisoslashtirilgan vosita va u buni a'lo darajada bajaradi.

To'g'ri tanlov qilish: Qaror qabul qilish tizimi

Holatni boshqarish yechimini tanlash chalkash tuyulishi mumkin. Mana sizning tanlovingizni yo'naltirish uchun amaliy, global miqyosda qo'llaniladigan qaror qabul qilish tizimi. O'zingizga bu savollarni ketma-ketlikda bering:

  1. Holat haqiqatan ham globalmi yoki lokal bo'lishi mumkinmi?
    Har doim useState dan boshlang. Mutlaqo zarur bo'lmasa, global holatni joriy qilmang.
  2. Siz boshqarayotgan ma'lumotlar aslida server holatimi?
    Agar bu API'dan olingan ma'lumotlar bo'lsa, TanStack Query'dan foydalaning. Bu siz uchun keshlash, yuklash va sinxronizatsiyani boshqaradi. Bu ehtimol ilovangiz "holati"ning 80% ni boshqaradi.
  3. Qolgan UI holati uchun sizga faqat prop drilling'dan qochish kerakmi?
    Agar holat kamdan-kam yangilansa (masalan, mavzu, foydalanuvchi ma'lumotlari, til), ichki o'rnatilgan Context API mukammal, bog'liqliklardan xoli yechimdir.
  4. Sizning UI holatingiz mantig'i murakkabmi va bashorat qilinadigan o'tishlarga egami?
    useReducer'ni Context bilan birlashtiring. Bu sizga tashqi kutubxonalarsiz holat mantig'ini boshqarishning kuchli, tartibli usulini beradi.
  5. Context bilan unumdorlik muammolariga duch kelyapsizmi yoki holatingiz ko'plab mustaqil qismlardan iboratmi?
    Jotai kabi atomik holat menejerini ko'rib chiqing. U keraksiz qayta renderlarning oldini olib, a'lo darajadagi unumdorlik bilan oddiy API taklif qiladi.
  6. Siz qat'iy, bashorat qilinadigan arxitektura, middleware va kuchli tuzatish vositalarini talab qiladigan keng ko'lamli korporativ ilova quryapsizmi?
    Bu Redux Toolkit uchun asosiy foydalanish holatidir. Uning tuzilmasi va ekotizimi katta jamoalarda murakkablik va uzoq muddatli texnik xizmat ko'rsatish uchun mo'ljallangan.

Qiyosiy xulosa jadvali

Yechim Eng mos holatlar Asosiy afzallik O'rganish darajasi
useState Lokal komponent holati Oddiy, ichki o'rnatilgan Juda past
Context API Kam chastotali global holat (mavzu, auth) Prop drilling'ni hal qiladi, ichki o'rnatilgan Past
useReducer + Context Tashqi kutubxonalarsiz murakkab UI holati Tartibli mantiq, ichki o'rnatilgan O'rta
TanStack Query Server holati (API ma'lumotlarini keshlash/sinxronlash) Katta hajmdagi holat mantig'ini yo'q qiladi O'rta
Zustand / Jotai Oddiy global holat, unumdorlikni optimallashtirish Minimal kod, a'lo unumdorlik Past
Redux Toolkit Murakkab, umumiy holatga ega keng ko'lamli ilovalar Bashoratlilik, kuchli dev vositalar, ekotizim Yuqori

Xulosa: Pragmatik va global nuqtai nazar

React holatini boshqarish dunyosi endi bir kutubxonaning boshqasiga qarshi jangi emas. U turli xil muammolarni hal qilish uchun mo'ljallangan turli xil vositalar mavjud bo'lgan murakkab landshaftga aylandi. Zamonaviy, pragmatik yondashuv - bu afzalliklar va kamchiliklarni tushunish va ilovangiz uchun "holatni boshqarish vositalar to'plamini" yaratishdir.

Dunyo bo'ylab ko'pchilik loyihalar uchun kuchli va samarali stek quyidagilardan boshlanadi:

  1. Barcha server holatlari uchun TanStack Query.
  2. Barcha umumiy bo'lmagan, oddiy UI holatlari uchun useState.
  3. Oddiy, kam chastotali global UI holatlari uchun useContext.

Faqatgina ushbu vositalar yetarli bo'lmagandagina Jotai, Zustand yoki Redux Toolkit kabi maxsus global holat kutubxonasiga murojaat qilishingiz kerak. Server holati va mijoz holatini aniq ajratib, avval eng oddiy yechimdan boshlash orqali siz jamoangiz hajmi yoki foydalanuvchilaringiz joylashuvidan qat'i nazar, unumdor, kengaytiriladigan va saqlash uchun qulay bo'lgan ilovalarni yarata olasiz.

React Holatini Boshqarish: Kontekst, Reducer'lar va Kutubxonalar bo'yicha Global Dasturchi Qo'llanmasi | MLOG