المعالجة المباشرة في React Native

المعالجة المباشرة

من الضروري في بعض الأحيان إجراء تغييرات مباشرة على مكوّن دون استخدام الحالة أو الخاصيات لإطلاق إعادة تصييرٍ (re-render) لكامل الشجرة الفرعية (subtree). عند استخدام React في المتصفح على سبيل المثال، تحتاج أحيانًا إلى تعديل عقدة DOM مباشرةً، وينطبق الأمر نفسه على العروض في تطبيقات الجوال. setNativeProps هي المكافئُ في React Native لضبط الخاصيات مباشرة على عقدة DOM.

ملاحظة: استخدم setNativeProps عندما يؤدي إعادة التصيير المتكرر إلى إعاقةٍ في الأداء.

لا يجب أن تستخدم المعالجة المباشرة كثيرًا. عادةً ما ستستخدمها فقط لإنشاء تحريكاتٍ مستمرة لتجنّب الحمل الزائد (overhead) في تصيير التسلسل الهرمي للمكونات (component hierarchy) والمطابقة (Reconciliation) بين العديد من العروض. تُعدّ الدالة setNativeProps دالّةً أمريّةً (imperative) وتُخزِّن الحالة في الطبقة الأصيلة (DOM، و UIView، إلخ) وليس في مكونات React الخاصة بك، مما يجعل شرح الشيفرة الخاصّة بك وفهمها أكثر صعوبة وتعقيدًا. قبل استخدامها، حاول حل مشكلتك باستخدام setState و shouldComponentUpdate.

setNativeProps مع مكون TouchableOpacity

يستخدم مكوّن TouchableOpacity دالّة setNativeProps داخليًا لتحديث عتامةِ (opacity) مكوّناته الأبناء:

setOpacityTo(value) {
  // Redacted: animation related code
  this.refs[CHILD_REF].setNativeProps({
    opacity: value
  });
},

هذا يسمح لنا بكتابة الشيفرة البرمجية التالية ومعرفة أنّ عتامة المكون الابن سوف تُحدَّثُ استجابةً للّمس، دون أن يكون لدى المكون الابن أي معرفة بهذه الحقيقة أو يتطلب أي تغييرات في شيفرته:

<TouchableOpacity onPress={this._handlePress}>
  <View style={styles.button}>
    <Text>Press me!</Text>
  </View>
</TouchableOpacity>

لنتخّيّل أنّ ميّزة setNativeProps غير موجودة في إطار العمل. إحدى الطرق التي قد نستخدمها للتخلّص من هذا القيد هي تخزين قيمة العتامة في الحالة، ثم تحديث تلك القيمة في كلّ مرّة تُطلق فيها الدالة onPress:

constructor(props) {
  super(props);
  this.state = { myButtonOpacity: 1, };
}

render() {
  return (
    <TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
                      onPressOut={() => this.setState({myButtonOpacity: 1})}>
      <View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
        <Text>Press me!</Text>
      </View>
    </TouchableOpacity>
  )
}

يتطلّب هذا حسابًا كثيفًا مقارنة بالمثال الأصلي، إذ يحتاج React إلى إعادة تصيير التسلسل المكونات الهرمي في كل مرة تتغير فيها العتامة، على الرغم من عدم تَغيُّر خاصيّات العرض وخاصيات أبناء العرض الأخرى. هذا الحِمل ليس مصدرًا للقلق عادةً، لكن عند تنفيذ التحريكات المستمرة والاستجابة للإيماءات، فإن تحسين المكوّنات بحكمة يمكن أن يحسّن من دقة التحريكات.

إذا نظرت إلى شيفرة setNativeProps في NativeMethodsMixin ستلاحظ أنه غِلافٌ (wrapper) حول RCTUIManager.updateView. وهذا هو بالضبط نفس استدعاء الدالة الذي يُنتَج من إعادة التصيير. راجع receiveComponent في ReactNativeBaseComponent.js.

المكونات المركبة و setNativeProps

المكونات المركبَّة غير مدعومة من طرف عرضٍ أصيل، لذلك لا يمكنك استدعاء setNativeProps عليها. خذ هذا المثال:

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

