Энэ нийтлэл нь хэлбэрээр ажиллуулах үед хөгжүүлэгчдийн өргөн хүрээтэй харьцуулахад туршиж байна - React 19 хамгийн сүүлийн үеийн арга хэрэгслүүд нь хэлбэрээр боловсруулах илүү цэвэр, илүү хэлбэртэй, маш бага алдаатай болгодог. Өнгөрсөн 6 жилийн турш фронтын хөгжүүлэг - SDG-д алдартай хэлбэрийн системийг бий болгохын тулд AI хэрэгслүүдийг нэгтгэхийн тулд - Би хэлбэрийн кодыг хүлээн зөвшөөрсөнээс дээш хэлбэрийн кодыг бичсэн, буцаж, шинэчлэгдсэн. Хэрэв та React-д хэлбэрийг үүсгэх, хадгалах бол та энэ мэдрэмжийг хуваалцах болно. Тэд алдартай хязгаарлагдмал байдаг ... тэд биш хүртэл. Энэ нийтлэлд, би хэлбэрээр ажиллуулах үед хөгжүүлэгчид нь харьцуулахад харьцуулахад туслах болно - болон хэрхэн Өнгөрсөндээ, хэлбэрийн хяналтыг илүү цэвэр, илүү декларатив, бага алдаатай болгох нь зарим нь дундаж олох хэрэгслүүд танилцуулдаг. ✨ React 19 Ажлын хэлбэрээр нийтлэг асуултууд Хамгийн сүүлийн үеийн React-ийн хөгжүүлэгчдийн хамгийн бага нэг удаа үзсэн болзоо нь эхлэх болно. 1. Boilerplate код бүх газар React-д хэлбэрийн статусын удирдлага нь ихэвчлэн дараах хэлбэрийг эхлэх болно: const [name, setName] = useState('');
const [surname, setSurname] = useState('');
const [error, setError] = useState(null);

function handleSubmit(event) {
  event.preventDefault();
}
 ✅ Энэ нь хялбар юм - бага хэлбэрээр маш сайн. Гэсэн хэдий ч, та дэлгэрэнгүй мэдээллийг илгээх болно. Зөвлөл Бүртгүүлэх Бүртгүүлэх Бүх хавтгай дүүргэлт нь шинэчлэлийг идэвхжүүлэхийн тулд, алдаа, хэзээ ч байтугай нөхцөл байдлыг хянахын тулд илүү их статусын өөрчлөн хэрэгтэй. Энэ нь функцтай боловч алдартай биш юм. 2. Props бутлуур Хэрэв таны хэлбэр нь зөвхөн нэг компонент биш боловч хавхлагатай компонентүүдний хиэрхэг юм бол та бүх түвшин дамжуулан тавтай морилно уу: <Form>
  <Field error={error} value={name} onChange={setName}>
    <Input />
  </Field>
