React useFormState: Foydalanuvchi Tajribasini Optimallashtirish uchun Formalarni Boshqarishni Mukammallashtirish

Formalar veb-ilovalarining asosiy qismi bo'lib, foydalanuvchilarga ilovangiz bilan o'zaro aloqada bo'lish va ma'lumotlarni yuborish imkonini beradi. Biroq, forma holatini boshqarish, tekshiruvdan o'tkazish va fikr-mulohazalarni taqdim etish, ayniqsa katta va dinamik ilovalarda murakkablashishi mumkin. React 18 da taqdim etilgan React'ning useFormState hook'i forma holatini boshqarish va formalar bilan ishlash mantiqini soddalashtirishning kuchli va samarali usulini taklif etadi, bu esa samaradorlikni oshirishga va foydalanuvchi tajribasini yaxshilashga olib keladi. Ushbu keng qamrovli qo'llanma useFormState hook'ini chuqur o'rganadi, uning asosiy tushunchalari, afzalliklari, amaliy misollari va ilg'or texnikalarini qamrab oladi.

React useFormState nima?

useFormState - bu React hook'i bo'lib, u holat va yangilash mantiqini yagona hook ichiga joylashtirish orqali forma holatini boshqarishni soddalashtiradi. U ayniqsa React Server Komponentlari va Server Amallari bilan birgalikda ishlash uchun mo'ljallangan bo'lib, forma ishlovini serverga yuklash orqali progressiv yaxshilash va samaradorlikni oshirish imkonini beradi.

Asosiy Xususiyatlari va Afzalliklari:

• Soddalashtirilgan Holat Boshqaruvi: Forma holati va yangilash mantiqini markazlashtiradi, ortiqcha kodni kamaytiradi va kodning o'qilishini yaxshilaydi.
• Server Amallari Integratsiyasi: React Server Amallari bilan uzluksiz integratsiyalashadi, bu sizga forma yuborish va tekshirishni serverda bajarish imkonini beradi.
• Progressiv Yaxshilash: JavaScript yoqilgan bo'lsa, kengaytirilgan funksionallik taqdim etilgan holda, JavaScriptsiz ham formalarning ishlashiga imkon berib, progressiv yaxshilashni ta'minlaydi.
• Optimallashtirilgan Samaradorlik: Forma mantiqini serverda bajarish orqali mijoz tomonidagi ishlovni kamaytiradi, natijada formalar tezroq yuboriladi va ilova samaradorligi oshadi.
• Qulay Foydalanish Imkoniyati: Xatolarni qayta ishlash va nogironligi bo'lgan foydalanuvchilarga fikr-mulohazalarni taqdim etish mexanizmlarini taqdim etish orqali qulay formalarni yaratishga yordam beradi.

useFormState Hook'ini Tushunish

useFormState hook'i ikkita argument qabul qiladi:

1. Server Amali: Forma yuborilganda bajariladigan funksiya. Bu funksiya odatda formani tekshirish, ma'lumotlarni qayta ishlash va ma'lumotlar bazasini yangilash bilan shug'ullanadi.
2. Boshlang'ich Holat: Forma holatining boshlang'ich qiymati. Bu har qanday JavaScript qiymati bo'lishi mumkin, masalan, obyekt, massiv yoki primitiv.

Hook ikki qiymatdan iborat massiv qaytaradi:

1. Forma Holati: Forma holatining joriy qiymati.
2. Forma Amali: Siz form elementining action prop'iga uzatadigan funksiya. Bu funksiya forma yuborilganda server amalini ishga tushiradi.

Oddiy Misol:

Keling, foydalanuvchilarga o'z ismlari va elektron pochta manzillarini yuborish imkonini beradigan oddiy aloqa formasini ko'rib chiqaylik.

            // Server Amali (misol - boshqa joyda aniqlanishi kerak)
async function submitContactForm(prevState, formData) {
  // Forma ma'lumotlarini tekshirish
  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'Iltimos, barcha maydonlarni to\'ldiring.' };
  }

  // Forma ma'lumotlarini qayta ishlash (masalan, elektron pochta yuborish)
  try {
    // Elektron pochta yuborishni simulyatsiya qilish
    await new Promise(resolve => setTimeout(resolve, 1000)); // Asinxron operatsiyani simulyatsiya qilish
    return { message: 'Murojaatingiz uchun rahmat!' };
  } catch (error) {
    return { message: 'Xatolik yuz berdi. Iltimos, keyinroq qayta urinib ko\'ring.' };
  }
}

