- بواسطة x32x01 ||
بعد ما شرحنا مواضيع مهمة في ريأكت زي الـJSX، والـ Components، وأزاى نستخدم الـProps، واتكلمنا عن الـ Hooks واتعمقنا فيها.
فى البوست ده، هنتكلم عن حاجة جديدة ومهمة في React وهي الـConditional Rendering.
- لما تخفي Components ملهاش لازمة أو مش مهمة للمستخدم في الوقت الحالي، بتحافظ على أداء التطبيق وكمان بتوفر في استهلاك الموارد.
- تقدر تتحكم في شكل التطبيق بناء على تفاعل المستخدم معاه. يعني تخلي الواجهة تتغير حسب الأحداث اللي بتحصل زي الضغط على زرار معين أو اختيار من قائمة.
بتقدر تستخدم جملة if العادية في الـJavaScript عشان تقرر تعرض إيه. مثلا لو عندك مكون بيظهر للمستخدم رسالة ترحيب، ممكن تحدد إن الرسالة دي تظهر بس لو المستخدم مسجل دخول.
2. باستخدام الـTernary Operator ? :
دي طريقة أسرع وأبسط من الـif، وبتكون مناسبة للحالات اللي فيها اختيارين بس (حاجة تظهر أو متظهرش). يعني مثلا لو عايز تعرض رسالة معينة أو بديلها بناء على حالة واحدة تقدر تستخدم الطريقة دي.
3. باستخدام &&:
الطريقة دي بتكون مناسبة لما يكون عندك حالة واحدة لو اتحققت هتظهر مكون ولو محصلش مش هيظهر. يعني لو عايز تعرض رسالة "أهلا بك" لو المستخدم سجل دخول، مش هتحتاج إلا الحالة دي بس.
أمثلة على استخدام الـConditional Rendering:
- تغيير الواجهة بناء على حالة المستخدم: لو المستخدم مش مسجل دخول بتعرض له مكون تسجيل الدخول ولو سجل الدخول بتعرض له مكون لوحة التحكم.
- إظهار أو إخفاء عناصر معينة في القوائم زي إنك تخلي عناصر معينة تظهر أو تختفي من القائمة الجانبية بناء على الدور أو الصلاحيات اللي مع المستخدم.
- التحكم في التحميل زي انك تعرضLoading Spinner لحد ما البيانات تجيب من السيرفر.
نصائح عملية لاستخدام الـConditional Rendering:
- بلاش تستخدم Conditional Rendering بشكل زياده عن اللزوم عشان متأثرش على أداء التطبيق.
- لو عندك حالة بسيطة الـTernary Operator هيكون مناسب, لو عندك حالات كتير أو معقدة، استخدم if.
- خلي الكود واضح وسهل الفهم وبلاش تعقد الـConditions، وحاول دايما تخلي الكود بتاعك سهل القراءة.
فى البوست ده، هنتكلم عن حاجة جديدة ومهمة في React وهي الـConditional Rendering.
يعني إيه Conditional Rendering؟
ببساطة الـConditional Rendering هو إنك تتحكم في ظهور واختفاء ال Components على حسب حالات معينة. يعني إيه الكلام ده؟ يعني تقدر تعرض Component أو تخفيه بناء على حالة معينة زي مثلا لو المستخدم سجل دخوله أو لسه ما سجلش.ليه نستخدم الـConditional Rendering؟
- تقدر تخلي التطبيق يظهر للمستخدم الحاجات اللي تهمه بس، بدل ما يعرض كل Components مرة واحدة.- لما تخفي Components ملهاش لازمة أو مش مهمة للمستخدم في الوقت الحالي، بتحافظ على أداء التطبيق وكمان بتوفر في استهلاك الموارد.
- تقدر تتحكم في شكل التطبيق بناء على تفاعل المستخدم معاه. يعني تخلي الواجهة تتغير حسب الأحداث اللي بتحصل زي الضغط على زرار معين أو اختيار من قائمة.
إزاي نستخدم الـ Conditional Rendering؟
1. باستخدام if:بتقدر تستخدم جملة if العادية في الـJavaScript عشان تقرر تعرض إيه. مثلا لو عندك مكون بيظهر للمستخدم رسالة ترحيب، ممكن تحدد إن الرسالة دي تظهر بس لو المستخدم مسجل دخول.
2. باستخدام الـTernary Operator ? :
دي طريقة أسرع وأبسط من الـif، وبتكون مناسبة للحالات اللي فيها اختيارين بس (حاجة تظهر أو متظهرش). يعني مثلا لو عايز تعرض رسالة معينة أو بديلها بناء على حالة واحدة تقدر تستخدم الطريقة دي.
3. باستخدام &&:
الطريقة دي بتكون مناسبة لما يكون عندك حالة واحدة لو اتحققت هتظهر مكون ولو محصلش مش هيظهر. يعني لو عايز تعرض رسالة "أهلا بك" لو المستخدم سجل دخول، مش هتحتاج إلا الحالة دي بس.
أمثلة على استخدام الـConditional Rendering:
- تغيير الواجهة بناء على حالة المستخدم: لو المستخدم مش مسجل دخول بتعرض له مكون تسجيل الدخول ولو سجل الدخول بتعرض له مكون لوحة التحكم.
- إظهار أو إخفاء عناصر معينة في القوائم زي إنك تخلي عناصر معينة تظهر أو تختفي من القائمة الجانبية بناء على الدور أو الصلاحيات اللي مع المستخدم.
- التحكم في التحميل زي انك تعرضLoading Spinner لحد ما البيانات تجيب من السيرفر.
نصائح عملية لاستخدام الـConditional Rendering:
- بلاش تستخدم Conditional Rendering بشكل زياده عن اللزوم عشان متأثرش على أداء التطبيق.
- لو عندك حالة بسيطة الـTernary Operator هيكون مناسب, لو عندك حالات كتير أو معقدة، استخدم if.
- خلي الكود واضح وسهل الفهم وبلاش تعقد الـConditions، وحاول دايما تخلي الكود بتاعك سهل القراءة.