سنتحدث هذا الأسبوع عن تحديثات وخطافات React 19 الجديدة. بعد الاطلاع على بعض هذه التحديثات الجديدة واستخدامها، لا يسعني إلا أن أوافق على أنها قامت بتبسيط بعض الأنشطة الصارمة التي يقوم بها المطورون عند إنشاء التطبيقات، وخاصة التطبيقات التفاعلية ذات الصلة بالنماذج.

انضم إلي ودعنا نستكشف بعض هذه التحديثات الجديدة.

مترجم React: يقوم مترجم React باختيار كود React الخاص بك، وترجمته إلى كود JavaScript للمتصفح، ويدير حالة المكون الخاص بك أو واجهة المستخدم. يساعد هذا الإجراء الفردي على تحسين أداء التطبيق الخاص بك.

إذا كنت على دراية بخطاف useMemo وخطاف useCallback وReact.Memo، فسوف تفهم أنها تساعد في حفظ (تخزين القيم أو الوظائف للاستخدامات المستقبلية) مكوناتك، لذلك لا يتعين عليهم إعادة- يتم تقديمه عندما لا تكون هناك تغييرات في الحالة. عندما تكون هناك تغييرات في الحالة، تعيد React عرض المكون المعني وأبنائه، وعندما لا تكون هناك تغييرات في الكود الخاص بك، يبقى المكون كما هو مع الاحتفاظ بالذاكرة السابقة والقيمة والحالة في المكون أو الخطاف للمستقبل الاستخدامات؛ وبالتالي تحسين أداء المكونات الخاصة بك. هذا هو بالضبط ما يفعله React Compiler تلقائيًا، دون الحاجة إلى استدعاء أي من الخطافات المذكورة أعلاه يدويًا.

إجراءات النموذج: واحدة من أكبر مزايا استخدام React هي إدارة الحالة وتغييرها، ويحدث هذا غالبًا عندما نستخدم عناصر. تساعدنا النماذج في إنشاء تفاعل المستخدم والتعامل معه بشكل أكثر فعالية.

باستخدام إجراءات النموذج، لا تحتاج إلى معالجات الأحداث مثل onSubmit وonChange لإحداث تغيير مباشر في البيانات، وبدلاً من ذلك يمكننا تمرير دعامة إجراء إلى العنصر

const myFunction = async (formData) => {
  const [name, setName] = useState("")

  const updatedName = await nameChange(formData.get("name"))
     setName(updatedName)
}

باستخدام هذا النهج، لا نحتاج إلى تطبيق useState لتحويل البيانات من خلال event.target.value، بدلاً من ذلك، في myFunction يمكننا ذلك الحصول على البيانات المتحولة من خلال وسيطة.

يعني من عنصر في النموذج الخاص بنا، علينا تعيين سمة اسم. استخدام هذه الطريقة يعني أننا نسمح لـ React بالتعامل مع النموذج نفسه من خلال كائن نموذج React بدلاً من تغيير الحالة يدويًا من خلال معالجات الأحداث.

مكونات الخادم: يسمح React 19 بعرض المكونات على الخادم قبل التجميع، في بيئة منفصلة عن تطبيق العميل أو إعداد خادم SSR. مكونات الخادم ليست هي نفسها SSR (العرض من جانب الخادم)، ولكنها بيئة خادم منفصلة في React Server Components.
تسمح هذه الميزة للمكونات بالعرض المسبق قبل الوقت المحدد، مما يؤدي إلى عرض سريع للمحتوى وتحسين وقت التحميل.

البيانات الوصفية : يسمح React 19 ببيانات وصفية مرنة. يمكن للمطورين إدارة العنوان، الوصف وغيرها من علامات التعريف للمكونات الفردية من خلال مكون DocumentHead. سيساعد ذلك على تحسين SEO (تحسين محركات البحث).

Const AboutUs = () => {
 return (
    
      
      
      // content
    >
  );
}

يحتوي React 19 على سلسلة من الخطافات الجديدة، بعضها جديد والبعض الآخر عبارة عن تحسين للخطافات الموجودة. دعونا نناقشها أدناه.

خطاف الاستخدام () : خطاف الاستخدام هو واجهة برمجة تطبيقات تجريبية يمكن استخدامها مباشرة لقراءة قيمة وعد أو سياق داخل مكون أو خطاف (وهو القيد الوحيد المعروف في الوقت الحالي) ). يعد خطاف الاستخدام متعدد الاستخدامات ويمكن استخدامه أيضًا بدلاً من useEffect، حيث يمكن استخدامه لجلب البيانات غير المتزامنة. وهذا يساعد على
تحقيق كتلة تعليمات برمجية أكثر دقة وموجزة.

تحذير: إنه ليس بديلاً عن useEffect لأنه لا يزال لديه حدوده الخاصة التي سينفذها _useEffect _بلا حدود.

Const AboutUs = () => {
 return (
    
      
      
      // content
    >
  );
}

useActionState(): هذا خطاف جديد يساعد في إدارة تغييرات الحالة. يساعد على إدارة الحالة المعلقة ومعالجة الأخطاء والنهائي تحديثات الدولة. يعمل
useActionState _ مثل _useReduce _in حيث يتلقى معلمتين (2): الوظيفة التي سيتم استدعاؤها عند إرسال النموذج، و_initialState، ويقوم بإرجاع مصفوفة تحتوي على ثلاث (3) قيم: الحالة، والتي هي الآن الحالة الحالية إذا كان هناك طفرة في الحالة، وإجراء جديد (formAction) يمكن تمريره كدعم في مكون النموذج الخاص بنا لاستدعاء إجراء الخادم، و_isPending _الذي يُرجع قيمة _boolean إذا كانت الحالة أم لا تم تقديم النموذج.

Const AboutUs = () => {
 return (
    
      
      
      // content
    >
  );
}

Const AboutUs = () => {
 return (
    
      
      
      // content
    >
  );
}