// React Komponenti
'use client'; // Server Amallari uchun muhim

import { useFormState } from 'react-dom';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, { message: null });

  return (
    

      Ism:
      



      Email:
      



      Yuborish

      {state?.message && 
{state.message}
}
    
  );
}

export default ContactForm;

            

              
                Copy
              
            
          

Ushbu misolda submitContactForm funksiyasi server amali hisoblanadi. U oldingi holat va forma ma'lumotlarini argument sifatida qabul qiladi. U forma ma'lumotlarini tekshiradi va agar ular to'g'ri bo'lsa, ma'lumotlarni qayta ishlaydi va muvaffaqiyatli xabar bilan yangi holat obyektini qaytaradi. Agar xatolar mavjud bo'lsa, u xato xabari bilan yangi holat obyektini qaytaradi. useFormState hook'i forma holatini boshqaradi va formAction funksiyasini taqdim etadi, bu funksiya form elementining action prop'iga uzatiladi. Forma yuborilganda, submitContactForm funksiyasi serverda bajariladi va natijaviy holat komponentda yangilanadi.

useFormState'ning Ilg'or Texnikalari

1. Formalarni Tekshirish:

Formalarni tekshirish ma'lumotlar yaxlitligini ta'minlash va yaxshi foydalanuvchi tajribasini taqdim etish uchun juda muhimdir. useFormState serverda formani tekshirish mantiqini boshqarish uchun ishlatilishi mumkin. Mana bir misol:

            async function validateForm(prevState, formData) {
  const name = formData.get('name');
  const email = formData.get('email');

  let errors = {};

  if (!name) {
    errors.name = 'Ism kiritilishi shart.';
  }

  if (!email) {
    errors.email = 'Email kiritilishi shart.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    errors.email = 'Email formati noto\'g\'ri.';
  }

  if (Object.keys(errors).length > 0) {
    return { errors: errors };
  }

  // Forma ma'lumotlarini qayta ishlash (masalan, ma'lumotlar bazasiga saqlash)
  return { message: 'Forma muvaffaqiyatli yuborildi!', errors: null };
}

