האפליקציות של React שאתה מפתח לרוב ישאו נתונים מ-API חיצוני, וצוות React דאג לספק את הצורך הזה. ה להשתמש() hook מפשט את תהליך שליפת הנתונים.

באמצעות וו זה, תפחית את כמות קוד ה-boilerplate שאתה צריך כדי להגדיר הבטחות ולעדכן את מצב היישום. למד הכל על React's להשתמש() הוק וכיצד להשתמש בו בפרויקטי 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 מעבד את הרכיב הזה, זה צורכת את ה-API באמצעות fetch(). לאחר מכן הוא שומר את הנתונים למצב של הרכיב אם הבקשה הצליחה, או מגדיר את isError משתנה ל-true אם זה לא היה.

בהתאם למצב, לאחר מכן הוא מציג נתונים מהממשק ה-API או הודעת שגיאה. בזמן שבקשת ה-API ממתינה, היא מציגה טקסט "טוען..." בדף.

המימוש () useHook

הרכיב שלמעלה הוא קצת מסורבל מכיוון שהוא מלא בקוד ה-boilerplate. כדי לפתור בעיה זו, הביאו את להשתמש() חבר ושנה את הקוד שלך.

עם ה- use() hook, אתה יכול לצמצם את הרכיב שלמעלה לשתי שורות קוד בלבד. אבל לפני שתעשה את זה, שים לב שהוו זה די חדש, כך שאתה יכול להשתמש בו רק בגרסה הניסיונית של 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() יכול להיות בתרחישים כמו זה.

מצב טעינה (מתח)

חלק חשוב מה להשתמש() hook מטפל במצבי הטעינה והשגיאה. אתה יכול לעשות זאת בתוך רכיב האב של נתונים.

כדי ליישם את פונקציונליות הטעינה, עטפו את נתונים רכיב עם מֶתַח. רכיב זה לוקח אבזר חלופי שהוא יציג בכל פעם שאתה במצב טעינה:

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

 </Suspense>
 </>
 )
}

ה להשתמש() Hook ברכיב Data מפעיל את המתח הזה לטעינה. בעוד ההבטחה עדיין לא נפתרה, ה אפליקציה הרכיב יציג את מצב החזרה. ואז, כאשר ה נתונים הרכיב מקבל את נתוני התגובה, הוא מציג את התוכן במקום את מצב הטעינה.

טיפול בשגיאות עם גבול שגיאה

כשזה מגיע לתפיסת שגיאות, אתה צריך לדעת כיצד פועל גבול השגיאה להשתמש בזה. בדרך כלל, אתה תשתמש בו כשאתה עובד עם 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;

לדוגמא זו של Error Boundary יש אובייקט מצב שעוקב אחר מצב השגיאה ומהי השגיאה. לאחר מכן, הוא מקבל את המצב הנגזר מאותה שגיאה. ה לְדַקלֵם() הפונקציה מציגה את רכיב ה-fallback אם יש שגיאה. אחרת, הוא מציג את כל מה שנמצא בתוך .

הרכיב שלמעלה עובד די אותו דבר כמו ה-Suspense. אז, ברכיב האפליקציה, אתה יכול לעטוף הכל בתוך Error Boundary רכיב כזה:

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>
}