</Form>
 Статууд, алдаа, ачаалал хавтан - бүх олон давхарга дамжуулан буурсан. Энэ нь кодыг харьцуулахад зөвхөн харьцуулахад биш, байгаль орчныг, рефакторинг болдог. 3. Оптимист шинэчлэлт нь хэцүү байдаг Та аль хэдийн optimistic шинэчлэлт ручнод имплементийг ашиглахыг хүсэж байна уу? Энэ нь хэрэглэгчийн үйл явдлын дараа хэрэглэгчийн интерфэйс дээр "ирдэг" өөрчлөлтийг үзнэ үү - сервер нь үр дүнтэй баталгаажуулах өмнө. Энэ нь хялбар болдог боловч асуултанд хязгаарлагдмал үед rollback логик удирдах нь үнэхээр хатуу түнш байж болно. Хэрэв та цаг амархан оптимистийг хадгалж байна уу? Хэрэв та үүнийг хуваалцах, дараа нь хуваалцах вэ? React 19 нь энэ нь маш их цэвэршүүлэлттэй зүйлийг танилцуулж байна. useActionState: хэлбэрийн илгээх боловсруулах шинэ арга React 19-ийн хамгийн гайхамшигтай нэмэлтүүд нь ==*useActionState *==hook юм. Энэ нь async хэлбэрийн илгээх, статусын удирдлагын, тавтай морилно уу - бүх нэг газар дээр нэгтгэсэн хэлбэрийн логик нь хялбардаг. const [state, actionFunction, isPending] = useActionState(fn, initialState);
 Энд үүнийг хийж байна: 
 
 
 
 
 
  — 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 АНУ-ын Эхлэл Өнгөрсөн Энэ нь хэрхэн ажилладаг Async функц нь автоматаар хоёр аргументийг хүлээн авах: Бүртгүүлэх Бүртгүүлэх 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>;
 Одоо, хэлбэр илгээсэн үед, Автомат React: 
 
 
 
 Таны async үйл явцыг зовох Бүтээгдэхүүний шинэчлэлүүд ***state ***with the returned result isPending дамжуулан захиалгын үйл явцыг харах Ажлын Ажлын Өнгөрсөн Өнгөрсөн Ямар ч manual эсвэл ресет логик — React нь энэ бүхэнтэй байлгах. ️ хэрэглэх, урьдчилан сэргийлэх хэрэглэх, урьдчилан сэргийлэх хэрэглэх, урьдчилан сэргийлэх 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 Сэтгэгдэл const handleSubmit = async (formData) => {
  await doSomething();

  startTransition(() => {
    actionFunction(formData);
  });
};
 Үнэндээ, React танд асинк шинэчлэлийг транзицийг гадна аваад, Энэ нь зөв шинэчлэгддэггүй. Өнгөрсөн Хэрэв та ашиглахыг хүсэж байгаа болActionState 
 
 
 
 
 ✅ Multiple ==*UseState *==hooks шаардлагагүй ✅ Автомат уян хатан байдал (isPending) ✅ ямар ч event.preventDefault() шаардлагагүй ✅ Автомашины хэлбэр сэргээх дараа Өнгөрсөн Өнгөрсөн Event.preventDefault Сэтгэгдэл Формулын логик нь хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн useFormStatus: no more props drilling useFormStatus: ямар ч илүү Props буцах Өөр нэг хүчтэй шинэ хавхлага - — босоо хэлбэрээр ширээний асуудал шийднэ. Бүртгүүлэх import { useFormStatus } from 'react-dom';

