سؤال عن الطريقة الأفضل من حيث الأداء لاستيراد البيانات الكبيرة من restful api في reactjs
السلام عليكم
بالنسبة لـ react js او اي اطار اخر ما هي افضل طريقة وافضل مكان لعمل fetching data من ال api ، كما رأيت في بعض التطبيقات هناك من يقوم باستيراد البيانات عند تشغيل التطبيق وارسالهم عن طريق ال props الى ال child components لكن في حال كان التطبيق يتعامل مع بيانات كبيرة هل يجب ان أقوم بعمل fetching داخل ال component المطلوب او استعمال الredux وتمرير الfunction لتشغيلها داخل الcomponent الذي سوف يتم استخدام البيانات به ام هناك طريقة افضل، اريد ان اعرف كيف يكون السلوك الصحيح في هذه الحالة لتوفير افضل أداء للتطبيق ؟
دعنا نتناقش نقطة نقطة هنا
- أولاً: هل تقوم بإستخدام redux أم التمرير بالprops? في الحقيقة بما أن البيانات كبيرة فيُفضل تخزينها حتى ﻻ نحتاج إلى جلبها كل مرة ويمكن تخزينها إما في الlocalStorage أو في الredux وهذا خيار أفضل
- ثانياً ألية جلب البيانات: نقوم بجلب البيانات في الدالة useEffect كما أوضح صﻻح بالتعليق السابق, ولكن أريد أن أضيف أنه بما أن البيانات كبيرة ومتغيرة فيمكننا إذا إستخدام ال useSWR وهذا عبارة عن خطاف يأتي من خلال تثبيت مكتبة الswr وهي مكتبة تعمل مع react بغرض تنفيذ عملية الcaching في تطبيق الreact
- ألية عمل الuseSWR تكون كالتالي: يتم أولاً جلب البيانات في البداية, ومن ثم بعد كل فترة زمنية معينة يقوم الخطاف useSWR بالتأكد إن كانت البيانات في الapi هي نفسها التي مخزنة لديك أم ﻻ, إن كانت هي نفسها إذا ﻻ يقوم بجلبها مرة أخرى, إن كانت مختلفة فيقوم إذا بجلبها مرة أخرى
- يتم إستخدامه بالشكل التالي : أولاً نقوم بتثبيته عبر الأمر
npm install swr
بعد ذلك نقوم بإستخدامه على النحو التالي
import useSWR from 'swr'
function SomeCOmponent () {
const { data, error } = useSWR('/api/user/:some_id', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
// render data
return <div>hello {data.name}!</div>
}
وبالنسبة للدالة fetcher تكون عبارة عن دالة تستخدم fetch أو axios لجلب البيانات كما في الشفرة التالية
const fetcher = (...args) => fetch(...args).then(res => res.json())
💡
التعليقات