function MyForm() {
  const [state, action] = useFormState(validateForm, { message: null, errors: null });

  return (
    

      Ism:
      

      {state?.errors?.name && 
{state.errors.name}
}

      Email:
      

      {state?.errors?.email && 
{state.errors.email}
}

      Yuborish
      {state?.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

Ushbu misolda validateForm server amali forma ma'lumotlarini tekshiradi va har qanday tekshiruv xatolarini o'z ichiga olgan obyektni qaytaradi. Keyin komponent bu xatolarni foydalanuvchiga ko'rsatadi.

2. Optimistik Yangilanishlar:

Optimistik yangilanishlar, hatto server forma yuborishni qayta ishlamasdan oldin ham darhol fikr-mulohaza berish orqali foydalanuvchi tajribasini yaxshilashi mumkin. useFormState va biroz mijoz tomoni mantiqi bilan, siz forma yuborilgandan so'ng darhol forma holatini yangilab, agar server xato qaytarsa, yangilanishni bekor qilish orqali optimistik yangilanishlarni amalga oshirishingiz mumkin.

            'use client'

import { useFormState } from 'react-dom';
import { useState } from 'react';

async function submitForm(prevState, formData) {
  await new Promise(resolve => setTimeout(resolve, 1000)); // Tarmoq kechikishini simulyatsiya qilish

  const value = formData.get('value');
  if (value === 'error') {
    return { message: 'Yuborish muvaffaqiyatsiz bo\'ldi!' };
  }
  return { message: 'Yuborish muvaffaqiyatli bo\'ldi!' };
}

function OptimisticForm() {
  const [optimisticValue, setOptimisticValue] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [state, action] = useFormState(submitForm, { message: '' });

  const handleSubmit = async (e) => {
    setIsSubmitting(true);
    setOptimisticValue(e.target.value.value);
    const formData = new FormData(e.target);
    const result = await action(prevState, formData);
    setIsSubmitting(false);

    if (result?.message === 'Yuborish muvaffaqiyatsiz bo\'ldi!') {
      setOptimisticValue(''); // Xatolik yuz berganda qaytarish
    }
  };

  return (
    

      Qiymat:
      


      Yuborish
      {state?.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

Ushbu misolda biz kechiktirilgan server javobini simulyatsiya qilmoqdamiz. Server amali tugashidan oldin, kiritish maydoni yuborilgan qiymat bilan optimistik tarzda yangilanadi. Agar server amali muvaffaqiyatsiz tugasa ('error' qiymatini yuborish orqali simulyatsiya qilingan), kiritish maydoni avvalgi holatiga qaytariladi.

3. Fayl Yuklashlarni Boshqarish:

useFormState fayl yuklashlarni boshqarish uchun ham ishlatilishi mumkin. FormData obyekti avtomatik ravishda fayl ma'lumotlarini boshqaradi. Mana bir misol:

            async function uploadFile(prevState, formData) {
  const file = formData.get('file');

  if (!file) {
    return { message: 'Iltimos, fayl tanlang.' };
  }

  // Faylni yuklashni simulyatsiya qilish
  await new Promise(resolve => setTimeout(resolve, 1000));

  // Odatda bu yerda faylni serverga yuklaysiz
  console.log('Fayl yuklandi:', file.name);

  return { message: `${file.name} fayli muvaffaqiyatli yuklandi!` };
}

function FileUploadForm() {
  const [state, action] = useFormState(uploadFile, { message: null });

  return (
    

      Fayl tanlang:
      



      Yuklash

      {state?.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

Ushbu misolda uploadFile server amali faylni FormData obyektidan oladi va uni qayta ishlaydi. Haqiqiy ilovada siz odatda faylni Amazon S3 yoki Google Cloud Storage kabi bulutli saqlash xizmatiga yuklaysiz.

4. Progressiv Yaxshilash:

useFormState va Server Amallarining muhim afzalliklaridan biri bu progressiv yaxshilashni ta'minlash qobiliyatidir. Bu shuni anglatadiki, foydalanuvchi brauzerida JavaScript o'chirilgan bo'lsa ham, sizning formalaringiz ishlashda davom etishi mumkin. Forma to'g'ridan-to'g'ri serverga yuboriladi va server amali forma yuborishni boshqaradi. JavaScript yoqilganda, React formani mijoz tomonidagi interaktivlik va tekshirish bilan yaxshilaydi.

Progressiv yaxshilashni ta'minlash uchun siz server amallaringiz barcha formani tekshirish va ma'lumotlarni qayta ishlash mantiqini boshqarishiga ishonch hosil qilishingiz kerak. Shuningdek, JavaScriptsiz foydalanuvchilar uchun zaxira mexanizmlarini taqdim etishingiz mumkin.

5. Qulay Foydalanish Imkoniyatlari Masalalari:

Formalar yaratishda, nogironligi bo'lgan foydalanuvchilar sizning formalaringizdan samarali foydalanishlarini ta'minlash uchun qulay foydalanish imkoniyatini hisobga olish muhimdir. useFormState xatolarni qayta ishlash va foydalanuvchilarga fikr-mulohazalarni taqdim etish mexanizmlarini taqdim etish orqali qulay formalarni yaratishga yordam beradi. Mana ba'zi eng yaxshi amaliyotlar:

• Semantik HTMLdan Foydalaning: Formalaringizga struktura va ma'no berish uchun <label>, <input> va <button> kabi semantik HTML elementlaridan foydalaning.
• Aniq Yorliqlarni Taqdim Eting: Barcha forma maydonlarida for atributi yordamida tegishli kiritish elementlari bilan bog'langan aniq va tavsiflovchi yorliqlar mavjudligiga ishonch hosil qiling.
• Xatolarni To'g'ri Boshqaring: Tekshirish xatolarini aniq va qisqa tarzda ko'rsating va ekran o'quvchilari bo'lgan foydalanuvchilarni xatolar mavjudligi haqida ogohlantirish uchun ARIA atributlaridan foydalaning.
• Klaviatura Navigatsiyasini Taqdim Eting: Foydalanuvchilar klaviatura yordamida forma bo'ylab harakatlanishiga ishonch hosil qiling.
• ARIA Atributlaridan Foydalaning: Ekran o'quvchilari kabi yordamchi texnologiyalarga qo'shimcha ma'lumot berish uchun ARIA atributlaridan foydalaning.

useFormState'dan Foydalanish bo'yicha Eng Yaxshi Amaliyotlar

useFormState hook'idan maksimal darajada foydalanish uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:

• Server Amallarini Kichik va Maqsadli Saqlang: Server amallari bitta vazifa uchun mas'ul bo'lishi kerak, masalan, forma ma'lumotlarini tekshirish yoki ma'lumotlar bazasini yangilash. Bu kodingizni tushunish va saqlashni osonlashtiradi.
• Xatolarni To'g'ri Boshqaring: Kutilmagan xatolarning oldini olish va foydalanuvchiga ma'lumot beruvchi xato xabarlarini taqdim etish uchun server amallaringizda mustahkam xatolarni boshqarishni amalga oshiring.
• Tekshiruv Kutubxonasidan Foydalaning: Forma tekshiruvi mantiqini soddalashtirish uchun Zod yoki Yup kabi tekshiruv kutubxonasidan foydalanishni ko'rib chiqing.
• Foydalanuvchiga Aniq Fikr-Mulohaza Taqdim Eting: Foydalanuvchiga forma yuborish holati, jumladan tekshirish xatolari, muvaffaqiyat xabarlari va yuklash ko'rsatkichlari haqida aniq va o'z vaqtida fikr-mulohaza bering.
• Samaradorlikni Optimallashtiring: Samaradorlikni oshirish uchun mijoz va server o'rtasida uzatiladigan ma'lumotlar miqdorini minimallashtiring.

Haqiqiy Dunyo Misollari va Qo'llash Holatlari

useFormState turli xil haqiqiy dunyo ilovalarida qo'llanilishi mumkin. Mana ba'zi misollar:

• Elektron Tijorat To'lov Formalari: To'lov ma'lumotlari, yetkazib berish manzillari va buyurtma xulosalarini boshqarish.
• Foydalanuvchini Ro'yxatdan O'tkazish va Kirish Formalari: Foydalanuvchilarni autentifikatsiya qilish va yangi hisoblar yaratish.
• Aloqa Formalari: Foydalanuvchi so'rovlari va fikr-mulohazalarini yig'ish.
• Ma'lumotlarni Kiritish Formalari: Turli ilovalarda ma'lumotlarni kiritish va boshqarish.
• So'rovnomalar va Viktorinalar: Foydalanuvchi javoblarini yig'ish va fikr-mulohazalarini taqdim etish.

Masalan, elektron tijorat to'lov formasini ko'rib chiqing. useFormState yordamida siz serverda yetkazib berish manzillari, to'lov ma'lumotlari va boshqa buyurtma tafsilotlarini tekshirishni amalga oshirishingiz mumkin. Bu ma'lumotlar bazasiga yuborilishidan oldin ularning to'g'riligini ta'minlaydi va mijoz tomonidagi ishlovni kamaytirish orqali samaradorlikni oshiradi.

Yana bir misol - foydalanuvchini ro'yxatdan o'tkazish formasi. useFormState yordamida siz serverda foydalanuvchi nomlari, parollar va elektron pochta manzillarini tekshirishni amalga oshirishingiz mumkin. Bu ma'lumotlarning xavfsizligini va foydalanuvchining to'g'ri autentifikatsiya qilinishini ta'minlaydi.

Xulosa

React'ning useFormState hook'i forma holatini boshqarish va formalar bilan ishlash mantiqini soddalashtirishning kuchli va samarali usulini taqdim etadi. Server Amallari va progressiv yaxshilashdan foydalangan holda, useFormState sizga ajoyib foydalanuvchi tajribasini taqdim etuvchi mustahkam, samarali va qulay formalar yaratish imkonini beradi. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz useFormState'dan samarali foydalanib, formalar bilan ishlash mantiqini soddalashtirishingiz va yaxshiroq React ilovalarini yaratishingiz mumkin. Turli xil, xalqaro auditoriya uchun formalar loyihalashda global qulaylik standartlari va foydalanuvchi kutishlarini hisobga olishni unutmang.