كيف تكون أفضل في قابلية إعادة استخدام كود React - الجزء 1

نظرة عامة موجزة على React وشعبيته

React هي واحدة من أكثر مكتبات JavaScript الواجهة الأمامية شيوعًا لبناء واجهات المستخدم. تم تطوير React من قبل فيسبوك، وحققت شعبية واسعة في مجتمع تطوير الويب بسبب بساطتها ومرونتها وقدرتها على التوسع.

يمكن إرجاع شعبية React إلى هندستها القائمة على المكونات، التي تسمح للمطورين بتفكيك واجهات المستخدم المعقدة إلى أجزاء صغيرة قابلة لإعادة الاستخدام. يمكن بعد ذلك تجميع هذه المكونات الأصغر لإنشاء واجهات مستخدم أكبر وأكثر تعقيدًا بسرعة.

ومع ذلك، مع نمو التطبيقات، يصبح إدارة قاعدة الكود تحديًا. وهنا يأتي دور إعادة استخدام الكود — كتابة كود قابل لإعادة الاستخدام يمكن مشاركته عبر أجزاء مختلفة من التطبيق (وحتى عبر مشاريع متعددة). إنه يوفر الوقت، ويقلل الأخطاء، ويساهم في تحسين قابلية التوسع والصيانة.

في هذه المقالة، سنستكشف كيفية تنفيذ إعادة استخدام الكود في React، وأهميته، وأفضل الممارسات.

---

مكونات React وأهميتها في إعادة الاستخدام

المكونات هي اللبنات الأساسية لـ React. عندما تُصمم لأغراض إعادة الاستخدام، يمكن استيرادها ودمجها عبر أجزاء مختلفة من التطبيق، مما يسرع عملية التطوير ويقلل التكرار.

المقارنة: المكونات الوظيفية مقابل المكونات الكلاسيكية

المكونات الوظيفية

• أبسط، موجزة، أسهل في الاختبار والصيانة.
• تقبل props كمدخلات وترجع JSX.
• تُستخدم بشكل شائع مع الخطافات للتعامل مع الحالة ومنطق دورة الحياة.
• مثالية لـ قطع واجهات المستخدم الخالية من الحالة أو المنطق الذي يمكن تغليفه في خطافات مخصصة.

مثال:

function Welcome(props) {
  return <h1>مرحبًا، {props.name}!</h1>;
}

يمكن إعادة استخدام هذا المكون Welcome في أي مكان داخل التطبيق مع قيم مختلفة لـ name.

---

المكونات الكلاسيكية

• أكثر قوة، مع الحالة وطرق دورة الحياة.
• طويلة ومتعقدة في الصيانة، لكنها مفيدة في سيناريوهات معينة.

مثال:

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: props.seconds };
  }

  tick() {
    this.setState((state) => ({
      seconds: state.seconds - 1,
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div>Seconds remaining: {this.state.seconds}</div>;
  }
}

يمكن إعادة استخدام المؤقت ببساطة عن طريق تمرير خصائص seconds مختلفة.

---

أمثلة على مكونات قابلة لإعادة الاستخدام في React

1. مكون الزر

function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

2. مكون النافذة المنبثقة

function Modal(props) {
  return (
    <div className="modal">
      <div className="modal-content">{props.children}</div>
    </div>
  );
}

3. مكون إدخال النموذج

function FormInput(props) {
  return (
    <div>
      <label>{props.label}</label>
      <input type={props.type} value={props.value} onChange={props.onChange} />
    </div>
  );
}

---

أفضل الممارسات لإعادة استخدام الكود

1. استخدام الخصائص والحالة

• استخدم props للتخصيص.
• استخدم state لإدارة السلوك الديناميكي.
• دمج كليهما لتكوين مكونات مرنة وقابلة لإعادة الاستخدام.

---

2. المكونات ذات الترتيب الأعلى (HOCs)

تُلفّ المكونات ذات الترتيب الأعلى المكونات بإضافة وظائف إضافية.
مثال – المصادقة:

function withAuth(WrappedComponent) {
  return class extends React.Component {
    state = { isAuthenticated: false };

    componentDidMount() {
      const isAuthenticated = true; // Replace with real check
      this.setState({ isAuthenticated });
    }

    render() {
      return this.state.isAuthenticated ? <WrappedComponent {...this.props} /> : null;
    }
  };
}

---

3. خصائص العرض

تتيح لك خصائص العرض مشاركة المنطق بين المكونات من خلال تمرير دالة.

مثال:

class Mouse extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return <div onMouseMove={this.handleMouseMove}>{this.props.render(this.state)}</div>;
  }
}

الاستخدام:

<Mouse render={({ x, y }) => <p>Mouse position: {x}, {y}</p>} />

---

الاستنتاج

إعادة استخدام الكود هو عامل رئيسي في تطوير React قابل للتوسع. من خلال الاستفادة من:

• المكونات الوظيفية والكلاسيكية
• المكونات ذات الترتيب الأعلى
• خصائص العرض

...يمكن للمطورين بناء تطبيقات مرنة وقابلة للصيانة وعصرية.

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