بنية مكوّنات React قابلة للتوسع

مع نمو تطبيقات React من نماذج أولية إلى أنظمة إنتاجية، تصبح معمارية المكوّنات الفارق بين codebase يتوسع بسلاسة وآخر ينهار تحت تعقيده. compound components وdesign tokens ومكتبات tree-shakeable تشكّل مجموعة أدوات حديثة لبناء أنظمة UI مرنة وعالية الأداء وقابلة للصيانة. يستكشف هذا الدليل كل نمط بإرشاد عملي للفرق التي تُطلق تطبيقات React إنتاجية في 2026.

الحجة لصالح Compound Components

compound components نمط حيث مكوّن أب يدير state مشتركًا وcontext بينما مكوّنات أبناء تتولى مسؤوليات render محددة. يُركّب المستخدمون UI بتداخل sub-components مسماة بدل تكوين كل شيء عبر prop interface مسطح. يظهر هذا النمط في design systems ناضجة — tabs وaccordions وmenus وmodals تستفيد من compound composition.

الميزة الرئيسية ergonomics الـ API. قارن مكوّنًا monolithic يُ driven بالـ props ببديل compound:

// Prop-driven — becomes unwieldy as features grow
<Tabs
  items={[
    { label: "Overview", content: <Overview /> },
    { label: "Settings", content: <Settings />, disabled: true },
  ]}
  defaultIndex={0}
  onChange={handleTabChange}
  variant="underline"
/>

// Compound — flexible, readable, extensible
<Tabs defaultValue="overview" onValueChange={handleTabChange}>
  <Tabs.List>
    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
    <Tabs.Trigger value="settings" disabled>Settings</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="overview">
    <Overview />
  </Tabs.Content>
  <Tabs.Content value="settings">
    <Settings />
  </Tabs.Content>
</Tabs>

compound components تتواصل عبر React Context. الأب ينشئ context provider بـ state مشترك — active tab وopen state وselected value — والأبناء يستهلكون context لعرض جزئهم. هذا decoupling يعني إضافة sub-components جديدة دون تعديل API الأب.

تنفيذ Compound Components

ابدأ بتعريف context بواجهة typed. root component يلف children في provider ويقبل configuration props. sub-components تقرأ من context وتعرض conditionally حسب shared state.

• صدّر sub-components كـ static properties على root — Tabs.List وTabs.Trigger.
• validate composition في development برسائل خطأ مفيدة عند استخدام sub-components خارج parent.
• أبقِ context values stable بـ useMemo لمنع re-renders غير ضرورية لكل الأبناء.
• ادعم controlled وuncontrolled modes لأقصى مرونة.

Design Tokens كمصدر حقيقة واحد

design tokens كيانات مسماة تخزّن قرارات تصميم بصرية — ألوان وspacing وtypography وshadows وborder radii — كقيم platform-agnostic. بدل hardcoding #3b82f6 أو 16px في المكوّنات، ترجع tokens دلالية مثل color.action.primary أو spacing.component.md.

هذا indirection يقدم فوائد ملموسة على نطاق واسع:

• الاتساق — كل مكوّن يرجع لنفس قيم tokens، مما يeliminate visual drift.
• Theming — بدّل قيم tokens للتبديل بين light وdark وhigh-contrast themes.
• محاذاة cross-platform — صدّر tokens إلى CSS وJavaScript وiOS وAndroid من مصدر واحد.
• تعاون design-dev — المصممون والمطورون يشاركون vocabulary مشترك.

// tokens.ts — semantic design tokens
export const tokens = {
  color: {
    surface: {
      primary: "var(--color-surface-primary)",
      secondary: "var(--color-surface-secondary)",
    },
    text: {
      primary: "var(--color-text-primary)",
      muted: "var(--color-text-muted)",
    },
    action: {
      primary: "var(--color-action-primary)",
      primaryHover: "var(--color-action-primary-hover)",
    },
  },
  spacing: {
    xs: "0.25rem",
    sm: "0.5rem",
    md: "1rem",
    lg: "1.5rem",
    xl: "2rem",
  },
  radius: {
    sm: "0.25rem",
    md: "0.5rem",
    lg: "0.75rem",
    full: "9999px",
  },
} as const;

عرّف CSS custom properties في global stylesheet وارجع إليها عبر token object في المكوّنات. عند تحديث brand palette، تغيّر القيم في مكان واحد ويتحدث كل مكوّن تلقائيًا.

