ReactJS useState Hook: دليل المبتدئين

مقدمة

ReactJS، مكتبة JavaScript شائعة لبناء واجهات المستخدم، تقدم خطافات لتبسيط وتعزيز منطق المكونات. أحد الخطافات الأكثر استخدامًا في React هو الخطاف useState، الذي يدير حالة المكون. يمكن أن يساعدك فهم كيفية عمل ذلك في إطلاق العنان للإمكانات الكاملة لـ React.

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

ما هي السنانير؟

خطاف في رد الفعل

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

يوفر React العديد من الخطافات، مثل:

• useState – لإدارة الحالة.
• useEffect – للآثار الجانبية مثل جلب البيانات.
• useContext – لإدارة السياق داخل التطبيق الخاص بك.

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

كيفية تهيئة useState

التهيئة الأساسية

يعد تهيئة useState في مكون وظيفي أمرًا بسيطًا. يبدأ الأمر باستيراد الخطاف من React واستدعائه داخل المكون الخاص بك. يبدو بناء الجملة كما يلي:

import React, { useState } from 'react';

function Counter() {
  // Declare state variable and its updater function
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

انفصال:

• يقوم useState(0) بتهيئة الحالة بقيمة أولية 0.
• العد هو متغير الحالة، وsetCount هو الوظيفة المستخدمة لتحديث هذه الحالة.
• في كل مرة يتم النقر على الزر، يتم تحديث الحالة، ويعاد عرض المكون بالقيمة الجديدة.

كيفية قراءة الدولة

الوصول إلى الوضع الحالي

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

دعونا نعدل مثالنا السابق لإظهار كيف يمكننا الوصول إلى الحالة:

Current count: {count}

يصل هذا الرمز إلى حالة العد ويعرضها ديناميكيًا.

كيفية تحديث الدولة

استخدام وظيفة ضبط الحالة

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

إليك مثال لكيفية زيادة العداد وإنقاصه:

 setCount(count   1)}>Increment
 setCount(count - 1)}>Decrement

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

ما الذي يمكن أن تحتفظ به الدولة؟

أنواع مختلفة من القيم

يمكن للحالة في React الاحتفاظ بمجموعة متنوعة من أنواع البيانات، بما في ذلك:

• الأنواع الأولية مثل الأرقام والسلاسل والقيم المنطقية.
• الكائنات و المصفوفات.
• قيم فارغة وقيم غير محددة.

دعونا نلقي نظرة على أمثلة على ذلك:

عقد سلسلة في الحالة:

const [name, setName] = useState("John");

عقد صفيف في الدولة:

const [items, setItems] = useState([1, 2, 3]);

عقد كائن في الحالة:

const [user, setUser] = useState({ name: "John", age: 30 });

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

تحديث الكائنات والمصفوفات في الحالة

تحديثات غير قابلة للتغيير

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

مثال: تحديث كائن

const [user, setUser] = useState({ name: "John", age: 30 });

function updateName() {
  setUser(prevState => ({
    ...prevState,
    name: "Doe"
  }));
}

في هذا المثال:

• ننشر الحالة الحالية (prevState) إلى كائن جديد باستخدام ...prevState.
• ثم نقوم بتعديل خاصية الاسم دون تغيير كائن المستخدم الأصلي.

مثال: تحديث مصفوفة

const [items, setItems] = useState([1, 2, 3]);

function addItem() {
  setItems(prevItems => [...prevItems, 4]);
}

هنا:

• ننشر المصفوفة السابقة (العناصر السابقة) ونلحق العنصر الجديد (4)، وننشئ مصفوفة جديدة.

قسم الأسئلة الشائعة

لماذا نستخدم useState بدلاً من الحالة المستندة إلى الفصل؟

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

هل يمكن لـ useState الاحتفاظ بأنواع بيانات متعددة؟

نعم، يمكن أن يحتوي useState على سلاسل، وأرقام، ومصفوفات، وكائنات، وقيم منطقية، وحتى قيم فارغة أو غير محددة.

هل تحديث الحالة غير متزامن؟

نعم، يتم تحديث دفعات React إلى الحالة، وقد لا تنعكس التغييرات فورًا بعد استدعاء وظيفة الضبط.

كيف يمكنني تحديث الحالات المعقدة مثل الكائنات أو المصفوفات؟

لتجنب تغيير الحالة الأصلية، قم دائمًا بإنشاء نسخة من الكائن أو المصفوفة، ثم قم بتحديثها بشكل ثابت باستخدام عامل الانتشار (...).

خاتمة

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

الآن بعد أن انتقلت من الصفر إلى البطل باستخدام useState، حاول دمجه في مشاريعك وشاهد سحر React أثناء العمل!