React/composition vs inheritance

تمتلك React نموذجًا قويًّا للتركيب (composition) ونُوصي باستخدام التركيب بدلًا من الوراثة (inheritance) لإعادة استخدام الشيفرة بين المُكوِّنات.

سننظر في هذا القسم إلى بعض المشاكل التي بسببها قد يستخدم المُطوِّر الجديد على React الوراثة، وسنرى كيفيّة حلّها باستخدام التركيب.

مفهوم الاحتواء

لا تعرف بعض المُكوِّنات العناصر الأبناء لها مُسبقًا، وهو أمرٌ شائعٌ بشكلٍ خاص بالنسبة لمُكوِّن القائمة الجانبيّة Sidebar أو مربّع الحوار Dialog.

نُوصي بأن تستخدم تلك المُكوِّنات الخاصيّة children لتمرير العناصر بشكلٍ مباشر إلى ناتجها:

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

يُتيح هذا للمُكوِّنات الأخرى بأن تُمرِّر عناصر أبناء لها عن طريق التداخل في JSX:

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        أهلًا
      </h1>
      <p className="Dialog-message">
        شكرًا لك لزيارة موقعنا
      </p>
    </FancyBorder>
  );
}

جرّب المثال على موقع CodePen.

يُمرَّر أي شيء بداخل العنصر <FancyBorder> إلى المُكوِّن FancyBorder عبر الخاصيّة children. وبما أنّ المُكوِّن FancyBorder يُصيِّر {props.children} بداخل عنصر <div>، فستظهر العناصر المُمرَّرة بداخل الناتج النهائي.

أحيانًا قد تحتاج إلى تمرير عناصر مُتعدِّدة. في تلك الحالات يجب أن تفعل ذلك بطريقتك الخاصّة بدلًا من استخدام children، كما يلي:

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

جرّب المثال على موقع CodePen.

إنّ عناصر React مثل ‎<Contacts />‎ و ‎<Chat />‎ هي مُجرّد كائنات، لذلك بإمكانك تمريرها كخاصيّات props مثل أي بيانات أخرى. قد يُذكِّرك ذلك بمفهوم المداخل (slots) في مكتبات أخرى، ولكن لا توجد حدود لما يُمكِنك تمريره كخاصيّات props في React.

التخصيص

أحيانًا نُفكّر بالمُكوِّنات على أنّها حالات خاصّة لمُكوِّنات أخرى، فمثلًا قد نقول أنّ مُكوِّن مربّع الترحيب WelcomeDialog هو حالة خاصّة من مربّع الحوار Dialog.

يُمكِن تحقيق ذلك في React عن طريق استخدام التركيب (composition) حيث يُصيِّر المُكوِّن الأكثر خصوصيّة المُكوِّن الأكثر عموميّة ويُعد له الخاصيّات:

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="أهلًا"
      message="شكرًا لك لزيارة موقعنا" />

  );
}

جرّب المثال على موقع CodePen. يعمل التركيب بشكلٍ مُماثل للمُكوِّنات المُعرَّفة كأصناف:

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="برنامج تسجيل الدخول"
              message="كيف يمكننا الرجوع إليك؟">
        <input value={this.state.login}
               onChange={this.handleChange} />

        <button onClick={this.handleSignUp}>
          سجلّني في الموقع!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`أهلًا بك, ${this.state.login}!`);
  }
}

جرّب المثال على موقع CodePen.

إذًا ماذا عن الوراثة؟

نستخدم في فيسبوك آلاف مُكوِّنات React، ولم نجد أي حالة نُفضِّل فيها استخدام الوراثة.

يمنحك التركيب والخاصيّات props المرونة التي تحتاجها لتخصيص مظهر وسلوك المُكوِّنات بطريقة مضبوطة وآمنة. تذكّر أنّ المُكوّنات قد تستقبل خاصيّات من محتوى مُتعدِّد، مثل القيم المبدئية، وعناصر React، والدوال.

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

مصادر

• صفحة الفرق بين التركيب والوراثة في توثيق React الرسمي.