React Hook Form yordamida React shakllarini soddalashtirish

14-may, 20244 daqiqalik mutolaastatik

ReactReact Hook FormFrontend dasturlashVeb-dasturlash

React Hook Form React ilovalarida shakllar bilan ishlash usulini ancha yaxshilaydi. U shakl holatini boshqarishni soddalashtiradi, unumdorlikni oshiradi, deklarativ validatsiya beradi, moslashuvchan integratsiyani taʼminlaydi va takroriy kodni kamaytiradi. React Hook Form yordamida qayta foydalaniladigan shakl komponentlarini yaratish, ishlab chiqish jarayonini tezlashtirish va foydalanuvchi tajribasini yaxshilash mumkin.

Quyida undan foydalanishning asosiy sabablarini tushuntiraman.

1. Holat boshqaruvining soddalashishi

React Hook Form shakl holatini siz uchun boshqaradi. U maydon qiymatlarini avtomatik kuzatib, holatni mos ravishda yangilaydi. Qoʻlda holat boshqarishga ehtiyoj qolmagani sababli kod murakkabligi va xatolar xavfi kamayadi. DevTools esa dasturchi tajribasini yanada qulay qiladi.

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" {...register("name")} />
      <input type="email" {...register("email")} />
      <button type="submit">Submit</button>
    </form>
  );
}

Bu misolda React Hook Form shakl holatini avtomatik boshqaradi. register funksiyasi maydonlarni shaklga roʻyxatdan oʻtkazadi va ularning qiymatlari avtomatik kuzatiladi. handleSubmit esa yuborishni boshqarib, maʼlumotlarni onSubmit callbackiga uzatadi.

2. Samarali qayta render

React Hook Form faqat oʻzgargan maydonlarni qayta render qiladi. Butun shaklning keraksiz qayta render qilinishiga yoʻl qoʻymaydigan bu yondashuv unumdorlikni oshiradi. Natijada ilova tezkorroq va samaraliroq ishlaydi.

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" {...register("name")} />
      <input type="email" {...register("email")} />
      <ExpensiveComponent />
      <button type="submit">Submit</button>
    </form>
  );
}

Maydonlar yangilanganda faqat tegishli maydonlar qayta render qilinadi. Render mantiqi qimmat boʻlishi mumkin boʻlgan ExpensiveComponent oʻzgarmaydi. Shu tariqa React Hook Form shaklning umumiy unumdorligini yaxshilaydi.

3. Deklarativ validatsiya

React Hook Form validatsiya qoidalarini deklarativ tarzda belgilash imkonini beradi. Har bir maydon talablari sodda va tushunarli sintaksis bilan yoziladi. Bu qoidalarni qoʻllash va foydalanuvchiga mazmunli xato xabarlarini koʻrsatishni osonlashtiradi.

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        {...register("name",{ required: 'Name is required' })}
      />
      {errors.name && <span>{errors.name.message}</span>}
      {/* as you can see it is very handy with handling errors as well*/}
      <input
        type="email"
        {...register("email",{
          required: 'Email is required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Invalid email address',
          },
        })}
      />
      {errors.email && <span>{errors.email.message}</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

4. Moslashuvchan integratsiya

React Hook Form mavjud React komponentlari bilan oson integratsiyalanadi. Shakl mantiqi va validatsiya qoidalarini oʻz ichiga olgan qayta foydalaniladigan komponentlarni yaratish mumkin. Ularni ilovaning turli joylarida birlashtirish va qayta ishlatish kodni boshqarishni yaxshilaydi.

import { useForm, FormProvider } from 'react-hook-form';
import InputField from './InputField';

function MyForm() {
  const methods = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <InputField name="name" label="Name" />
        <InputField name="email" label="Email" type="email" />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

function InputField({ name, label, type = 'text' }) {
  const { register } = useForm();

  return (
    <div>
      <label>{label}</label>
      <input type={type} {...register(name)} />
    </div>
  );
}

5. Kamroq takroriy kod

React Hook Form shakllar bilan ishlash uchun zarur takroriy kod miqdorini sezilarli kamaytiradi. Kutubxonaning sodda API si murakkabliklarni yashiradi. Kod oʻqilishi va qoʻllab-quvvatlanishi osonlashadi, siz esa ilovaning asosiy funksiyalariga eʼtibor qarata olasiz.

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" {...register("name")} />
      <input type="email" {...register("email")} />
      <button type="submit">Submit</button>
    </form>
  );
}

Bu misolda bir necha qator kod bilan holat boshqaruvi, yuborish va maydonlarni roʻyxatdan oʻtkazish tayyor boʻladi. Ixcham va ifodali kod oʻqiluvchanlik hamda qoʻllab-quvvatlanishni yaxshilaydi.

Maqola boshida aytganimdek, shakllar koʻp boʻlgan loyihalarda React Hook Form men uchun katta oʻzgarish boʻldi. U ishni bajarishda juda yaxshi dasturchi tajribasini beradi.

React qayta foydalaniladigan komponentlar uchun juda qulay. Keyingi maqolada React Hook Form bilan komponentlarni qayta ishlatish imkoniyatidan qanday foydalanganimni amaliy misol sifatida tushuntiraman.

Bogʻliq loyiha keysi

Bu maqola hozircha alohida, ammo quyidagi bogʻlanish taklifi doim ochiq.

Loyihani boshlash

Loyihangizga shunday mahsulot tafakkuri kerakmi?

Mahsulotni shakllantirib, interfeys, tizim va takomillashtirish jarayonini ishga tushira oladigan mutaxassis kerak boʻlsa, bogʻlaning.

Hamkorlik qilish