الاتصال بين الوالد والطفل في React باستخدام Refs

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

جدول المحتويات

• فهم الـ Refs في React
• استدعاء دوال المكونات الفرعية من المكونات الأبوية الصفية
• استدعاء دوال المكونات الفرعية من المكونات الأبوية الوظيفية
• أفضل الممارسات والبدائل

فهم الـ Refs في React

توفر الـ Refs طريقة للوصول إلى عناصر DOM أو مثيلات المكونات مباشرة. وهي ليست جزءًا من تدفق بيانات مكون React ويجب استخدامها باعتدال. وبينما توفر وصولاً مباشرًا إلى المكونات الفرعية، إلا أن الإفراط في استخدامها قد يؤدي إلى رمز أقل قابلية للصيانة وأكثر صعوبة في الاختبار. أعطِ الأولوية لاستخدام الـ props للاتصال النموذجي بين الأبوين والأبناء كلما أمكن ذلك.

استدعاء دوال المكونات الفرعية من المكونات الأبوية الصفية

في المكونات الصفية، نستخدم React.createRef() لإنشاء مرجع وتعيينه إلى المكون الفرعي. ثم يصل الأب إلى مثيل الطفل ويستدعي أسلوبه.

// ChildComponent.js
import React from 'react';

class ChildComponent extends React.Component {
  myChildFunction = () => {
    console.log('Child function called!');
  };

  render() {
    return <button onClick={this.myChildFunction}>Click Me</button>;
  }
}

export default ChildComponent;

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  callChildFunction = () => {
    if (this.childRef.current) {
      this.childRef.current.myChildFunction();
    }
  };

  render() {
    return (
      <div>
        <button onClick={this.callChildFunction}>Call Child Function</button>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

export default ParentComponent;

استدعاء دوال المكونات الفرعية من المكونات الأبوية الوظيفية

تستفيد المكونات الوظيفية من خطاف useRef لوظيفة مماثلة. يعيد خطاف useRef كائنًا قابلًا للتغيير تكون خاصيته .current مُهيأة إلى null وتستمر عبر عمليات العرض.

// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = useRef(null);

  const callChildFunction = () => {
    if (childRef.current) {
      childRef.current.myChildFunction();
    }
  };

  return (
    <div>
      <button onClick={callChildFunction}>Call Child Function</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}

export default ParentComponent;

أفضل الممارسات والبدائل

بينما توفر الـ refs وصولاً مباشرًا، إلا أنها تجعل الكود أكثر صعوبة في الاختبار و الفهم. ضع في اعتبارك هذه البدائل قبل اللجوء إلى الـ refs:

• الاستدعاءات العكسية (Callbacks): مرر دالة من المكون الأبوي إلى المكون الفرعي كـ prop. يستدعي الطفل هذه الدالة عند الحاجة، ويمرر أي بيانات ضرورية إلى الأب.
• مكتبات إدارة الحالة: توفر مكتبات مثل Redux أو Context API طرقًا أكثر تنظيماً لإدارة تدفق البيانات واتصال المكونات، مما يجعل تطبيقك أسهل في الصيانة والتوسع.
• الأحداث المخصصة: قم بإرسال أحداث مخصصة من المكون الفرعي واستمع إليها في المكون الأبوي.

تذكر استخدام الـ refs بحكمة. أعطِ الأولوية لآليات تدفق البيانات الأكثر نظافة وقابلية للتنبؤ بها كلما أمكن ذلك.