class MyButton extends React.Component {
  render() {
    return (
      <View>
        <Text>{this.props.label}</Text>
      </View>
    )
  }
}

export default class App extends React.Component {
  render() {
    return (
      <TouchableOpacity>
        <MyButton label="Press me!" />
      </TouchableOpacity>
    )
  }
}

إذا قمت بتشغيل هذا سترى هذا الخطأ فورًا: ‎‎Touchable child must either be native or forward setNativeProps to a native component‎‎. يحدث هذا لأنّ المكوّن MyButton غير مدعوم مباشرةً من طرف عرضٍ أصيل من المُفترَض أن تُعيَّن عتامته. يمكنك التفكير في الأمر كما يلي: إذا عرَّفتَ مكوِّنًا باستخدام createReactClass فلن تتوقع أن تكون قادرًا على تعيين خاصيّةِ ‎‎style‎‎ له لأنّها لن تعمَل، ستحتاج إلى تمرير الخاصيّة‎ style‎‎ ‎إلى مُكوِّنٍ إبن، إلا إذا كنت تُغلِّفُ (wrapping) عنصرًا أصيلًا. وبالمثل، سنقوم بإعادة توجيه setNativeProps إلى مكونٍ إبنٍ مدعومٍ من عرضٍ أصيل.

إرسال setNativeProps إلى مكون إبن

كل ما نحتاج إلى القيام به هو توفير تابعٍ باسم setNativeProps على مكوّننا الذي يستدعِي الدالّة setNativeProps على الابن المناسب مع المعاملات (arguments) المعطاة.

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

class MyButton extends React.Component {
  setNativeProps = (nativeProps) => {
    this._root.setNativeProps(nativeProps);
  }

  render() {
    return (
      <View ref={component => this._root = component} {...this.props}>
        <Text>{this.props.label}</Text>
      </View>
    )
  }
}

export default class App extends React.Component {
  render() {
    return (
      <TouchableOpacity>
        <MyButton label="Press me!" />
      </TouchableOpacity>
    )
  }
}

يمكنك الآن استخدام المكوّن MyButton داخل المكوّن TouchableOpacity!

توضيح: استخدمنا صيغة مراجع رد النداء (ref callback) هنا بدلاً من المرجع التقليدي القائم على السلاسل النصية.

قد تلاحظ أننا مررنا جميع الخاصيّات إلى العرض الابن باستخدام ‎‎{...this.props}‎‎. وسبب ذلك هو أن المكون TouchableOpacity هو في الواقع مكوّن مركب (composite component)، ولذا فبالإضافة إلى اعتماده على setNativeProps الموجودة في مكوّنه الابن، فإنه يتطلب أيضا أن يقوم المكون الابن بالتعامل مع اللمس. وللقيام بهذا فإنه يمرّر عدّة خاصيّاتٍ تستدعي مجدّدًا مكوّن TouchableOpacity. وعلى النقيض من ذلك، فإن TouchableHighlight مدعوم من عرض أصيل ولا يتطلب سوى إنشاء setNativeProps في المكوّن.

استعمال setNativeProps لمسح قيمة حقل إدخال النص

مسح قيمة المكوّن TextInput حالةٌ أخرى من حالات استخدام setNativeProps الشائعة. يمكن أحيانًا أن يؤدي استخدام الخاصيّة ‎‎controlled‎‎ التابعة للمكوّن TextInput إلى إسقاط المحارف عندما تكون الخاصيّة ‎‎bufferDelay‎‎ منخفضةً أو عندما يكتب المستخدم بسرعة كبيرة. يفضِّل بعض المطورين تخطي هذه الخاصيّة تمامًا واستخدامَ setNativeProps مباشرة بدلاً من ذلك لمعالجة قيمة المكوّن TextInput عند الضرورة. على سبيل المثال، توضح الشيفرة التالية كيفيّة مسح المدخلات عند النقر فوق زر:

import React from 'react';
import { TextInput, Text, TouchableOpacity, View } from 'react-native';

