Bu yazı formlarla işləməkdə geliştiricilərin qarşılaşdıqları yayılan mübahisələr və React 19-nin sonunda formların işləməyi daha təmiz, daha deklarativ və daha az hatalardan uzaqlaşdırmaq üçün uzun müddət gözləyən bir neçə alət təqdim etməsinin yollarını izah edir. Son altı il ərzində – kompleks form sistemləri qurmaqdan, SDG-də AI alətlərini birləşdirmək üçün – yazdığım, debug etdiyim və qəbul etmək istədiyimdən daha çox form kodu refaktorlaşdırdım. Əgər bir zamanlar React-də formlar yaratmış və ya istifadə etmiş olsanız, bu hissini paylaşırsınız. Bu yazıda, formaları işləməkdə geliştiricilərin qarşılaşdıqları yayılan mübahisələrdən sizə getəcəyəm - və necə Son olaraq, uzun müddət gözləyən bir neçə alət təqdim edir ki, formların işləməsi daha təmiz, daha deklarativ və daha az hatalardan uzaqlaşdırılır. React 19 Konfrans formaları ilə bağlı problemlər Hər bir React geliştiricinin ən azından bir dəfə qarşılaşdığı ağrılar ilə başlayalım. Hər yerdə “Boilerplate” kodu “React”də form quraşdırılması normal olaraq belə başlanır: const [name, setName] = useState('');
const [surname, setSurname] = useState('');
const [error, setError] = useState(null);

