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

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

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

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

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

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

---

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

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

مقارنة: المكونات الوظيفية مقابل المكونات القائمة على الفئة

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

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

مثال:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

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

---

المكونات القائمة على الفئة

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

مثال:

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)

تقوم 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 الجادة.