ابدأ مع React


الدرس: قم بإعداد الحالة المحلية باستخدام useState


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

ولكن كيف نسمح لمستخدمينا بالتفاعل مع هذه البيانات؟ هل يمكنهم العمل على تطبيقنا ، وإدخال المعلومات ، وبالتالي تعديل البيانات المعروضة ، وهل يمكننا الاحتفاظ بالبيانات التي يدخلونها؟

يمكنك أن تتخيله لأنه موضوع هذا الفصل: مع الحالة (state)  !

لقد رأينا الحالة في الجزء السابق ، ولكن حان الوقت الآن للتعمق في الموضوع. 👩‍🚀

اكتشف STATEFUL COMPONENTS


React
الحالة المحلية موجودة داخل أحد المكونات وتحافظ على قيمتها ، حتى لو أعاد التطبيق تصييرها (re-render) . يمكننا بعد ذلك أن نقول إنها ذات حالة(stateful) . هل تتذكر مكون سلة التسوق الذي أنشأناه في الجزء السابق؟

لذا نعود اذا إلى   Cart.js  . في الوقت الحالي ، سنسمح فقط للمستخدمين بإضافة monsteras إلى سلة التسوق الخاصة بهم ، لذلك دعونا نحذف كل شيء آخر.

لنبدأ بالاستيراد useState   بـ:


import { useState } from 'react'
 
بعد ذلك ، يمكننا إنشاء حالة ( state) cart . مع useState ، يجب أن نعلن في نفس الوقت عن وظيفة لتحديث هذه الحالة ( updateCart ) ، وإسناد قيمة أولية لها ، والتي ستكون هنا 0 :

const [cart, updateCart] = useState(0)
 
سأتمكن الآن من إضافة زر في سلّة التسوق الخاصة بي والذي يسمح بإضافة monstera بالوظيفة التي أعلنا عنها للتو. مما يعطيني في Cart.js :

function Cart() {
    const monsteraPrice = 8
    const [cart, updateCart] = useState(0)

    return (
        <div className='lmj-cart'>
            <h2>Panier</h2>
            <div>
                Monstera : {monsteraPrice}€
                <button onClick={() => updateCart(cart + 1)}>
                    Ajouter
                </button>
            </div>
            <h3>Total : {monsteraPrice * cart}€</h3>
        </div>
    )
}
 
الآن ، إذا نقرنا على "إضافة" ، يتم تعديل المبلغ الإجمالي وفقًا لعدد العناصر المحفوظة في حالة السلة.

أهلا وسهلا بك إلى سحر الحالة (state)! 🧙♀️ عنصر Cart لدينا أصبح الآن عنصرا stateful ، وذلك بفضل   useState  .

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

لكن بالإضافة إلى ذلك ،   useState  ما هو؟

تعرف على useState



useState    هو خطاف(hook) يسمح لك بإضافة الحالة المحلية لـ React إلى المكونات الوظيفية.

خطاف(hook) ؟ ماذا يعني ؟

Hook هو وظيفة تسمح لك "  بالاتصال "  (to hook up) بمميزات React   . يمكنك أيضًا استيرادها مباشرة من React . بعد useState سنرى Hook أخرى في هذا الجزء:     . هناك عوامل أخرى لن نغطيها في هذه الدورة ، ولكن في المرحلة التالية على React !useEffect

لقد استخدمناه من قبل ، لكنني أعطيها لك هنا:


const [cart, updateCart] = useState(0)
 
دعنا نتحرى كيف تم بناء سلة التسوق الخاصة بنا. 🧐

افهم الخطافات []


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

useState تعيد    لنا زوجًا من القيم في مصفوفة مكونة من عنصرين ، والتي نسترجعها في المتغيرات   cart   وفي   updateCart   مثالنا. العنصر الأول هو القيمة الحالية ، والثاني هو وظيفة لتغييرها.

بدون التفكيك ، كان بإمكاننا أيضًا القيام بما يلي:


const cartState = useState(0)
const cart = cartState[0]
const updateCart = cartState[1]
 
