إذا كنت جديدًا في استخدام React Native أو React، فقد صادفت الكلمات State وprops. يعد فهم هذين الأمرين أمرًا ضروريًا لتطوير تطبيقات الهاتف المحمول الديناميكية والقابلة للتكيف. سنتعمق في الحالة والدعائم في مقالة المدونة هذه، ونفحص الاختلافات بينهما، ونتعلم كيفية التعامل بفعالية مع تدفق البيانات في تطبيق React Native الخاص بك.

ما هي الحالة والدعائم؟

ولاية

الحالة عبارة عن كائن مضمن يسمح للمكونات بإنشاء بياناتها الخاصة وإدارتها. فهو يحتوي على معلومات قد تتغير خلال دورة حياة المكون. كلما تغيرت الحالة، يتم إعادة عرض المكون ليعكس تلك التغييرات.

• قابل للتغيير: يمكن تغيير الحالة باستخدام setState (في مكونات الفئة) أو ربط useState (في المكونات الوظيفية).
• محلية للمكون: الحالة مغلفة بالكامل ومحلية للمكون.
• محفزات إعادة العرض: يؤدي تحديث الحالة إلى إعادة عرض المكون.

الدعائم

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

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

فهم الفرق

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

لماذا هي مهمة؟

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

إدارة تدفق البيانات بشكل فعال

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

1. تدفق البيانات في اتجاه واحد

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

2. رفع الحالة

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

3. استخدام عمليات الاسترجاعات للتواصل من الطفل إلى الوالدين

للسماح للمكونات الفرعية بالتواصل مع المكونات الأصلية، يمكنك تمرير الوظائف (عمليات الاسترجاعات) كدعائم. يمكن للمكون الفرعي بعد ذلك استدعاء هذه الوظيفة لإرسال البيانات مرة أخرى إلى الأصل.

أمثلة

دعونا نلقي نظرة على بعض أمثلة التعليمات البرمجية لتوضيح هذه المفاهيم.

مثال 1: استخدام الدعائم

المكون الأصلي (App.js):

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    
  );
};

export default App;

المكون التابع (Greeting.js):

import React from 'react';
import { Text } from 'react-native';

const Greeting = (props) => {
  return Hello {props.name};
};

export default Greeting;

توضيح:

• يقوم مكون التطبيق بتمرير خاصية الاسم إلى مكون الترحيب.
• يتلقى مكون الترحيب الدعائم ويستخدم اسم الدعائم لعرض رسالة مخصصة.

مثال 2: استخدام الحالة

مكون العداد (Counter.js):

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    You clicked {count} times setCount(count   1)} />
    
  );
};

export default Counter;

توضيح:

• نستخدم الخطاف useState لتهيئة العد إلى 0.
• تقوم الدالة setCount بتحديث الحالة.
• عند الضغط على الزر، يزداد العد، ويعاد عرض المكون لعرض العدد الجديد.

مثال 3: رفع الحالة

المكون الأصلي (TemperatureConverter.js):

import React, { useState } from 'react';
import { View } from 'react-native';
import TemperatureInput from './TemperatureInput';

const toCelsius = (fahrenheit) => ((fahrenheit - 32) * 5) / 9;
const toFahrenheit = (celsius) => (celsius * 9) / 5   32;

const TemperatureConverter = () => {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (temp) => {
    setScale('c');
    setTemperature(temp);
  };

  const handleFahrenheitChange = (temp) => {
    setScale('f');
    setTemperature(temp);
  };

  const celsius =
    scale === 'f' ? toCelsius(parseFloat(temperature)) : temperature;
  const fahrenheit =
    scale === 'c' ? toFahrenheit(parseFloat(temperature)) : temperature;

  return (
    
  );
};

export default TemperatureConverter;

المكون الفرعي (TemperatureInput.js):

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

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit',
};

const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => {
  return (
    
      Enter temperature in {scaleNames[scale]}:>
  );
};

export default TemperatureInput;

توضيح:

• يتم رفع درجة حرارة ومقياس الحالة المشتركة إلى مكون محول الحرارة.
• تتلقى مكونات TemporaryInput الدعائم وترسل التغييرات إلى الأصل من خلال عمليات الاسترجاعات.

أفضل الممارسات

1. إبقاء المكونات عديمة الحالة عندما يكون ذلك ممكنًا

المكونات عديمة الحالة أسهل في الاختبار والتصحيح. استخدم الدعائم لتمرير البيانات إليهم.

2. تقليل الحالة

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

3. تجنب طفرة الحالة المباشرة

لا تقم أبدًا بتغيير الحالة بشكل مباشر. استخدم دائمًا setState أو وظيفة التحديث من useState.

4. استخدام PropTypes لفحص النوع

استخدم PropTypes لتوثيق الأنواع المقصودة من الخصائص التي تم تمريرها إلى المكونات.

import PropTypes from 'prop-types';

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

5. استخدام واجهة برمجة تطبيقات السياق للحالة العالمية

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

أخطاء شائعة يجب تجنبها

• حالة الطفرة المباشرة:

  // Incorrect
  this.state.count = this.state.count   1;

  // Correct
  this.setState({ count: this.state.count   1 });

• استخدام الدعائم لتعديل الحالة الأصل مباشرة:

يجب ألا تحاول المكونات الفرعية تعديل الدعائم أو الحالة الأصلية مباشرةً. استخدم عمليات الاسترجاعات.

خاتمة

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

يتذكر:

• الحالة مخصصة للبيانات التي تتغير بمرور الوقت ويتم إدارتها داخل المكون.
• الدعائم مخصصة لتمرير البيانات والوظائف إلى أسفل شجرة المكونات.

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