دورة حياة الاشتراك بالمستشعر
ابدأ الاشتراك عند الحاجة، وألغِه عند الانتهاء. ⏱ نحو 40 دقيقة.
- تشرح أهمّية دورة حياة الاشتراك (طاقة وذاكرة).
- تشترك وتلغي بنمط
useEffect+ دالّة تنظيف. - تستخدم مصفوفة الاعتماديّات بوعي.
١لماذا دورة الحياة مهمّة؟
المستشعر يبثّ باستمرار. إن اشتركتَ ولم تلغِ الاشتراك عند إخفاء الشاشة، يبقى يعمل في الخلفيّة — يستنزف الطاقة ويسرّب الذاكرة. إدارة «متى أبدأ ومتى أتوقّف» هي دورة الحياة.
| اللحظة | الإجراء الصحيح |
|---|---|
| ظهور المكوّن | ابدأ الاشتراك |
| تحديث الحالة | لا تعيد الاشتراك بلا داعٍ |
| إخفاء/إزالة المكوّن | ألغِ الاشتراك (تنظيف) |
٢النمط الكامل: useEffect بتنظيف
الدالّة التي يعيدها useEffect هي دالّة التنظيف: تُنفَّذ عند إزالة المكوّن. هنا نشترك في الضوء ثم نلغي:
import { useState, useEffect } from 'react';import { View, Text, StyleSheet } from 'react-native';import SmartDevice from 'smartdevice'; export default function App() { const [lux, setLux] = useState(0); useEffect(() => { const unsubscribe = SmartDevice.onLight((v) => setLux(v)); // ابدأ return () => unsubscribe(); // نظّف }, []); // مرّة واحدة return ( <View style={styles.box}> <Text style={styles.v}>الضوء الحاليّ: {lux} lux</Text> <Text style={styles.n}>الاشتراك يبدأ عند الظهور ويُلغى عند الإزالة.</Text> </View> );} const styles = StyleSheet.create({ box: { padding: 24, alignItems: 'center' }, v: { fontSize: 22, fontWeight: 'bold', color: '#E8820C' }, n: { marginTop: 10, color: '#666', textAlign: 'center' },});
حرّك منزلق الضوء. المصفوفة الفارغة [] تعني: اشترك مرّةً. دالّة الإرجاع تلغي الاشتراك.
٣الخطأ: بلا تنظيف
بلا دالّة تنظيف، يتراكم اشتراكٌ جديد مع كل ظهور، فتُنادى عدّة مرّات (تسرّب):
import { useState, useEffect } from 'react';import { View, Text } from 'react-native';import SmartDevice from 'smartdevice'; export default function App() { const [lux, setLux] = useState(0); useEffect(() => { SmartDevice.onLight((v) => setLux(v)); // ✗ بلا إلغاء }, []); return <View><Text>{lux}</Text></View>;}
import { useState, useEffect } from 'react';import { View, Text } from 'react-native';import SmartDevice from 'smartdevice'; export default function App() { const [lux, setLux] = useState(0); useEffect(() => { const stop = SmartDevice.onLight((v) => setLux(v)); return stop; // ✓ ألغِ عند الإزالة }, []); return <View><Text>{lux}</Text></View>;}
القاعدة: كل اشتراكٍ في useEffect يجب أن يُقابله إلغاءٌ في دالّة التنظيف.
٤مصفوفة الاعتماديّات
المصفوفة الثانية في useEffect تحدّد متى يُعاد التأثير:
[] | [x] | بلا مصفوفة |
|---|---|---|
| مرّة عند الظهور فقط | عند الظهور وكلّما تغيّر x | بعد كل رسم (نادرًا ما نريده) |
لاشتراك المستشعر نستخدم [] غالبًا: اشتراكٌ واحد يعيش مع المكوّن.
توقّع وتحقّق
ما الذي يعيده useEffect للتنظيف؟
مصفوفة [] تعني:
إهمال إلغاء الاشتراك يسبّب:
أين نضع الاشتراك؟
الخلاصة
- المستشعر يبثّ باستمرار؛ أدِر «ابدأ/توقّف» بدورة الحياة.
- دالّة تنظيف
useEffectتُلغي الاشتراك عند الإزالة. []= مرّة واحدة؛ بلا إلغاءٍ يحدث تسرّبٌ واستنزاف طاقة.
تحدٍّ برمجي: اشتراك نظيف بالضوء
متقدماشترك في الضوء بدورة حياةٍ سليمة.
- حالة
luxتبدأ من 0. - في
useEffect([])اشترك بـSmartDevice.onLightوأعِد دالّة الإلغاء. <Text testID="lux">يعرض القيمة.
👀 اعرض الناتج المطلوب (وجرّبه)
- الكود يعمل بلا أخطاء في Console
- يعرض قيمة الضوء الابتدائيّة 70
- اشترك بـ onLight
- أعاد دالّة تنظيف
(return)
💡 تلميح 1
const stop = SmartDevice.onLight(...) ثم return stop.💡 تلميح 2
(70).حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.
import { useState, useEffect } from 'react';import { View, Text, StyleSheet } from 'react-native';import SmartDevice from 'smartdevice'; export default function App() { const [lux, setLux] = useState(0); useEffect(() => { const stop = SmartDevice.onLight((v) => setLux(v)); return stop; }, []); return ( <View style={{ padding: 20 }}> <Text testID="lux" style={styles.v}>{lux} lux</Text> </View> );} const styles = StyleSheet.create({ v: { fontSize: 24, fontWeight: 'bold', color: '#E8820C' } });