مقدمة إلى React ، الجزء 1

نشرت: 2020-07-02

لقد تحدثنا بالفعل في هذه المدونة عن حزمة التطوير الجديدة لـ WordPress والثورة التي تأتي معها ، سواء بالنسبة للمنصة نفسها أو للمطورين الذين يضطرون الآن إلى تعلم أشياء جديدة. منذ وقت ليس ببعيد ، على سبيل المثال ، قمت بنشر منشور يشرح كيفية استخدام حزمة @wordpress/scripts لتوسيع Gutenberg وإضافة زر إلى واجهة المستخدم الخاصة به. كمؤلف ، أحب كتابة البرامج التعليمية لأنني أستطيع مشاركة شيء أعرفه جيدًا وأشعر أنه يمكننا التعلم جميعًا معًا.

لسوء الحظ ، أعتقد أن البرامج التعليمية تخفي مشكلة كبيرة: يتابعها الكثير منكم بشكل أعمى دون فهم ما يحدث حقًا ، حتى لو حصلت على النتيجة الصحيحة في النهاية. لكن معظم البرامج التعليمية تفتقر إلى "لحظة آها" ، لحظة البصيرة والفهم حيث ينقر كل شيء في رأسك وتفهم سبب كون الأشياء على ما هي عليه.

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

البرمجة الوظيفية

قبل الحديث عن React ، أعتقد أن الأمر يستحق قضاء بضع دقائق في الحديث عن البرمجة الوظيفية ، لأن العديد من الأطر التي استخدمناها اليوم تعتمد على مبادئها. و React (جنبًا إلى جنب مع Redux) ليست استثناءً.

البرمجة الوظيفية هي نموذج برمجة يتم فيه بناء البرامج من خلال تطبيق الوظائف وتأليفها. قد تعتقد ، حسنًا ، أن "البرمجة" كانت دائمًا تتعلق ببناء الوظائف وتشغيلها ، أليس كذلك؟ ليس تماما. تحمل معي.

ضع في اعتبارك ، على سبيل المثال ، البرمجة الشيئية. في OOP ، يتم إنشاء البرامج عن طريق إنشاء وتكوين كائنات ، والتي يمكن أن تحتوي على بيانات ، في شكل سمات أو حقول ، ورمز ، في شكل طرق أو إجراءات. يرى؟ لا وظائف ، ولكن كائنات.

إذن ما الذي يجعل البرمجة الوظيفية مميزة؟ حسنًا ، هناك العديد من الجوانب التي تميز البرمجة الوظيفية: الوظائف البحتة ، والشفافية المرجعية ، والثبات ، والوظائف كمواطنين من الدرجة الأولى ، ووظائف من الدرجة الأولى ، وما إلى ذلك ، وأوصيك بدراستها بنفسك (أو ، إذا كنت تريدني) إلى ، يمكننا التحدث عنها في المشاركات المستقبلية). ولكن ، لإبقاء هذا المنشور قصيرًا ، سنركز اليوم ببساطة على ميزة واحدة ...

وظائف خالصة

من الأشياء التي تجعل البرمجة الوظيفية مختلفة عن نماذج البرمجة الأخرى هي كيفية تعريفها للوظائف وتعمل معها. في FP ، تكون الوظائف نقية ، مما يعني أنها تستوفي الشرطين التاليين:

  1. دائمًا ما ينتج نفس النتيجة عند إعطاء نفس الحجج
  2. ليس له آثار جانبية

على سبيل المثال ، هذه ليست وظيفة خالصة:

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

لان لها عدة اعراض جانبية. وهي تقوم بتعديل متغير عام (التأثير الجانبي 1) وإخراج بعض النص إلى وحدة التحكم (التأثير الجانبي 2).

وظيفة نجسة أخرى هي ما يلي:

 function createElement( name ) { const id = Math.random(); return { id, name }; }

لأنه ، كما ترى ، لا ينتج عنه دائمًا نفس النتيجة. في كل مرة يستدعي المرء createElement باسم معين ، تكون النتيجة التي يحصلون عليها مختلفة. بعد كل شيء ، يتم إنشاء سمة id من خلال Math.random ...

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

المكونات في React

ما الذي يجب أن تفعله الوظائف البحتة والبرمجة الوظيفية؟ حسنًا ، دعنا نرى ما إذا كان بإمكاننا اشتقاق علاقتهم ...

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

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

بسيط جدًا وحتى لا يحتاج إلى شرح ، أليس كذلك؟

لكن انتظر ثانية! هذا لا يبدو على الإطلاق كـ "وظيفة خالصة". في الواقع ، هذه فئة يتم تنفيذها باستخدام البرمجة الشيئية.

صورة متحركة لامرأة تصنع كشرًا غريبًا

نعم ، أنت على حق تمامًا. هذا لا يبدو جيدًا ... هل أهدرنا وقتنا في الحديث عن البرمجة الوظيفية؟

ألق نظرة على المكون السابق مرة أخرى. كيف تبدو؟ ماذا تعمل، أو ماذا تفعل؟ حسنًا ، إنها فئة ذات طريقة واحدة ( render ) تقوم بإنشاء بعض HTML لعرض قائمة التسوق. قائمة التسوق هذه هي نفسها دائمًا (duh ، إنه مثال بسيط) ، لكنها تحتوي على جزء متغير واحد: عنوانها ، حيث يبدو أن الفصل يستخدم خاصية داخلية this.props.name .

لذلك ، إذا لم نكن نعرف أي شيء عن React حتى الآن وننظر فقط إلى الكود ونحاول استنتاج ما يفعله ، فإننا نرى ما يلي:

  1. يمكن أن يتلقى المكون "اسمًا". لا نعرف بالضبط كيف حصل على هذا الاسم ، لكننا نعرف أنه كذلك. بعد كل شيء ، يعد this.props.name دليلًا جيدًا.
  2. تنتج طريقة التقديم بعض HTML render قائمة (ثابتة) من "عناصر التسوق": Instagram و WhatsApp و Oculus .
  3. HTML الناتج ليس ثابتًا بنسبة 100٪ ؛ يستخدم "اسمًا" يمكن أن يختلف بناءً على قيمة الخاصية.

ترى أين أنا ذاهب؟

وظائف المكونات في رد الفعل

لقد وصفنا للتو وظيفة نقية! لدينا مكون يأخذ قيمة ( name ) وينتج مخرجات محددة جيدًا (HTML). هل هذا يعني أنه يمكننا الابتعاد عن OOP وتنفيذ المكون السابق كوظيفة؟

صورة متحركة تظهر رجلاً يشك في ما يفكر فيه

بالتأكيد! يمكن إعادة كتابة الفئة شديدة التعقيد التي رأيناها للتو كوظيفة نقية أبسط وأسهل في الفهم تتلقى props وترجع HTML:

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

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

وهذا بالضبط هو الدرس الأول الذي يجب أن تتعلمه: مكون React الخاص بك هو وظيفة خالصة : props in و HTML out. يجب ألا ينفذ المكون وظائف غير متزامنة لجلب البيانات (لأن تلك من الآثار الجانبية). لا يمكن للمكون تعديل الخصائص التي يتلقاها إما (الثبات).

إذن ، مرة أخرى: يأخذ المكون بعض الخاصيات وينتج مخرجات HTML. فترة.

لكن انتظر ، إذا كان المكون بهذه البساطة ، كيف يمكننا فعل أي شيء مفيد معهم؟ حسنًا ، ترقبوا ، لأننا سنتحدث عن هذا في المنشور التالي!

صورة مميزة بواسطة Josiah Weiss على Unsplash.