الحالة (State) باستخدام useState

جزء من دورة React

كل مكوّن كتبته حتى الآن يعطي الخرج نفسه للخصائص (props) نفسها في كل مرة بلا استثناء. هذا مناسب لعنوان أو بطاقة، لكنه ينهار في اللحظة التي تحتاج فيها شيئا يستطيع المستخدم تغييره وهو ينظر إلى الصفحة: عدّاد يزيد عند الضغط، مفتاح يُشعل ويُطفأ، حقل نصي يعرض ما كتبته للتو. المتغير العادي في JavaScript لا يؤدي هذه المهمة.

تخيل كل عملية تصيير للمكوّن صورة فوتوغرافية واحدة، التُقطت في لحظة واحدة، لهيئة المكوّن بحسب خصائصه وحالته في تلك اللحظة. حين تُستدعى دالة المكوّن، تنفّذ JavaScript الكود من أعلى إلى أسفل مرة واحدة بالضبط وتنتج لقطة واحدة: كود JSX الذي تعيده. وكل متغير عادي مُعرَّف داخل تلك الدالة يُخترَع من جديد لتلك اللقطة وحدها ثم يُهمَل بعدها مباشرة. ولهذا لا تستطيع تلك المتغيرات وحدها الاحتفاظ بأي شيء بين عمليات التصيير. ...