React/higher order components

إنّ المكوّنات ذات الترتيب الأعلى (Higher-Order Components - React واختصارًا HOC) هي تقنية متقدمة في React لإعادة استخدام منطق المكونات. وهي ليست جزءًا من واجهة برمجة تطبيقات React API، بل هي نمط ينبثق عن طبيعة React التركيبية.

باختصار يكون المكوّن ذو الترتيب الأعلى عبارة عن دالة تأخذ مكوّنًا وتُعيد مُكوّنًا جديدًا:

const EnhancedComponent = higherOrderComponent(WrappedComponent);

وفيما يُحوّل المكوّن الخاصيّات إلى واجهة مستخدم، يُحوّل المكوّن ذو الترتيب الأعلى مكوّنًا إلى مكوّن آخر.

تكون المكوّنات ذات الترتيب الأعلى شائعة في مكتبات React المُقدَّمة من طرف ثالث، مثل مكتبة connect الخاصة بـ Redux و مكتبة createFragmentContainer الخاصّة بـ Relay.

سنناقش في هذه الصفحة الفائدة من المكوّنات ذات الترتيب الأعلى وكيفية كتابتها.

استخدام المكوّنات ذات الترتيب الأعلى لأجل الاهتمامات المشتركة

ملاحظة: أشرنا سابقًا إلى أفضلية استخدام المخاليط (mixins) كطريقة للتعامل مع الاهتمامات المشتركة (cross-cutting concerns)، ولكننا أدركنا بعد ذلك أنّ المخاليط تُسبّب مشاكل أكثر من فائدتها. تعرّف من هنا عن سبب انتقالنا من المخاليط وكيفية تحويل مكوّناتك الحالية التي تستخدمها.

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

افترض مثلًا أنّه لديك مكوّن لقائمة التعليقات يُدعى CommentList والذي يشترك بمصدر بيانات خارجي لتصيير قائمة من التعليقات:

class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      // "DataSource" هو مصدر بيانات عام
      comments: DataSource.getComments()
    };
  }

  componentDidMount() {
    // الاشتراك بالتغييرات
    DataSource.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    // مسح المستمع listener
    DataSource.removeChangeListener(this.handleChange);
  }

  handleChange() {
	// تحديث حالة المكون عند تغيير مصدر البيانات
    this.setState({
      comments: DataSource.getComments()
    });
  }

  render() {
    return (
      <div>
        {this.state.comments.map((comment) => (
          <Comment comment={comment} key={comment.id} />
        ))}
      </div>
    );
  }
}

ولاحقًا قررت كتابة مكوّن للاشتراك بمنشور وحيد في المدوّنة، والذي يتبع نفس النمط:

class BlogPost extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      blogPost: DataSource.getBlogPost(props.id)
    };
  }

  componentDidMount() {
    DataSource.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    DataSource.removeChangeListener(this.handleChange);
  }

  handleChange() {
    this.setState({
      blogPost: DataSource.getBlogPost(this.props.id)
    });
  }

  render() {
    return <TextBlock text={this.state.blogPost} />;
  }
}

إنّ المكوّنان CommentList و BlogPost غير متطابقين، فهما يستدعيان توابع مختلفة على مصدر البيانات DataSource، ويُصيّران ناتجًا مختلفًا، ولكن يتشابه تنفيذهما الداخلي كثيرًا في ما يلي:

• إضافة مُستمِع (listener) للتغيير إلى DataSource عند الوصل (mount).
• استدعاء setState بداخل المُستمِع عند تغيّر مصدر البيانات.
• إزالة مُستمِع التغيير عند الفصل (unmount).

بإمكانك أن تتخيّل في التطبيقات الكبيرة تكرار هذا النمط من الاشتراك بمصدر البيانات DataSource واستدعاء setState. نريد وحدة مُجرَّدة تسمح لنا بتعريف هذا المنطق في مكان واحد ومشاركته عبر مكوّنات عديدة. وهنا تأتي فائدة المكوّنات ذات الترتيب الأعلى.

نستطيع كتابة دالة تُنشِئ مكوّنات، مثل CommentList و BlogPost والتي تشترك بمصدر البيانات DataSource. تقبل هذه الدالة كوسيط لها المكوّن الابن الذي يستقبل البيانات المُشارَكَة كخاصيّة له. فلنسمّي هذه الدالة withSubscription: