مفاهيم رد فعل مهمة

1- رد الفعل الخطافات

يمكنك استخدام usereducer لإدارة هياكل الحالة المعقدة ، يمكنك استخدام effecteffect لتفاعل الخطاف الذي يتيح لك مزامنة مكونًا مع نظام خارجي. يمكنك Usecallback / usememo لتحسين الأداء ، useref للوصول إلى دوم ، وإنشاء خطافات مخصصة.

2. عرض نمط الدعائم

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

3. التشويق

التشويق يتيح لك عرض احتياطي حتى ينتهي أطفالها من التحميل.

مثال :

}>
  

4. حدود الخطأ

حدود الخطأ مكون خاص بالرد يلف حول شجرة مكون ويمنع أي أخطاء داخل هذا المكون من نشر وتسبب في تعطل تطبيق كامل.

لاستخدامه ، يجب عليك ببساطة لف شجرة المكونات التي تريد حمايتها باستخدام مكون حدود الخطأ. ستكتشف حدود الخطأ الأخطاء وإظهار واجهة مستخدم احتياطي عندما تحدث داخل شجرة المكون ملفوفة.

مثال :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}


Something went wrong}>
  

5. تمرير البيانات مع السياق

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

6. إدارة الدولة

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

7. رمز ترسة

bundling رائعة ، ولكن مع نمو تطبيقك ، ستنمو حزمةك أيضًا. خاصةً إذا كنت تضمنت مكتبات كبيرة لجهة خارجية . تحتاج إلى مراقبة الكود الذي تضمنه في الحزمة لتجنب الانتهاء مع حزمة كبيرة code-splitting

webpack ، rollup و browserify (عبر عامل bundle) والتي يمكن أن تنشئ مجموعات متعددة يمكن تحميلها ديناميكيًا عند يمكن أن يساعدك تطبيق الرمز على "التحميل الكسول" فقط الأشياء التي يحتاجها المستخدم حاليًا ، والتي يمكن أن تحسن بشكل كبير من أداء تطبيقك. على الرغم من أنك لم تقل الكمية الإجمالية للشفرة في تطبيقك ، فقد تجنبت رمز التحميل الذي قد لا يحتاجه المستخدم أبدًا ، وقلل من كمية التعليمات البرمجية اللازمة أثناء التحميل الأولي . خاتمة في هذه المقالة ، كتبت عن

. تعمل هذه المفاهيم المتقدمة على تحسين الأداء والأداء في تطبيقات React الخاصة بك . يمكنك فهم هذه المفاهيم واستخدامها بشكل أساسي