اذهب إلى المحتوى
  • 0

ما هو React.StrictMod؟

Adam Ebrahim

السؤال

أريد أن أعرف ما هو مكون React.StrictMod فهو لا يغير شيء في الصفحة بل أحيانًا يظهر خطأ في الكونسول

unsafe lifecycle methods were found within a strict-mode tree

ولا يظهر هذا الخطأ إلا عندما أستعمل المكون React.StrictMod

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

مرحباً بك : 

  • strictMode: هي أداة لتتبع الأخطاء عن طريق إضافة بعض الفحوصات الإضافية الخاصة بها لمكون معين وأبناءه ومثلها مثل ال Fragment لا تؤثر على ال UI فقط تتبع الأخطاء 
    import React from 'react';
    
    function ExampleApplication() {
      return (
        <div>
          <Header />
          <React.StrictMode>
            <div>
              <ComponentOne />
              <ComponentTwo />
            </div>
          </React.StrictMode>
          <Footer />
        </div>
      );
    }

    في المثال السابق لن يتم عمل فحوصات إضافية  ل ( Header - Footer ) أما ال ComponentOne - ComponentTwo ومحتوياتهم سيتم فحصهم 

  • مثال لما يتم فحصه: 
     1. التأكد من عدم استخدام ال ( UNSAFE_life cycly hooks ) مثل ( UNSAFE_componentWillReceiveProps - UNSAFE_componentWillMount - UNSAFE_componentWillUpdate ) 
     2. التأكد من عدم استخدام string ref
    3. التأكد من عدم استخدام عناصر منتهية مثل ( findDOMNode )
    4. التأكد من عدم استخدام old context API

  • هذه التحذيرات فقط تظهر  آثناء التطوير ( development ) وليس ال production

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

StrictMode هي ميزة تمت إضافتها في الإصدار 16.3 وتهدف إلى مساعدتنا في العثور على المشكلات المحتملة في أحد التطبيقات.

كيفية أستعمال ميزة StricMode في تطبيق React :

كل ما عليك فعله لتفعيل StrictMode (من الإصدار 16.3) هو لف  المكون الذي تريده في تطبيقك بـ <React.StrictMode>.
فيما يلي مثال على إضافة  StrictMode  إلى مكون (component) :

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

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

تم التعديل في بواسطة محمد أيت لعرايك
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...