Tree-Shaking ومكتبات Modular

حجم الحزمة يؤثر مباشرة على أداء التطبيق، خاصة على شبكات الجوال. tree-shaking يeliminate dead code أثناء build، لكن فقط إذا دعمت معمارية المكتبة ذلك. export monolithic يُ re-export كل مكوّن يجبر bundlers على تضمين المكتبة كاملة حتى عند استخدام button واحد.

ابنِ مكتبة المكوّنات لـ tree-shaking optimal:

• صدّر كل مكوّن من module entry point خاص به.
• علّم package كـ side-effect free في package.json.
• تجنّب barrel files تُ re-export كل شيء من index واحد.
• استخدم ESM format لـ bundlers حديثة؛ CJS فقط إذا legacy support مطلوب.
• أبقِ peer dependencies external — React وReact DOM وstyling libraries لا تُ bundled.

// package.json — enable tree-shaking
{
  "name": "@acme/ui",
  "sideEffects": false,
  "exports": {
    "./button": "./dist/button/index.js",
    "./input": "./dist/input/index.js",
    "./modal": "./dist/modal/index.js",
    "./tokens": "./dist/tokens/index.js"
  }
}

// Consumer imports only what they need
import { Button } from "@acme/ui/button";
import { tokens } from "@acme/ui/tokens";

قِس التأثير بأدوات bundle analysis. import مكوّن واحد وتحقق أن production bundle يستبعد modules غير ذات صلة. إذا ظهرت المكتبة كاملة، راجع barrel exports وside-effect declarations.

بنية المجلدات وColocation

البنية التنظيمية تؤثر على سرعة إيجاد المطورين للمكوّنات وتعديلها. colocation — إبقاء الملفات ذات الصلة معًا — يقلل context switching ويجعل المكوّنات self-contained units قابلة للنقل والاختبار والحذف independently.

بنية مجلدات scalable لمكتبة مكوّنات:

• src/components/Button/Button.tsx — تنفيذ المكوّن.
• src/components/Button/Button.test.tsx — unit tests colocated.
• src/components/Button/Button.stories.tsx — Storybook documentation.
• src/components/Button/index.ts — public export surface.
• src/tokens/ — design token definitions مشتركة.
• src/hooks/ — hooks مشتركة عبر مكوّنات متعددة.

تجنّب التنظيم by type (components/ وhooks/ وutils/ at top level لكل feature). بدل ذلك، group by feature domain لمعمارية application-level، وby component لمكتبة مشتركة.

Composition Over Configuration

الخيط الرابط بين compound components وdesign tokens وmodules tree-shakeable فلسفة: favor composition over configuration. المكوّنات يجب أن تكون صغيرة وfocused وcombinable بدل monolithic widgets بعشرات props تتحكم بكل visual variant.

طبّق open-closed principle — مكوّنات open for extension عبر composition وclosed for modification. بدل showIcon prop على button، accept icon كchild أو slot. بدل size prop بخمس enum values، expose CSS custom properties يتجاوزها consumers.

هذا النهج يُنتج component libraries ت aging well. المتطلبات الجديدة تُلبّى بتركيب primitives موجودة بدل تعديل مكوّنات battle-tested والمخاطرة ب regressions عبر النظام.

التوثيق والاعتماد

أنماط المعمارية تُ deliver value فقط عندما يفهمها الفريق ويعتمدها consistently. استثمر في Storybook أو منصة documentation تعرض compound composition وtoken usage وimport patterns. اكتب contribution guidelines تشرح متى تنشئ مكوّنًا جديدًا مقابل extending موجود.

شغّل architecture decision records لقرارات structural مهمة — لماذا compound components على render props، لماذا tokens في CSS custom properties بدل JavaScript theme object. أعضاء الفريق المستقبليون يرثون هذه القرارات ويحتاجون context للحفاظ على consistency.

معمارية React component scalable ليست عن تطبيق كل نمط simultaneously. إنها عن اختيار abstractions المناسبة لحجم فريقك وتعقيد تطبيقك وقيود الأداء. compound components تتعامل مع UI composition مرن، design tokens تفرض visual consistency، وmodules tree-shakeable تُبقي bundles lean — معًا، أساس يدعم النمو من عشرة مكوّنات إلى عشرة آلاف.