مقدمة
بصفتك مطور React، هل سئمت من طلبات الخادم التي لا تُدار بشكل جيد؟ لا داعي للبحث أكثر؛ فخطافات React ميزة فعّالة في مكتبة React، تُمكّن المطورين من استخدام ميزات الحالة وميزات React الأخرى في المكونات الوظيفية، وتُساعد في تحسين طلبات الخادم لديك والارتقاء بأداء تطبيق الويب لديك إلى مستوى أعلى.
قد تتساءل: "ما أهمية طلبات الخادم؟ ما أهميتها؟" حسنًا، دعني أخبرك - طلبات الخادم تلعب دورًا هامًا في تجربة المستخدم. قد تؤدي سوء إدارة طلبات الخادم إلى بطء التحميل، وضعف الأداء، وتجربة مستخدم محبطة. توفر React Hooks طريقة لإدارة طلبات الخادم بكفاءة وتنظيم، مما يؤدي إلى تحميل أسرع، وتحسين الأداء، وتجربة مستخدم أفضل.
سوف يرشدك هذا البرنامج التعليمي إلى كيفية استخدام React Hooks لتحسين أداء طلبات الخادم وإدارة طلبات الخادم بشكل أكثر فعالية ومساعدتك في إنشاء تطبيقات ويب أكثر تحسينًا.
بحلول نهاية هذا البرنامج التعليمي، سيكون لديك فهم شامل لكيفية استخدام React Hooks لتحسين طلبات الخادم ويمكنك تنفيذ هذه التقنيات في مشاريعك لتحسين أداء وتجربة المستخدم لتطبيقات الويب الخاصة بك.
المتطلبات الأساسية
- فهم جافا سكريبت
- مقدمة إلى خطافات React
- تعرف على كيفية تقديم طلبات الخادم في JavaScript.
- بيئة عمل تطويرية
- محرر الكود
بالإضافة إلى ذلك، سيكون من المفيد الحصول على خبرة في العمل مع واجهات برمجة التطبيقات وفهم مبادئ RESTful.
إذا كنتَ جديدًا في مجال تحسين طلبات الخادم، فلا تقلق، فهذا البرنامج التعليمي مُصمّم للمطورين من جميع مستويات الخبرة. إذا لم تكن مُلِمًّا بالمفاهيم بعد، فقد تحتاج إلى إجراء المزيد من البحث والتجربة بنفسك. لكن لا تقلق، بقليل من الصبر والممارسة، يُمكنك إتقان فن تحسين طلبات الخادم في وقت قصير! هيا بنا نبدأ ونُحسّن أداء تطبيق React الخاص بك.
إعداد مشروع React جديد
قد يكون إعداد مشروع React جديد مهمة شاقة للمطورين المبتدئين، ولكن بمساعدة أداة إنشاء تطبيق React (CRA)، أصبح الأمر أسهل من أي وقت مضى. CRA هي أداة شائعة لواجهة سطر الأوامر، تُؤتمت عملية إعداد مشروع React جديد وتوفر بيئة تطوير مُحسّنة لبناء تطبيقات React.
لإنشاء مشروع React، عليك تثبيت Node.js وnpm على جهاز الكمبيوتر. إذا لم تكن مثبتة لديك، يمكنك تنزيلها من موقع Node.js الرسمي. بعد تثبيت هذه الأدوات، افتح نافذة الأوامر أو موجه الأوامر في المجلد الذي تريد إنشاء التطبيق فيه، واستخدم الأمر التالي لإنشاء مشروع React جديد:
npx create-react-app digital-ocean-tutorial
إذا تم إنشاء التطبيق بنجاح، سيتم عرض الإخراج التالي:
...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd digital-ocean-tutorial
npm startسيؤدي هذا إلى إنشاء دليل جديد بنفس اسم مشروعك، والذي يحتوي على جميع الملفات الضرورية لمشروع React الجديد الخاص بك.
بمجرد اكتمال عملية الإعداد، انتقل إلى دليل مشروع React الجديد عن طريق تشغيل الأمر التالي:
cd digital-ocean-tutorial
ثم قم بتشغيل الأمر التالي لبدء تشغيل خادم التطوير:
npm start
إذا سارت الأمور على ما يرام، فيجب أن يبدأ الخادم وسيتم عرض الإخراج التالي:
Compiled successfully!
You can now view digital-ocean-tutorial in the browser
http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.سيؤدي هذا إلى تشغيل مشروع React الجديد في متصفح الويب الافتراضي لديك. ستظهر لك الآن رسالة "مرحبًا بك في React"، مما يعني أن مشروعك مُعدّ بشكل صحيح وجاهز للبدء في بناء تطبيقك الرائع القادم!
مع CRA، يمكنك التركيز على كتابة التعليمات البرمجية دون القلق بشأن إعداد بيئة التطوير الخاصة بك وتكوينها.
الآن بعد أن قمت بإعداد مشروع React الخاص بك، دعنا نلقي نظرة على الطرق المختلفة التي يمكننا من خلالها تحسين طلبات الخادم باستخدام خطافات React.
مزامنة المكونات باستخدام خطاف UseEffect
يتيح خطاف useEffect في React للمطورين مزامنة مكوّن مع نظام خارجي، مثل الخادم، من خلال معالجة التأثيرات الجانبية مثل جلب البيانات، بطريقة فعّالة ومفهومة. من أكثر استخدامات خطاف useEffect شيوعًا إرسال طلبات الخادم وتحديث حالة المكوّن.
إحدى طرق استخدام هوك useEffect لطلبات الخادم هي استدعاء دالة تُنفّذ الطلب داخل هوك useEffect. يجب أن تستخدم هذه الدالة واجهة برمجة التطبيقات Fetch أو مكتبة مثل Axios لتنفيذ الطلب، ثم تُحدّث حالة المكوّن ببيانات الاستجابة باستخدام هوك setState.
لنلقِ نظرة على مثال لكيفية استخدام خطاف useEffect لجلب البيانات من واجهة برمجة تطبيقات بديلة بتنسيق JSON وتحديث حالة المكوّن. انتقل إلى ملف app.js، داخل مجلد src الخاص بمشروعك، واحذف الكود الافتراضي واستبدله بالمقتطف التالي:
import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setData(data);
}
fetchData();
}, []);
return (
<div>
{data.map((item) => (
<div key={item.id}>
<h2>- {item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
);
}
export default MyComponentفي المثال أعلاه، يُستدعى هوك useEffect بمصفوفة تبعيات فارغة، أي أنه يُنفَّذ فقط عند العرض الأولي للمكون. تُهيَّأ حالة المكون بمصفوفة فارغة، وتُستدعى دالة fetchData داخل هوك useEffect لإرسال طلب إلى الخادم وتحديث الحالة ببيانات الاستجابة.
إذا قمت بتحديث المتصفح أو التطبيق، فيجب أن تتمكن من رؤية نتيجة الطلب المقدم في عينة التعليمات البرمجية أعلاه كما هو موضح في الصورة أدناه:
من المهم ملاحظة أن عمليات إعادة العرض غير الضرورية قد تُسبب مشاكل في الأداء، لذا يُفضل تقليل عدد عمليات العرض الناتجة عن استخدام تأثير التبعية. إحدى طرق تحقيق ذلك هي تضمين متغيرات الحالة والخصائص التي يستخدمها تأثير التبعية فقط في مصفوفة التبعيات.
من المهم أيضًا معالجة الأخطاء بشكل صحيح عند طلب الخادم لمنع تعطل المكون. يمكن معالجة الأخطاء بإضافة كتلة try-catch في دالة fetchData واستخدام هوك setError لتحديث حالة المكون برسالة خطأ. بهذه الطريقة، يمكن للتطبيق عرض رسالة خطأ للمستخدم في حال حدوث مشكلة.
من خلال اتباع أفضل الممارسات، يمكنك التعامل بثقة مع طلبات الخادم في مكون React وإنشاء تجربة مستخدم أفضل.
تحسين أداء طلب الخادم باستخدام خطاف useMemo
يُعدّ خطاف useMemo في React أداةً لتحسين الأداء، تُمكّن المطورين من حفظ البيانات من خلال تخزين نتائج العمليات الحسابية، بحيث يُمكن إعادة استخدامها دون الحاجة إلى تكرار العملية. يُعدّ هذا مفيدًا بشكل خاص عند العمل مع طلبات الخادم، إذ يُساعد على منع إعادة العرض غير الضرورية، ويُحسّن أداء المكونات.
إحدى طرق استخدام هوك useMemo في سياق طلب الخادم هي تذكر البيانات المُعادة من الخادم واستخدامها لتحديث حالة المكوّن. يمكن القيام بذلك عن طريق استدعاء هوك useMemo داخل هوك useEffect، مع تمرير بيانات الخادم كمعامل أول ومصفوفة تبعيات كمعامل ثاني. يجب أن تحتوي مصفوفة التبعيات على أي خصائص أو متغيرات حالة تُستخدم لحساب البيانات المخزنة.
لتجربة هذه الطريقة باستخدام خطاف useMemo لحفظ البيانات من واجهة برمجة تطبيقات JSON البديلة وتحديث حالة المكون، استبدل الكود الموجود في app.js بمقتطف الكود التالي:
import { useEffect, useState, useMemo } from 'react';
function MyComponent({ postId }) {
const [data, setData] = useState({});
useEffect(() => {
async function fetchData() {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
const data = await response.json();
setData(data);
}
fetchData();
}, [postId]);
const title = useMemo(() => data.title, [data]);
return (
<div>
<h2>{title}</h2>
</div>
);
}
export default MyComponentفي المثال أعلاه، يُستدعى هوك useEffect مع استخدام postId كمصفوفة تبعية، مما يعني أنه سيُنفَّذ كلما تغيرت خاصية postId. تُهيَّأ حالة المكوِّن بكائن فارغ، ثم تُستدعى دالة fetchData داخل هوك useEffect لإرسال طلب إلى الخادم وتحديث الحالة ببيانات الاستجابة. داخل المكوِّن، نستخدم هوك useMemo للحفاظ على العنوان بتمرير data.title كمعامل أول و[data] كمعامل ثانٍ، بحيث يُحدَّث العنوان كلما تغيرت البيانات.
فيما يلي نتيجة الطلب في عينة التعليمات البرمجية أعلاه:
تجدر الإشارة إلى أن useMemo ليس ضروريًا دائمًا، ويجب استخدامه فقط عندما يعتمد المكوّن على خصائص أو حالات قد تتغير باستمرار وتتطلب تكاليف حسابية باهظة. قد يؤدي الاستخدام غير الصحيح لـ useMemo إلى تسربات في الذاكرة ومشاكل أخرى في الأداء.
إدارة حالة طلب الخادم باستخدام useReducer Hook
يُشبه خطاف useReducer في React خطاف useState، ولكنه يسمح بإدارة حالة أكثر تعقيدًا وتوقعًا. بدلًا من تحديث الحالة مباشرةً، يُتيح لك useReducer إرسال إجراءات تصف تحديث الحالة، بالإضافة إلى دالة مُخفِّضة تُحدِّث الحالة بناءً على إجراء الإرسال.
من فوائد استخدام خطاف useReducer لمعالجة طلبات الخادم تحسين فصل المهام. فبدلاً من تشتت منطق معالجة طلبات الخادم في جميع أنحاء المكوّن، يمكن تضمينه في دالة reducer، مما يُسهّل فهم شيفرة المكوّن وصيانتها.
لتجربة هذا النهج باستخدام خطاف useReducer لتذكر البيانات من واجهة برمجة تطبيقات متغير JSON وتحديث حالة المكون، استبدل الكود الموجود في app.js بمقتطف الكود التالي:
import { useReducer } from 'react';
const initialState = { data: [], loading: false, error: '' };
const reducer = (state, action) => {
switch (action.type) {
case 'FETCH_DATA_REQUEST':
return { ...state, loading: true };
case 'FETCH_DATA_SUCCESS':
return { ...state, data: action.payload, loading: false };
case 'FETCH_DATA_FAILURE':
return { ...state, error: action.payload, loading: false };
default:
return state;
}
};
function MyComponent() {
const [state, dispatch] = useReducer(reducer, initialState);
const fetchData = async () => {
dispatch({ type: 'FETCH_DATA_REQUEST' });
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
}
};
return (
<div>
{state.loading ? (
<p>Loading...</p>
) : state.error ? (
<p>{state.error}</p>
) :
<div>
{state.data.map((item) => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
)}
<button onClick={fetchData}>Fetch Data</button>
</div>
);
}
export default MyComponentفي مقتطف الشفرة المرفق، يُستدعى هوك useReducer باستخدام دالة المُخفِّض، وتُمرَّر الحالة الأولية كمُعامل. تُهيَّأ حالة المُكوِّن بمصفوفة فارغة كبيانات، ومتغير تحميل مُعيَّن على القيمة "خطأ"، ومتغير رسالة خطأ فارغ. عند النقر على زر "جلب البيانات"، تُنفَّذ دالة fetchData، التي تُرسِل إجراءات استجابةً لحالة الطلب، والتي قد تكون ناجحة أو فاشلة.
فيما يلي نتيجة الطلب المقدم في عينة التعليمات البرمجية أعلاه:
بالإضافة إلى ذلك، يُتيح خطاف useReducer إدارةً أكثر كفاءةً للحالات المعقدة. يُسهّل استخدام الإجراءات والمُخفِّضات لتحديث الحالة التحكم في تأثير الإجراءات المختلفة على أجزاء مختلفة من الحالة، مما يُسهّل إضافة ميزات جديدة واستكشاف الأخطاء وإصلاحها في التطبيق.
نتيجة
باختصار، غطّى هذا البرنامج التعليمي أساسيات تحسين طلبات الخادم باستخدام خطافات React. تُعد خطافات React ميزة فعّالة في مكتبة React، تُمكّن المطورين من استخدام خصائص الحالة وميزات React الأخرى في المكونات الوظيفية. باستخدام خطافات useEffect وuseMemo وuseReducer، يُمكنك بسهولة إدارة طلبات الخادم وتحسينها، مما يُؤدي إلى أوقات تحميل أسرع، وأداء مُحسّن، وتجربة مستخدم أفضل. باتباع التقنيات المُوضحة في هذا البرنامج التعليمي، يُمكنك تحسين أداء تطبيقات الويب وتجربة المستخدم.
الآن حان دورك لتجربة هذه التقنيات في مشاريعك الخاصة. كخطوة تالية، يمكنك استكشاف مواضيع أكثر تقدمًا مثل ترقيم الصفحات والتخزين المؤقت. تذكر أن خطافات React تقنية متطورة باستمرار، لذا ابقَ على اطلاع بأحدث التحديثات وأفضل الممارسات لمواصلة تحسين طلبات خادمك.
