تحليل مفصل للميزات الجديدة في React 16+ ، الجزء 1: معلومات عامة

نقدم لكم اليوم الجزء الأول من ترجمة هذه المادة الرائعة. إنه مكرس لتحليل مفصل لميزات React الجديدة التي ظهرت في هذه المكتبة منذ الإصدار 16. وقد شارك مؤلف هذه المادة في البرمجة لمدة 5 سنوات. في الماضي ، كان مصممًا وجرب نفسه كرسام. قام بتضمين كاريكاتير في المقال ، والذي في رأيه سيساعد القراء على فهم ما يجري مناقشته بشكل أفضل.
صورة
في الأصل ، هذه المقالة بعنوان "إعادة تقديم React: كل تحديث React منذ الغموض الذي يكتنف v16." يلمح العنوان إلى أن القارئ ، ربما يكون على دراية React بالفعل ، مدعوًا للتعرف على هذه المكتبة مرة أخرى. ستساعده إعادة مقدمة React على تنظيم ما يعرفه بالفعل واكتشاف شيء جديد.

كيف تقرأ هذه المواد؟


قبل قراءة هذا المقال ، يمكنك تنزيل الكتاب الإلكتروني ، والذي يتم توزيعه مجانًا. إنه يمثل نفس المادة المصممة كملف PDF مستقل أو Epub أو Mobi-file. يوفر الكتاب أمثلة التعليمات البرمجية مع تسليط الضوء على بناء الجملة. ربما سيكون من الأنسب لك قراءة المواد والعمل من خلال الكود بالتوازي ، بناءً على الكتاب. بالإضافة إلى ذلك ، يوصى باستخدام هذا المستودع. يمكنك العثور على رمز الأمثلة التي تمت مناقشتها هنا.

لمن ولماذا كانت هذه المادة مكتوبة؟


كتبت أول تطبيق React منذ حوالي 4 سنوات. منذ ذلك الحين ، لم تتغير المبادئ الأساسية لرياكت. أمامنا هو نفس الرمز التعريفي وجميع المكونات نفسها. كل هذا جيد ، لكن الطريقة التي تتم بها كتابة تطبيقات React الحديثة تختلف عما كانت عليه من قبل. على مر السنين ، ظهرت الكثير من الأشياء الجديدة في React ، وتمت إزالة بعض هذه المكتبة.

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

حتى أنا مبرمج متمرس ، وأحيانًا أضيع ، إذا لزم الأمر ، أن أنسى شيئًا قديمًا وأن أتعلم شيئًا جديدًا بدلاً من ذلك. قد يبدو هذا صعباً مثل تعلم مفهوم جديد تمامًا.

إذا كنت تشعر أيضًا بشيء من هذا القبيل ، آمل أن يساعد عملي في وضع كل شيء في مكانه.

يمكن قول الشيء نفسه عن أولئك الذين بدأوا لتعلم React.

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

في الواقع ، سنحلل بالتفصيل كل ما هو جديد ظهر في React 16+.

ما الجديد في React 16+؟


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

  1. أساليب دورة حياة المكون الجديد.
  2. إدارة حالة مبسطة باستخدام API Context.
  3. الخاصية contextType وميزات API Context.
  4. تطبيق المحلل: الرسوم البيانية ، تحليل التفاعل.
  5. تحميل كسول للمواد باستخدام React.lazy والتشويق.
  6. إصدار وظيفي من مكونات تستند إلى PureComponent تم إنشاؤها باستخدام React.memo.
  7. تبسيط تطبيقات React باستخدام السنانير.
  8. أنماط تصميم تطبيق React المستندة إلى الخطاف المتقدمة.

يتم تقديم كل عنصر في هذه القائمة كقسم كبير منفصل. يركز القسم الأول على تقنيات دورة حياة المكونات الجديدة.

أعزائي القراء! نحن الآن نفكر فيما إذا كنا سنترجم استمرار هذه المادة. إذا كان موضوع React-development قريبًا منك ، فنحن ندعوك للتصويت والتعليق.

Source: https://habr.com/ru/post/ar452568/


All Articles