السلام عليكم تحية طيبة للجميع اعمل على تطبيق React native استحدم useEffact فى جلب البيانات كيف تمم التنظيف
بعد جلب الداتا
ما تقصده هو استخدام دالة التنظيف (cleanup function) ونقوم بالأمر كالتالي:
useEffect(() => { const fetchData = async () => { // جلب البيانات هنا }; fetchData(); return () => { // تنظيف المتغيرات الغير مستخدمة هنا }; }, [/* الاعتماديات إذا كانت هناك أي اعتماديات */]);
وفي دالة return نقوم بـ:
وإليك مثال كامل:
import React, { useState, useEffect } from 'react'; const MyComponent = () => { // حالة لتخزين البيانات المستلمة const [data, setData] = useState(null); useEffect(() => { // دالة لجلب البيانات const fetchData = async () => { try { // يمكنك استخدام أي دالة لجلب البيانات هنا (axios، fetch، إلخ) const response = await fetch('https://api.example.com/data'); const result = await response.json(); setData(result); } catch (error) { console.error('Error fetching data:', error); } }; // استدعاء دالة جلب البيانات fetchData(); // تنظيف المصادر عند إلغاء المكون أو حدوث تحديثات أخرى return () => { // يمكنك أيضًا إضافة تنظيف المصادر الإضافية هنا (إغلاق اتصالات شبكة، إلخ) console.log('Cleaning up resources...'); }; }, []); // الأقواس الفارغة تعني أن useEffect يعمل فقط عند التحميل الأولي للمكون // عرض البيانات return ( <div> {data ? ( <ul> {data.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ) : ( <p>Loading data...</p> )} </div> ); }; export default MyComponent;
أوّلًا عليكم استخدام خاصيّة Use effect من أجل إحضار المعلومات. ثمّ بعد ذلك عليكم إرجاع وظيفة Cleanup function من خلال useEffect hook. بعد ذلك ستظهر عندكم عدّة خيارات يمكن استخدامها من أجل تنظيف الموارد.
التعليقات