Unlocking Flexibility: Compound & Render Props in React

في الجزء الأول من المقال رابط الجزء الاول من المقال هنا اكتشفنا نمط الـ Compound الذي يُمكننا من إنشاء مكونات مرنة يُمكن تخصيصها بسهولة وفقًا لاحتياجاتنا المُحددة. في هذا الجزء سنستخدم نمط يُسمى بـ Render Props و الذي سيسمح بتبسيط الشيفرة البرمجية من ناحية الاستخدام و التي ستُعطينا تجربة تخصيص و وصول إلى القيم التي تتشاركها أجزاء المُكون Progress Bar في غاية البساطة.

التحسينات المُقترحة على الكود

في النسخة الحالية من الكود، يتم كتابة طريقة لحساب النسبة، وكذلك إنشاء متغيرات حالة state variables لتخزين قيم minValue و maxValue.

غالبًا ما تكون قيمة value هي المُتغير الوحيد في المكون، وعادة ما تكون قيم minValue و maxValue ثابتة عند 0 و 100. حتى طريقة حساب النسبة percentage في غالب الأوقات ثابتة.

لماذا نجعل المستخدم مسؤولًا عن هذه القيم؟ بينما يمكننا تسهيل الاستخدام عن طريق اضافتهم و جعلهم من مسؤوليات المُكون بدلا من المُستخدم.

1 - ادارة القيم بشكل داخلي

في الكود الحالي، يُطلب من المستخدم تحديد قيم minValue و maxValue بالإضافة إلى value. لنجعل الاستخدام أكثر سهولة، دعونا ندير هذه القيم بشكل داخلي ونقدم قيم افتراضية لـ minValue و maxValue مع امكانية تخصيصهم و بالتالي سنستطيع استخدام المُكون كالتالي:

<ProgressBar value={18} aria-label="Progress bar">
  {/* ... */}
</ProgressBar>

<ProgressBar value={18} aria-label="Progress bar" minValue={0} maxValue={10}>
  {/* ... */}
</ProgressBar>

2 - حساب النسبة داخليا

تسهيلًا على المستخدم، سنقوم بحساب النسبة المئوية داخليًا دون الحاجة لكتابة الكود الخاص بها و أيضا بدون تمريها كـ Prop للمُكون ProgressBarIndicator.

<ProgressBarTrack>
	<ProgressBarIndicator /> {/* OLD CODE: <ProgressBarIndicator percentage={percentage} /> */}
</ProgressBarTrack>

3 - الوصول للقيم الداخلية المُشتركة في باقي المُكونات

باستخدام نمط الـ Render Props، سيصبح بإمكان المستخدم الوصول بسهولة إلى القيم الداخلية المشتركة في جميع أجزاء المُكونات و هذا سيُمكّن من تخصيص عرض القيم واستخدامها بأي شكل يُناسب الاحتياجات.

<ProgressBar
  value={7}
  aria-label="Progress bar"
>
  <ProgressBarLabel label="Progress">
    {({ label, percentage }) => (
      <div
        className={css({
          display: "flex",
          justifyContent: "space-between",
        })}
      >
        <span>{label}</span>
        <span>
          {percentage ? <>{percentage.toFixed(0)}%</> : <>Loading...</>}
        </span>
      </div>
    )}
  </ProgressBarLabel>
  <ProgressBarTrack>
    <ProgressBarIndicator />
  </ProgressBarTrack>
</ProgressBar>