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

استخدام المنشئات

متى يتم استخدام المنشئ:

1. تهيئة الحالة بناءً على الدعائم:

إذا كانت الحالة تعتمد على الدعائم أو إذا كنت بحاجة إلى تنفيذ منطق إضافي عند تهيئة الحالة، فإن المُنشئ هو الخيار الأفضل.

2. تحديد قيم الحالة الأولية:

عندما تريد تعيين الحالة الأولية لمكون ما، فإن المنشئ هو الطريقة التقليدية للقيام بذلك.

مثال:

interface IMyComponentProps {
  initialCount: number;
}

interface IMyComponentState {
  count: number;
}

class MyComponent extends React.Component {
  constructor(props: IMyComponentProps) {
    super(props);
    this.state = {
      count: props.initialCount,
    };
  }

  render() {
    return 
Count: {this.state.count}
;
  }
}

متى لا تستخدم المنشئ

1. تهيئة الحالة البسيطة:

إذا لم تكن الحالة معقدة ولا تعتمد على الدعائم، فيمكنك استخدام التهيئة المباشرة للحالة بدون مُنشئ.

2. لا حاجة للمنطق المعقد:

إذا لم تكن بحاجة إلى تنفيذ منطق إضافي يتعلق بالدعائم أو الحالة، فيمكنك تعيين الحالة مباشرة على مستوى الفصل.

مثال:

interface IMyComponentProps {
  message: string;
}

interface IMyComponentState {
  count: number;
}

class MyComponent extends React.Component {
  state: IMyComponentState = {
    count: 0,
  };

  render() {
    return 
Count: {this.state.count}
;
  }
}

مزايا وعيوب الأساليب المختلفة

استخدام المنشئ:

المزايا:

• تهيئة أكثر تعقيدًا: يسمح بتعيين الحالة بناءً على الدعائم وتنفيذ منطق إضافي قبل عرض المكون.
• التحكم: يسمح بالتحكم الدقيق في التهيئة ويمكنك بسهولة إضافة أو تعديل منطق التهيئة.

العيوب:

• المزيد من التعليمات البرمجية: يمكن أن يؤدي استخدام المنشئات إلى إضافة المزيد من التعليمات البرمجية، مما قد يجعل قراءة المكون أكثر صعوبة، خاصة إذا كانت التهيئة بسيطة.
• مزيد من التعقيد: تقديم تعقيد إضافي إذا كان من الممكن إجراء التهيئة البسيطة بدون مُنشئات.

التهيئة المباشرة (الحالة) خارج المنشئ:

المزايا:

• البساطة: كود أقل ورمز أكثر وضوحًا للمكونات البسيطة.
• إمكانية قراءة أفضل: غالبًا ما تكون المكونات أكثر قابلية للقراءة عند استخدام التهيئة المباشرة للحالة.

العيوب:

• مرونة محدودة: لا يمكنك تهيئة الحالة بسهولة بناءً على الدعائم أو إضافة منطق تهيئة معقد.

خاتمة

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

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