غالبًا ما تجلب تطبيقات React التي تقوم بتطويرها البيانات من واجهة برمجة تطبيقات خارجية، وقد حرص فريق React على تلبية هذه الحاجة. ال يستخدم() يعمل الخطاف على تبسيط عملية جلب البيانات.

باستخدام هذا الخطاف، ستقلل كمية التعليمات البرمجية المعيارية التي تحتاجها لتحديد الوعود وتحديث حالة التطبيق. تعلم كل شيء عن React يستخدم() الخطاف وكيفية استخدامه في مشاريع React الخاصة بك.

المكون الأساسي

النظر في المكون التالي، على سبيل المثال:

import {useEffect, useState} from"react"
exportfunctionData({ url }) {
const [isLoading, setIsLoading] = useState(true)
const [isError, setIsError] = useState(false)
const [data, setData] = useState()
 useEffect(() => {
 setIsError(false)
 setIsLoading(true)
 setData(undefined)
 fetch(url)
 .then(res => res.json())
 .then(setData)
 .catch(() => setIsError(true))
 .finally(() => setIsLoading(false))
 })
return isLoading? (
Loading...</h1>
 ): isError? (

Error</h1>
 ): (
{JSON.stringify(data, null, 2)}</pre>
 )
}

بمجرد أن تعرض React هذا المكون، فإنه

يستهلك واجهة برمجة التطبيقات باستخدام fetch(). ثم يقوم بعد ذلك إما بحفظ البيانات في حالة المكون إذا كان الطلب ناجحًا، أو يقوم بتعيين خطأ متغير إلى صحيح إذا لم يكن كذلك.

اعتمادًا على الحالة، فإنه يعرض إما بيانات من واجهة برمجة التطبيقات (API) أو رسالة خطأ. أثناء انتظار طلب واجهة برمجة التطبيقات (API)، يظهر النص "جارٍ التحميل..." على الصفحة.

تنفيذ useHook()

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

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

// package.json
"dependencies": {
"react": "experimental",
"react-dom": "experimental"
}
...

أنت الآن جاهز لاستخدام الخطاف، بدءًا من استبدال الخطاف useState و useEffect الواردات مع فقط يستخدم:

import {use} from"react"

داخل بيانات المكون، الشيء الوحيد الذي ستحتفظ به هو طلب الجلب. ولكنك ستحتاج إلى تغليف طلب الجلب داخل ملف يستخدم() خطاف؛ تقوم بإرجاع بيانات JSON أو خطأ. ثم قم بتعيين الاستجابة لمتغير يسمى بيانات:

exportfunctionData({ url }) {
const data = use(fetch(url).then(res => res.json()))
return<pre>{JSON.stringify(data, null, 2)}pre>
}

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

حالة التحميل (التشويق)

جزء مهم من يستخدم() يعالج الخطاف حالات التحميل والخطأ. يمكنك القيام بذلك داخل المكون الأصلي لـ بيانات.

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

exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
 <>
Loading...</div>}>

 </Suspense>
 </>
 )
}

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

معالجة الأخطاء باستخدام حدود الخطأ

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

يوجد مثال لحدود الخطأ في الكود التالي:

import React from"react"
classErrorBoundaryextendsReact.Component{
 state = { hasError: false, error: null }
static getDerivedStateFromError(error) {
return {
 hasError: true,
 error
 }
 }
 render() {
if (this.state.hasError) {
returnthis.props.fallback
 }
returnthis.props.children
 }
}
exportdefault ErrorBoundary;

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

يعمل المكون أعلاه تمامًا مثل Suspense. لذلك، في مكون التطبيق، يمكنك تغليف كل شيء داخل ملف ErrorBoundary مكون مثل ذلك:

exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
 <>
Oops! There's an error.

exportfunctionData({ url, shouldFetch }) {
let data = "Default data"
if (shouldFetch) {
const data = use(fetch(url).then(res => res.json()))
 }
return<pre>{JSON.stringify(data, null, 2)}pre>
}

exportfunctionData({ url, shouldFetch }) {
let data = "Default data"
if (shouldFetch) {
const data = use(Context)
 }
return<pre>{JSON.stringify(data, null, 2)}pre>
}