React.js للمبتدئين - شرح الدعائم والحالة

React.js هي واحدة من مكتبات JavaScript الأكثر استخدامًا والتي يجب أن يعرفها كل مطور للواجهة الأمامية. يعد فهم الدعائم والحالة والاختلافات بينهما خطوة كبيرة نحو تعلم React.

في منشور المدونة هذا ، سأشرح ما هي الدعائم والحالة ، وسأوضح أيضًا بعض الأسئلة الأكثر شيوعًا عنها:

  • ما هي الدعائم؟
  • كيف تمرر البيانات مع الدعائم؟
  • ما هي الدولة؟
  • كيف تقوم بتحديث حالة المكون؟
  • ماذا يحدث عندما تتغير الحالة؟
  • هل يمكنني استخدام الحالة في كل مكون؟
  • ما الفرق بين الدعائم والدولة؟
إذا كنت مبتدئًا تمامًا في React ، فلدي سلسلة دروس حول React للمبتدئين.

ما هي الدعائم؟

تعتبر Props اختصارًا للخصائص ويتم استخدامها لتمرير البيانات بين مكونات React. تدفق بيانات React بين المكونات أحادي الاتجاه (من الأصل إلى الطفل فقط).

كيف تمرر البيانات مع الدعائم؟

فيما يلي مثال على كيفية تمرير البيانات باستخدام الخاصيات:

class ParentComponent extends Component { render() { return (  ); } } const ChildComponent = (props) => { return 

{props.name}

; };

أولاً ، نحتاج إلى تعريف / الحصول على بعض البيانات من المكون الرئيسي وتعيينها إلى سمة "الخاصية" الخاصة بالمكون الفرعي.

"الاسم" هو خاصية محددة هنا وتحتوي على بيانات نصية. بعد ذلك يمكننا تمرير البيانات باستخدام الخاصيات كما نعطي وسيطة للدالة:

const ChildComponent = (props) => { // statements };

وأخيرًا ، نستخدم الترميز النقطي للوصول إلى بيانات الخاصية وتقديمها:

return 

{props.name}

;

يمكنك أيضًا مشاهدة الفيديو الخاص بي لمعرفة كيفية استخدام الدعائم:

ما هي الدولة؟

تمتلك React كائنًا خاصًا مدمجًا آخر يسمى الحالة ، والذي يسمح للمكونات بإنشاء وإدارة بياناتها الخاصة. لذلك على عكس الخاصيات ، لا يمكن للمكونات تمرير البيانات بالحالة ، لكن يمكنها إنشاءها وإدارتها داخليًا.

فيما يلي مثال يوضح كيفية استخدام الحالة:

class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( 

{this.state.id}

{this.state.name}

); } }

كيف تقوم بتحديث حالة المكون؟

لا يجب تعديل الحالة بشكل مباشر ، ولكن يمكن تعديلها بطريقة خاصة تسمى setState( ).

this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });

ماذا يحدث عندما تتغير الحالة؟

حسنًا ، لماذا يجب أن نستخدم setState( )؟ لماذا نحتاج حتى إلى كائن الدولة نفسه؟ إذا كنت تطرح هذه الأسئلة ، فلا تقلق - ستفهم الحالة قريبًا :) دعني أجيب.

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

لذلك عندما تتغير الحالة ، يتم إبلاغ React وتعيد عرض DOM على الفور - ليس عنصر DOM بأكمله ، ولكن فقط المكون مع الحالة المحدّثة. هذا هو أحد أسباب سرعة React.

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

باختصار ، هناك نقطتان مهمتان يجب الانتباه إليهما عند استخدام الحالة:

  • لا ينبغي تعديل الحالة مباشرة - setState( )يجب استخدام
  • تؤثر الحالة على أداء تطبيقك ، وبالتالي لا ينبغي استخدامها دون داع

هل يمكنني استخدام الحالة في كل مكون؟

سؤال مهم آخر قد تطرحه حول الولاية هو أين يمكننا استخدامها بالضبط. في الأيام الأولى ، لا يمكن استخدام الحالة إلا في مكونات الفصل ، وليس في المكونات الوظيفية.

لهذا السبب عُرفت المكونات الوظيفية أيضًا بالمكونات عديمة الحالة. ومع ذلك ، بعد إدخال خطافات React ، يمكن الآن استخدام الحالة في كلٍّ من الصنف والمكونات الوظيفية.

إذا كان مشروعك لا يستخدم خطافات React ، فيمكنك فقط استخدام الحالة في مكونات الصنف.

ما الفرق بين الدعائم والدولة؟

أخيرًا ، دعنا نلخص ونرى الاختلافات الرئيسية بين props و state:

  • تتلقى المكونات البيانات من الخارج باستخدام الدعائم ، بينما يمكنها إنشاء وإدارة بياناتها الخاصة مع الحالة
  • تُستخدم الدعائم لتمرير البيانات ، بينما الحالة لإدارة البيانات
  • البيانات من props للقراءة فقط ، ولا يمكن تعديلها بواسطة مكون يستقبلها من الخارج
  • يمكن تعديل بيانات الحالة من خلال المكون الخاص بها ، ولكنها خاصة (لا يمكن الوصول إليها من الخارج)
  • لا يمكن تمرير الدعائم إلا من المكون الرئيسي إلى الطفل (تدفق أحادي الاتجاه)
  • يجب أن يحدث تعديل الحالة مع setState ( )الطريقة

React.js هي واحدة من مكتبات JavaScript الأكثر استخدامًا اليوم والتي يجب أن يعرفها كل مطور واجهة.

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

إذا كنت تريد معرفة المزيد عن تطوير الويب ، فلا تتردد في متابعتي على Youtube !

شكرا لقرائتك!