const { pending, data, method, action } = useFormStatus();
 Та энэ хавтан гэж нэрлэдэг болно , болон энэ нь автоматаар эх үүсвэр хэлбэртэй холбоотой байх болно. 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 хэлбэрийн өгөгдөл, урьдчилан сэргийлэх статусын хандах боломжтой - ямар ч босоо хуваалцсангүй. Энэ нь Формулын өгөгдөл, урьдчилан сэргийлэх статусыг хангах боломжтой - ямар ч баталгаажуулалтыг дамжуулахгүй. SubmitButton Үнэлгээ Gotchas to remember Готшийг мэдэгдэх 
 
 
 
 🔸 Энэ нь үйл ажиллагаа явуулж чадахгүй бол энэ нь хэлбэрийн хэлбэрийн хэлбэрийн анагаах хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлбэрийн хэлб 🔸 Энэ нь onSubmit менежер ашиглан хэлбэрийг хариулах болно - энэ нь ***action ***prop нь хэлбэрийн байх ёстой. ⚠️ Үнэндээ, formMethod-ийн бутлуудын дотор бутлуудыг эсвэл давуу тал нь (жишээ нь, formMethod=“get”) хүсэлттэй ажилладаггүй - хэлбэр нь одоо ч бас гол арга хэрэгсэл ашигладаг. Би GitHub-д энэ бутлуудыг харахын тулд__ийг нээгдсэн байна. Өнгөрсөн Формулын FormMethod = “Get” Хэрвээ хэрэглэхFormStatus matters Өргөтгөл нь зуух хэлбэрээр prop бутлах ⚠ Хөгжлийн компонентын дотор контекст шийдлийг боломжийг олгодог 💡 Components disconnected болон цэвэршүүлэх хэрэглээOptimistic: declarative optimistic UI Өнгөрсөн, бид миний хамгийн дуртай нэмэлтүүдийн талаар хэлж байна - . Үнэлгээ Үнэлгээ Энэ нь optimistic UI шинэчлэлт зориулагдсан дэмжлэг үзүүлдэг, хэрэглэгчийн интеракцийг тавтай морилно уу. Эдүүлбэр Хэрэв та "Favorites" -ийг нэмнэ үү гэж үзнэ үү. Та шинэчлэлт дараа нь - сервер хариу өмнө үзнэ үү. Түлхүүр хэлбэрээр, та орон нутгийн нөхцөл, rollback логик, async асуултууд хооронд хуваалцах болно. шийдэл Нөхцөл , энэ нь deklarative болон минималтай байх болно: Үнэлгээ Үнэлгээ Үнэлгээ 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');
  }
};
 Хэрэв серверийн хүсэлт буцаж байгаа бол React автоматтай өмнөх хэлбэрээр буцаж болно. Энэ нь амжилттай байгаа бол - optimistic change remains. Хамгийн чухал дүрэм: өөрчилж чадахгүй Ажуулалт функцийг хэрэглэдэгOptimistic нь : pure Эдүүлбэр : (prev, newTodo) => {
  prev.push(newTodo);
  return prev;
}
 Энэ нь зөв: (prev, newTodo) => [...prev, newTodo];
 
 
 Бүгдийгөө шинэ статусын объект эсвэл матриаг өгдөг! Хамгийн сүүлийн үеийн мэдээ State Object эсвэл Array! new StartTransition нь ашиглах Хэрэв та хуваалцсан шинэчлэлүүдийг хэлбэрийн гарын авлагатай , тэднийг хавтгай : Ажлын Сэтгэгдэл Ажлын Сэтгэгдэл startTransition(() => {
  addOptimisticMessage(formData.get('message'));
  sendMessage(formData);
});
 Үнэндээ, React танд optimistic шинэчлэл нь транзицийг гадна эхэлсэн юм. 💡 хэрэглээний ашигOptimistic 
 
 
 
 
 Өнгөрсөн UI Feedback Автомат Rollback алдаа Cleaner Component логик Хязгаарлагдмал ачаалал нь шаардлагагүй Энэ нь UX-ийн сайжруулах хэрэглэгчид мэдэж байгаа төрөл юм - тэр ч байтугай тэд таны апп нь хэзээ ч маш хурдан гэж мэддэггүй. Баримтлал React 19 нь хэлбэрийн боловсруулах нь ихэвчлэн хялбар болгодог - болон нэг удаа, энэ нь шинэ ширээний тухай биш, Харин үнэхээр хөгжүүлэгчийн туршлага нь сайжруулдаг. Эдгээр нь ашиглах талаар хурдан тодорхойлолт байна: 
 
 
 
 
 
 
 
 
 
 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 Бүртгүүлэх Track pending submission  from   or   from  isPending useActionState pending useFormStatus Өнгөрсөн Бүртгүүлэх Үнэлгээ Бүртгүүлэх Access form state deep in children useFormStatus Бүртгүүлэх Handle optimistic UI updates useOptimistic Үнэлгээ Эдгээр хавхлага нь React-ийн хэлбэрүүд нь deklarative, composable, илүү хязгааргүй болгодог. Хэрэв та React-д хэлбэрээр ажиллаж байгаа бол зүгээр л зүйлсийг синхрончлохын тулд boilerplate бичнэ үү - React 19 тавтай морилно уу. ✨ React 19-тэй вэб туршлаганы ирээдүйг үүсгэх багтай! Нөхцөл , бид илүү уян хатан, хурдан, илүү динамик интерфэйс бий болгож байна - бид ажиллуулж байна. Өнөөдөр бидэнтэй таны дараагийн боломжийг олж авах. Социал Discovery Group 
 
 Sergey Levkovich, Social Discovery Group-ийн алдартай фронтын хөгжүүлэгч. Sergey Levkovich, Social Discovery Group-ийн алдартай фронтын хөгжүүлэгч. Эдүүлбэр Senior Frontend Developer нь . Сергей Левкович Social Discovery Group Сергей Левкович Сергей Левкович Социал Discovery Group Социал Discovery Group

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

Энэхүү аудио нь түүхийн эх хэлээр хийгдсэн болно!

React 19: Forms нь ажиллахын тулд шинэ хэрэгсэл

About Author

Сэтгэгдлүүд

TAG ҮҮ

ЭНЭ ӨГҮҮЛЛИЙГ ТОЛГОЙЛУУЛСАН

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps