كيفية التعامل مع سياق التفاعل بطريقة موثوقة.

السياق - لا يقصد التورية -

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

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

React لديه ميزة لحل هذه المشكلة: السياق.

ربما تحصل على ربح منه حتى دون إدراك ذلك. نظرًا لبعض المكتبات الأكثر استخدامًا في نظام React البيئي ، يمكنك الاستفادة منها: React-Router و React-Redux وغيرها الكثير.

ولكن ، يأتي مع سعر وعليك أن تكون حذرا. تحذرنا وثائق React من ذلك:

https://facebook.github.io/react/docs/context.html

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

كيف تتفاعل سياق العمل؟

تحتاج أولاً إلى مكون موفر السياق. وهو ليس أكثر من مكون عادي يتطلب childContextTypes و getChildContext:

  • childContextTypes: خاصية ثابتة تسمح لك بالإعلان عن بنية كائن السياق التي يتم تمريرها إلى أحفاد المكون الخاص بك. أزياء مماثلة ل propTypes لكن ليست اختيارية.
  • getChildContext: طريقة النموذج الأولي التي ترجع كائن السياق لتمرير التسلسل الهرمي للمكون. في كل مرة تتغير فيها الحالة أو يتلقى المكون الدعائم الجديدة ، سيتم استدعاء هذه الطريقة.

دعونا نرى كيف يتم ذلك:

الطبقة ContextProvider يمتد React.Component {
  childContextTypes ثابت = {
    currentUser: React.PropTypes.object
  }؛
  getChildContext () {
    return {currentUser: this.props.currentUser}؛
  }
  
  يجعل() {
    إرجاع(...)؛
  }
}

يمكن لأي من نسل هذا المكون الوصول إلى السياق كما يلي:

/ * مكون فئة ES6 * /
الطبقة ContextConsumer يمتد React.Component {
  / *
     contexTypes هي خاصية ثابتة مطلوبة للإعلان عنها
     ماذا تريد من السياق
  * /
  سياق ثابتأنواع = {
      currentUser: React.PropTypes.object
  }؛
  يجعل() {
    const {currentUser} = this.context؛
    return 
{currentUser.name}
؛   } }
/ * مكون فئة ES6 مع مُنشئ بالكتابة * /
الطبقة ContextConsumer يمتد React.Component {
  سياق ثابتأنواع = {
      currentUser: React.PropTypes.object
  }؛
  مُنشئ (الدعائم ، السياق) {
    سوبر (الدعائم ، السياق) ؛
    ...
  }
  يجعل() {
    const {currentUser} = this.context؛
    return 
{currentUser.name}
؛   } }
/ * مكون عديم الحالة الوظيفية * /
const ContextConsumer = (الدعائم ، السياق) => (
  
{context.currentUser.name} )؛ ContextConsumer.contextTypes = {   currentUser: React.PropTypes.object }؛

تحتاج مكونات مستهلك السياق إلى إعلان ما يريدونه من السياق عبر contextTypes. بعد ذلك ، يمكنهم الوصول إلى السياق عبر this.context في حالة مكونات فئة ES6. بدلاً من ذلك ، عندما يكون المستهلك مكونًا عديم الجنسية وظيفيًا ، يمكنك الوصول إلى السياق من خلال المعلمة الثانية للوظيفة.

يمكنك أيضًا الرجوع إلى السياق في بعض أساليب دورة حياة المكون:

componentWillReceiveProps (nextProps ، nextContext) {...}
shouldComponentUpdate (nextProps ، nextState ، nextContext) {...}
componentWillUpdate (nextProps ، nextState ، nextContext) {...}
componentDidUpdate (PreviousProps، previousContext) {...}

ما هي العيوب؟

  1. كما أشرنا أعلاه ، فإن سياق React تجريبي ، من المحتمل أن تتغير واجهة برمجة التطبيقات في المستقبل. هذا يجعل الكود الذي يستخدمه هش للغاية. أي تغيير API سوف كسر كل مزود السياق والمستهلك. مما يؤدي إلى كابوس الصيانة.
  2. يعد سياق React أيضًا متغيرًا عالميًا في نطاق الشجرة الفرعية React واحدة. هذا يجعل المكونات الخاصة بك أكثر تقاربا ، ويكاد يكون من المستحيل إعادة استخدامها خارج الشجرة الفرعية المذكورة أعلاه.
  3. علاوة على ذلك ، إذا تغيرت قيمة السياق التي يوفرها أحد المكونات ، فلن يتم تحديث الأحفاد التي تستخدم هذه القيمة إذا قام أحد الوالدين الوسيط بإرجاع false من shouldComponentUpdate:

WOAH! هناك الكثير مما يجب مراعاته ... ويثور سؤال:

هل يجب استخدام ميزة React سياق غير مستقر؟

دان ابراموف مسمر!

دعونا نرى كيف يمكنك استخدام مكونات ذات ترتيب عالي (HOCs للإيجاز) يمكنك تخفيف بعض المتاعب الكامنة في استخدام سياق React.

HOCS إلى الإنقاذ

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

المزيد عن HOCs:
خلطات ميتة. يحيا التكوين
مكونات النظام الأعلى: نمط تصميم تطبيق React
خلطات تعتبر ضارة

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

const provideContext =
  (childContextTypes، getChildContext) => (Component) => {
    الطبقة ContextProvider يمتد React.Component {
      childContextTypes ثابت = childContextTypes؛
      getChildContext = () => getChildContext (this.props)؛
        
      يجعل() {
        return ؛
      }
    }
    إرجاع ContextProvider ؛
  }؛
const consumeContext = (contextTypes) => (المكون) => {
  / * يتم تمرير السياق الدعائم. بهذه الطريقة المكون هو
   فصل تماما من API السياق.
  * /
  const ContextConsumer = (الدعائم ، السياق) =>
     ؛
  ContextConsumer.contextTypes = contextTypes؛
  إرجاع ContextConsumer؛
}؛

بعد ذلك ، يمكنك استخدامه كما يلي:

const الطفل = ({color}) => (
  
    مرحبا السياق!    )؛ const ChildwithContext = consumeContext ({   اللون: React.PropTypes.string }) (الطفل)؛
const MiddleComponent = () => ؛
التطبيق const = provideContext (
  {color: React.PropTypes.string} ،
  () => ({color: 'red'})
) (MiddleComponent)؛

بديل آخر هو استخدام المكتبة المذهلة Recompose:

يوفر Recompose مجموعة من HOCs مفيدة للغاية لتناسب جميع احتياجاتك. إذا كنت تعانق ، فقم بتغيير الطريقة التي تكتب بها تطبيقات React. يوفر withContext و getContext كبدائل لـ provideContext و consumeContext على التوالي.

كميزة لم تعد بحاجة للحفاظ على HOCs. ولكن ، إذا كان التطبيق الخاص بك صغيرًا أو كنت في حاجة إلى هاتين الوظيفتين فقط ، فقد يكون الاعتماد على إعادة التوصية مبالغًا فيه.

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

تمنحك HOCs الكثير ، ولكن ليس بما يكفي ... الأمر متروك لك لاختيار البيانات التي يجب تمريرها عبر السياق.

إذا نجحت في تمرير بيانات النموذج ، فستواجه مشكلات فقط:

  1. يجعل تطبيقك أكثر صعوبة.
  2. الأزواج المكونات الخاصة بك.

استخدم السياق للنطاقات العالمية الحقيقية ، وليس فقط لحفظ الكتابة. يعد المستخدم الحالي الذي قام بتسجيل الدخول ومعلومات السمة والتدويل والأقلمة أمثلة جيدة.

مثال عمل من فضلك!

الاستنتاجات

في تطوير البرمجيات كما في الحياة بشكل عام ، كل شيء يتعلق بالمفاضلات. و ... على الرغم من عدم الاستقرار ، يعد سياق React أداة قوية تحت تصرفك. ولكن ، أنت تعرف المثل القديم: مع القوة العظمى تأتي مسؤولية كبيرة.

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

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

شكرا جزيلا لدان ابراموف لاستعراض هذا المنصب. إنني أقدر حقًا مساهماته في المجتمع.

قد تكون أيضا مهتما ب:

  • كيفية التعامل مع الدولة في رد الفعل. التعليمات المفقودة.
  • رد فعل دورة حياة المكون.
  • المكونات ، خيول الحرب في React.
  • الرد ، مقدمة لطيفة.