في المصفوفة التي نفككها ، يمكننا تسمية متغيراتنا بحرية. ربما أفعل ذلك جيدًا:

const [coucou, cavabien] = useState(0)
 

تهيئة الحالة (state)


دعونا ننظر الآن في المعلمة التي تم تمريرها بين قوسين ل useState      useState(0) : . 

كما قلت لك، فإنه يتوافق مع الحالة الأولية للحالة ( state) لدينا  . يمكن أن تكون هذه الحالة الأولية رقمًا مثل هذه الحالة ، أو سلسلة ، أو منطقية ، أو مصفوفة ، أو حتى كائنًا له عدة خصائص.

من المهم تحديد قيمة أولية في الحالةالتي لديك. وإلا ، فسيتم تعريفها افتراضيًا ، وهذا سلوك غير مرغوب فيه: فكلما كنت أكثر وضوحًا ، كان تطبيقك أفضل! 

إنشاء عديد متغيرات الحالة


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

ولكن يوجد بالفعل واحد ، كيف تصنع آخر؟ 😱

لا تنذعر. هناك عدة طرق للقيام بذلك. لكن الأسهل هو استخدام العديد من متغيرات الحالة.

في حالتنا ، يكفي إنشاء متغير   isOpen   مرتبط بالدالة  setIsOpen ، وتهيئته على خطأ:


const [isOpen, setIsOpen] = useState(true)
 
لكي نتمكن من التفاعل ، نقوم بعد ذلك بإنشاء:
  • زر لفتح السلة التي ستكون المكون الوحيد الذي تعيده سلة التسوق إذا كانت السلة مغلقة ؛
  • و زر لإغلاق السلة. 
هذا يعطينا الكود التالي:

function Cart() {
    const monsteraPrice = 8
    const [cart, updateCart] = useState(0)
    const [isOpen, setIsOpen] = useState(false)
 
    return isOpen ? (
        <div className='lmj-cart'>
            <button onClick={() => setIsOpen(false)}>Fermer</button>
            <h2>Panier</h2>
            <div>
                Monstera : {monsteraPrice}€
                <button onClick={() => updateCart(cart + 1)}>
                    Ajouter
                </button>
            </div>
            <h3>Total : {monsteraPrice * cart}€</h3>
        </div>
    ) : (
        <button onClick={() => setIsOpen(true)}>Ouvrir le Panier</button>
    )
}
 
إضافة القليل من التصميم ، لذلك لدي:
React
هل ترى ؟ لا تقلق بشأن إنشاء العديد من متغيرات الحالة في نفس المكون! اذا فالأمر يعود اليك! 💪

ممارسة


React
كالعادة ، ستجد قاعدة الكود لبدء التمرين في فرع P3C1-Begin  .

لهذا الفصل، سوف تحتاج إلى إنشاء زر "أفرغ السلة" لاعادة تعيين الحالة (state)     لـcart

يمكن العثور على  الحل في P3C1-Solution  .

باختصار


  • الحالة المحلية موجودة داخل أحد المكونات: يمكن إعادة تصيير(render) هذا المكون عدة مرات كما تريد ، ولكن سيتم الاحتفاظ بالبيانات.
  • Hook هي وظيفة تسمح لك " وصل  " إلى رد فعل الميزات.
  • useState    هو خطاف يسمح لك بإضافة حالة React المحلية إلى وظائف المكوِّن:
    • تقوم بإرجاع زوج من القيم في مصفوفة من قيمتين ، يتم استردادها من المتغيرات الموجودة بين قوسين.
    • يجب عليك تهيئة حالتك باستخدام معلمة تم تمريرها بين قوسين - رقم أو سلسلة أو منطقية أو مصفوفة أو حتى كائن.
في الفصل التالي ، سوف ندفع مفهوم الحالة هذا إلى أبعد من ذلك لأننا سوف نتعلم كيفية مشاركة الحالة بين عدة مكونات. 💪 ستكون هذه فرصة لتحسين سلتنا بحيث يتم تحديثها وفقًا لقائمة النباتات. أكثر واقعية ، أليس كذلك؟ لذلك اراك على الفور!