export default class App extends React.Component {
  clearText = () => {
    this._textInput.setNativeProps({text: ''});
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <TextInput
          ref={component => this._textInput = component}
          style={{height: 50, flex: 1, marginHorizontal: 20, borderWidth: 1, borderColor: '#ccc'}}
        />
        <TouchableOpacity onPress={this.clearText}>
          <Text>Clear text</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

تجنب النزاعات مع دالة التصيير

عند تحديث خاصيةٍ تُدارُ أيضًا بواسطة دالة التصيير، فقد ينتهي الأمر إلى حدوث بعض العلل المربكة التي لا يمكن التنبؤ بها لأنه في كلّ مرّةٍ يُعاد فيها تصيير المكوّن وتتغيَّر هذه الخاصيّة، ستُتَجاهل أي قيمةٍ قد عُيِّنَت مسبقًا من setNativeProps بالكامل وستُتَجاوَز.

‎‎setNativeProps‎‎ و‎‎shouldComponentUpdate‎‎

يمكنك من خلال تطبيق ‎‎shouldComponentUpdate‎‎ بذكاءٍ تَجنّبُ عمليّات المطابقة غير الضرورية بين أشجار المكونات الفرعية (component subtrees)، إلى النقطة التي قد يكون فيها الأداء كافياً لاستخدام setState بدلاً من setNativeProps.

توابع أصيلة أخرى

تتوفر التوابع الموضّحة هنا على معظم المكونات الافتراضية التي يقدمها React Native. ومع ذلك، لاحظ أنها غير متوفرة على المكونات المركّبة التي لا تُدعم مباشرةً من طرف عرضٍ أصيل. سيتضمن هذا عمومًا معظم المكونات التي تُعرِّفها في تطبيقك الخاص.

‎‎measure(callback)‎‎

تُحدِّد الموقع على الشاشة والعرض والارتفاع للعرض المحدد وتُعيد القيم عبر دالّة رد نداء غير متزامنة (async callback). في حالة نجاح ذلك، ستُستدعَى دالّة رد النّداء باستخدام المعاملات التالية:

• ‎‎x‎‎
• ‎‎y‎‎
• ‎‎width‎‎
• ‎‎height‎‎
• ‎‎pageX‎‎
• ‎‎pageY‎‎

لاحظ أن هذه القياسات غير متوفّرة إلا بعد اكتمال التصيير على الجهة الأصيلة. إذا كنت بحاجة إلى القياسات في أقرب وقت ممكن، فانظر الخاصيّة ‎‎onLayout‎‎ كبديل.

‎‎measureInWindow(callback)‎‎

تُحدِّد موقع العرض المعطى في النافذة وتُعيد القيم عبر دالّة رد نداء غير متزامنة. إذا تم تضمين عرض React الجذر (React root view) في عرضٍ أصيلٍ آخر، فسوف تُعطيك هذه الدالة الإحداثيات المطلقة (absolute coordinates). في حالة نجاح ذلك، ستُستدعَى دالّة رد النّداء باستخدام المعاملات التالية:

• ‎‎x‎‎
• ‎‎y‎‎
• ‎‎width‎‎
• ‎‎height‎‎

‎‎measureLayout(relativeToNativeNode, onSuccess, onFail)‎‎

مشابهة للدالة ‎‎measure()‎‎، ولكنّها تقيس العرض نسبةً إلى مكوّنٍ جدٍّ (ancestor)، المحدَّد بالاسم ‎‎relativeToNativeNode‎‎. هذا يعني أن القيمتان ‎‎x‎‎ و‎‎y‎‎ نسبيّتان نسبةً إلى القيمتين الأصليتين ‎‎x‎‎ و‎‎y‎‎ الخاصّتين بالعرض الجد (ancestor view).

كما هو الحال دائمًا، للحصول على مقبض عقدة أصيل (native node handle) لأحد المكونات، يمكنك استخدام ‎‎findNodeHandle(component)‎‎.

import {findNodeHandle} from 'react-native';

‎‎focus()‎‎

تطلب التركيز على المدخل أو العرض المعطى. يعتمد السّلوك الذي سيُطلَق على نظام التشغيل ونوع العرض.

‎‎blur()‎‎

تُزيل التركيز على المدخل أو العرض المعطى. وهي عكس ‎‎focus()‎‎.

مصادر

• صفحة Direct Manipulation في توثيق React Native الرسمي.