كيف تبني جهاز React-Router الخاص بك مع تطبيق React Context Api الجديد

الصورة كريس بارباليس على Unsplash

إن سياق React ليس شيئًا جديدًا لمطوري react.js ، ولكنه كان شيئًا ما كان يستخدمه دائمًا الأكثر شجاعة (React-Redux ، React-Router ، ...) ، حتى في الوثائق التي تم خصمها بنفسها. ومع ذلك ، فقد تغير هذا مع إصدار الإصدار الجديد من React 16.3 الذي جاء مع إصدار رسمي من API جديد للعمل مع السياق.

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

السياقات

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

واجهة برمجة تطبيقات سياق التفاعل الجديد

يحتوي واجهة برمجة تطبيقات React Context الجديدة على ثلاثة أجزاء رئيسية:

من dailyjs:

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

بناء الخاصة بك رد فعل راوتر

يحتوي رمز هذا المثال على أكثر من 40 سطرًا.

ماذا نريد؟

نريد تطبيقنا لإظهار المكونات عندما يتطابق مسار محدد مع عنوان url.

شيء من هذا القبيل:

  
  
  

وبالطبع ، نريد أن نكون قادرين على الانتقال إلى عنوان url معين:

 المستخدمين 

تبعيات

لن أعيد اختراع العجلة ، فسنستخدم معظم التبعيات نفسها مثل React-Router نفسها.

للتعامل مع pushstate ، سوف نستخدم سجل المتصفح بدلاً من السجل.

الغزل إضافة متصفح التاريخ

لمعالجة الطرق سوف نستخدم pathToRegexp

الغزل إضافة المسار إلى regexp

إنشاء حاوية سياق جهاز التوجيه

بادئ ذي بدء ، سنحتاج إلى إنشاء ملف حاوية سياق حيث سنقوم بإدارة حالة جهاز التوجيه وإنشاء إجراءات للتنقل بين عناوين url.

في ملف Router.js ، سنضيف ما يلي:

استيراد رد فعل ، {createContext} من "رد فعل" ؛
سجل الاستيراد من "سجل المتصفح" ؛
const initialState = {
    عنوان url: window.location.pathname
}؛
السياق السياق = createContext ()
const {Provider، Consumer} = Context؛

تقوم الأسطر التسعة الأولى باستيراد libs الضرورية ، وتهيئة الحالة ، وإنشاء كائن سياق واستخراج Provider والمستهلك من سياق.

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

يمتد راوتر الفصل إلى React.Component {
    الحالة = initialState ؛
    العمل = {
        go: (url) => this.setState (
                state => ({... state، url}) ،
                () => السجل (رابط)
            )
    }؛
    componentDidMount () {
        السجل ((e، url) => this.setState (state => ({... state، url})))؛
    }
    يجعل() {
        return  {this.props.children} ؛
    }
}
export {Router as default، Consumer،}؛

باستخدام موفر سياق جهاز التوجيه

في تطبيقك ، يمكنك الحصول على شيء مثل هذا ، واستخدام جهاز التوجيه مثل هذا:

استيراد جهاز التوجيه من './Router' ؛
// ... استيراد رد فعل ، أنت شريط الأدوات ومكون المحتوى الخاص بك
الطبقة التطبيق يمتد React.Component {
  يجعل() {
    إرجاع (
      <المسار>
        
        <المحتوى />
      
    )؛
  }
}
التطبيق الافتراضي للتصدير ؛
يمكنك الآن استخدام مكونات Route and Link ، ولكن أولاً ، دعنا ننفذ هذين أولاً.

مكون الطريق

قم بإنشاء ملف Route.js وإضافة هذا.

استيراد رد من "رد فعل" ؛
استيراد pathToRegexp من 'المسار إلى regexp' ؛
استيراد {المستهلك} من './Router' ؛
مسار التصدير الافتراضي (الدعائم)
    إرجاع ()
        {({state}) => {
            const re = pathToRegexp (props.path) ؛
            إذا كان (re.test (state.url)) بإرجاع props.children؛
        }}
    )؛
}

باستخدام مكون الطريق الخاص بك

على سبيل المثال ، في مكون المحتوى الخاص بك ، يمكن أن يكون لديك هذا الرمز:

// ...
استيراد {المستهلك} من './Router' ؛
استيراد الطريق من ". / Route" ؛
وظيفة التصدير الافتراضية المحتوى (الدعائم)
    إرجاع <نمط الورق = {{padding: 20 ، الهامش: 20}}>
        <أدوات>
            {({state، action}) => {
                إرجاع 
                     
main
                                                          
            }}              . }

كما ترى في تطبيق مكون الطريق ، سيتم اختبار "المسار" لمعرفة ما إذا كانت تتطابق مع الحالة الحالية لمزود سياق التوجيه.

مكون الارتباط

للتنقل بين عناوين url ، يمكنك استخدام الإجراءات المكشوفة من قِبل المستهلك Router مباشرة:

استيراد {المستهلك} من './Router' ؛
// ...
<أدوات>
    {({action}) => 
        
    }

أو يمكنك تطبيق مكون الارتباط الخاص بك مثل هذا:

استيراد رد من "رد فعل" ؛
استيراد {المستهلك} من './Router' ؛
دالة التصدير الافتراضية Link ({path، ... props}) {
    إرجاع ()
        {({action}) =>  action.go (path)} />}
    )؛
}

هذه التطبيقات اللطيفة التي تستخدم السياق ليست شيئًا جديدًا ، فهي موجودة في الكثير من libs الشهيرة ، ومع ذلك آمل أن تكون قد ساعدتني في فهم قليلاً كيف يمكنك استخدام API React Context API ومدى سهولة استخدامها في ملفاتك المشاريع.

يمكنك العثور على الكود على جيثب:

بفضل Joaquim Ley (Joaquim Ley) لمراجعتك ووقتك.