function handleSubmit(event) {
  event.preventDefault();
}
 Bu, çox asandır və çox az formalar üçün yaxşıdır. Amma bir dəfə artdığınızda, tekrarlı status qolu, manual resetlər və sonsuzluğa boğulursunuz. Söhbətlər Əsas səhifə ( Əsas səhifə ( Hər bir düymətsizlik bir yeniləməyə səbəb olur və hatalardan və ya davam etdirilən durumlardan istifadə etmək daha çox status dəyişənləri lazımdır. II. Sürücülər Formunuz yalnız bir komponent deyil, yeganə komponentlərin bir hiyerarşisi olduğunda, hər düymədə proqnozlar keçirmisiniz: <Form>
  <Field error={error} value={name} onChange={setName}>
    <Input />
  </Field>
</Form>
 Ümumilikdə, problemlər, problemlər, problemlər var ki, hamı bir-birindən uzaqlaşır. Bu, yalnız kodun boğuşmasına səbəb deyil, daha da ağrılıdır. Optimist güncellemələr çətindir Optimist güncellemələri manualdırmı? Bu, bir istifadəçi əməllərindən sonra UI-də bir “bağışlı” dəyişiklik göstərdiyiniz zaman - serverin bunu doğruldan əvvəl. Bu, asan görünür, lakin bir istintaq başarısız olduğunda rollback logiklərini idarə etmək həqiqətən baş ağrısı olabilir. Növbəti məqaləNövbəti Növbəti Növbəti Növbəti Növbəti Növbəti Növbəti Növbəti Növbəti Növbəti Növbəti Növbəti Növbəti Növbəti React 19 bunun üçün daha təmiz bir şey təqdim edir. “ActionsState”: Formular göndərmək üçün yeni bir yol Xatırladaq ki, “React 19”in ən heyecanlı add-onlarından biri ==*useActionState *==hookdir. VVD - Hollandiyada futbolçu bu adla tanımır, orada VVD daha çox mərkəz-sağı təmsilən edən siyasi partiyanın adının qısaltması kimi bilinir - artıq sorğu-suala ehtiyacı olmayan ulduzdu. const [state, actionFunction, isPending] = useActionState(fn, initialState);
 Burada nə olub: 
 
 
 
 
 
  — your async function that handles the form submission fn 
 
  — the initial value of your form state initialState 
 
  — a built-in flag showing whether a submission is in progress isPending ABŞ Başlanğıc İspaniya necə işləyir “Async” funksiyası automatik olaraq iki argument alır: Kullanış Kullanış const action = async (previousState, formData) => {
  const message = formData.get('message');

  try {
    await sendMessage(message);
    return { success: true, error: null };
  } catch (error) {
    return { success: false, error };
  }
};
 You then hook it into your form like this: const [state, actionFunction, isPending] = useActionState(action, {
  success: false,
  error: null,
});

return <form action={actionFunction}> ... </form>;
 Şirkətdən çıxarıldıqdan sonra otomatik reaksiya verilir: 
 
 
 
 Async aksiyaları Güncellemələr ***status *** with the returned result İstehsal prosesi izi ilə izlənir Aksiya Aksiya İspaniya İspaniya Artıq manual VVD - Hollandiyada futbolçu bu adla tanımır, orada VVD daha çox mərkəz-sağı təmsil edir. Ətraflı xəbərlər, Ətraflı xəbər Ətraflı xəbərlər, Ətraflı xəbər Ətraflı xəbərlər, Ətraflı xəbər A note about startTransition If you decide to trigger the form action manually (e.g., outside of the form’s action prop), wrap it with  : startTransition Başlamaq const handleSubmit = async (formData) => {
  await doSomething();

  startTransition(() => {
    actionFunction(formData);
  });
};
 Xatırladaq ki, “React” sizi “async” güncelleməsinin bir keçiddən uzaqlaşdığını xəbər verəcək. düzgün güncellenməyəcək. İspaniya Nəyə görə sevəcəksiniz 
 
 
 
 
 Bir neçə ildir ki, bu problemin həllinə ehtiyac yoxdur. Tədbirdə automatik qələbə ( Əsas səhifə / Xəbərlər / Əsas səhifə Auto-formulardan sonra işləmək olar İspaniya İspaniya Əlavə.az xəbər verir Form logiki bir daha deklarativ hiss edir - yalnız aksiyasını, kabloları deyildir. useFormStatus: no more props drilling Əsas səhifə / Dərslər / Dərslər / Dərslər / Dərslər Yeni Qazaxıstanda yeni qələbə - - Ağaclar formasında prop boru problemini çözər. İstirahət import { useFormStatus } from 'react-dom';

const { pending, data, method, action } = useFormStatus();
 Bu həkimə müraciət edə bilərsiniz. Bu proses automatik olaraq “Mother” formuna bağlanacaq. inside any child component of a form Example function SubmitButton() {
  const { pending, data } = useFormStatus();
  const message = data ? data.get('message') : '';

  return (
    <button type="submit" disabled={pending}>
      {pending ? `Sending ${message}...` : 'Send'}
    </button>
  );
}

function MessageForm() {
  return (
    <form action={submitMessage}>
      <SubmitButton />
    </form>
  );
}
 
 
 SubmitButton formuların verilərinə və davamlı statusuna daxil oluna bilər - heç bir props keçirmədən. Bilin ki, Formuların verilərinə və davamlı statusuna qulaq asmaq mümkün deyil - heç bir props göndərilmədən. Təsadüfi Təsadüfi Gotchas to remember Gökçəyə xatırlamaq lazımdır 
 
 
 
 Xatırladaq ki, bu, bir neçə ildir, bir neçə ildir, bir neçə ildir, bir neçə ildir, bir neçə ildir. Əsas səhifə » Xəbərlər » Əsas səhifə » Əsas səhifə » Əsas səhifə » Əsas səhifə VVD - Hollandiyada futbolçu bu adla tanımır, orada VVD daha çox mərkəz-sağı təmsilən edən siyasi partiyanın adının qısaltması kimi bilinir - artıq sorğu-suala ehtiyacı olmayan ulduzdu. Tədbirlər formalaşdı “Get” – “Get” Niyə problemlər yaranır Ağaçların formasına bənzəyir Uşaqların içərisində kontekstli qərarlar alınır Əməliyyatlar daha təmiz və təmizdir Düşünürəm ki, optimistlər Son olaraq, mənim ən sevdiyim oyunlarımdan biri haqqında danışaq. . optimizasiya optimizasiya Bu, optimist UI güncellemələri üçün built-in dəstəyi gətirir, istifadəçi interaksiyaları anında və düzgün hiss edər. Problemləri Əsas səhifə » Əsas səhifə » Əsas səhifə » Əsas səhifə » Əsas səhifə Normal olaraq, lokal statusu, rollback logiki və async istehlakları arasındadırsınız. Çözüm ilə Minimalizm və minimalistlik: optimizasiya optimizasiya optimizasiya const [optimisticMessages, addOptimisticMessage] = useOptimistic(
  messages,
  (state, newMessage) => [newMessage, ...state]
);

const formAction = async (formData) => {
  addOptimisticMessage(formData.get('message'));
  try {
    await sendMessage(formData);
  } catch {
    console.error('Failed to send message');
  }
};
 Server istədiyi zaman, React automatik olaraq əvvəlki statusa qayıdır. Əgər yaxşı olarsa, optimist dəyişikliklər qalır. Dərslər: Mütəxəssislər dəyişməyib Güncellemənin istifadə etdiyiniz funksiyası optimist olmalıdır : pure Yanılmır ki: (prev, newTodo) => {
  prev.push(newTodo);
  return prev;
}
 Doğrudan da: (prev, newTodo) => [...prev, newTodo];
 
 
 Hər zaman yeni bir objekt və ya matris qaytarın. Hər zaman yeni bir objekt və ya matris qaytarın. StartTransition ilə işləmək Bu güncellemələr formadan çıxırsa, Onları içərisində : Aksiya Başlamaq Aksiya Başlamaq startTransition(() => {
  addOptimisticMessage(formData.get('message'));
  sendMessage(formData);
});
 Buna baxmayaraq, “React” sizi optimist bir güncellemənin bir dəyişənin dışında meydana gəldiyini xəbər verəcək. Optimizmin faydaları 
 
 
 
 
 İstirahət zamanı feedback Tədbirdə automatik yeniliklər Daha təmiz komponent logiki Daha az dövlətə ehtiyac var Bu, istifadəçilərin hiss etdiyinin UX-i artırmaq kimi bir şeydir - əgər appunuzun niyə aniden bu qədər sürətli hiss etdiyini bilmirlərsə. Sonrakı React 19 form işlətməyi çox asanlaşdırır – və bir dəfə, yeni sintax haqqında deyildir, lakin həqiqətən də geliştiricilərin deneyimləri yaxşılaşır. Burada nəyi və nə zaman istifadə etmək lazımdır: 
 
 
 
 
 
 
 
 
 
 Goal 
 React 19 Tool 
 
 
 
 Access form submission result 
 useActionState 
 
 
 
 Track pending submission 
  from   or   from  isPending useActionState pending useFormStatus 
 
 
 
 Access form state deep in children 
 useFormStatus 
 
 
 
 Handle optimistic UI updates 
 useOptimistic Access form submission result useActionState Kullanış Track pending submission  from   or   from  isPending useActionState pending useFormStatus İspaniya Kullanış Tədbirlər useFormStatus Access form state deep in children useFormStatus İstirahət Handle optimistic UI updates useOptimistic optimizasiya Bu qidalar React formalarını deklarativ, kompozibil və daha az gürcü yaratır. Əgər React-də formlarla işləmək yalnız şeyləri sinkronlaşdırmaq üçün boilerplate yazmaq anlamına gəldiyini hiss etmiş olsanız, React 19 sizin gözləyirdiyiniz versiyadır. React 19 ilə web deneyimlərinin gələcəyini yaradan komandaya daxil olun! Atın Biz daha smart, daha sürətli və daha dinamik interfeyslər yaratırıq - və biz işləyirik. Sosial Discovery qrupu 
 
 Sergey Levkovich, Social Discovery Group-da böyük Frontend Developer tərəfindən yazılıb. Sergey Levkovich, Social Discovery Group-da böyük Frontend Developer tərəfindən yazılıb. yazılıb Frontend Developer-in baş direktoru . Sergey Levkovich Social Discovery Group Sergey Levkovich haqqında Sergey Levkovich haqqında Sosial Discovery qrupu Sosial Discovery qrupu

This story contains new, firsthand information uncovered by the writer.

See how we create Social Life 3.0 👉

Social Discovery Group Earns the Great Place To Work® Certification in the USA!

Swipe Away Loneliness: 2024 Dating Trends Forecast

Bu audio hekayənin orijinal dilində hazırlanmışdır!

React 19: Formlarla işləmək üçün yeni alətlər

About Author

ŞƏRHLƏR

ETİKET ASIN

BU MƏQALƏ TƏQDİM EDİLMİŞDİR

Related Stories

Women in Tech: Azize Sultan Shares Her Inspiring Journey from Architecture to Tech Leadership

Optimizing Operations for Real Estate Investors - Interview with Startups of the Year Nominee, Azibo

How Azarus's Technology is Transforming Viewer Engagement on Stream

Women in Tech: Azize Sultan Shares Her Inspiring Journey from Architecture to Tech Leadership

Optimizing Operations for Real Estate Investors - Interview with Startups of the Year Nominee, Azibo

How Azarus's Technology is Transforming Viewer Engagement on Stream

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps