React use() Hook: چگونه آن را اعمال کنیم و چرا

این قلاب جدید می تواند به ساده سازی بسیاری از کدهای دیگ بخار کمک کند.

برنامه‌های React که توسعه می‌دهید اغلب داده‌ها را از یک API خارجی دریافت می‌کنند، و تیم React مطمئن شده است که این نیاز را برآورده کرده است. قلاب use() فرآیند واکشی داده ها را ساده می کند.

با استفاده از این قلاب، مقدار کد دیگ بخار مورد نیاز برای تعریف وعده ها و به روز رسانی وضعیت برنامه را کاهش می دهید. همه چیز را در مورد قلاب use() React و نحوه استفاده از آن در پروژه های React خود بیاموزید.

جزء اصلی

به عنوان مثال مولفه زیر را در نظر بگیرید:

import {useEffect, useState} from "react"

export function Data({ 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 ? (
    <h1>Loading...</h1>
  ) : isError ? (
    <h1>Error</h1>
  ) : (
    <pre>{JSON.stringify(data, null, 2)}</pre>
  )
}

هنگامی که React این کامپوننت را رندر کرد، API را با استفاده از fetch() مصرف می کند. سپس در صورت موفقیت‌آمیز بودن درخواست، داده‌ها را در وضعیت مؤلفه ذخیره می‌کند یا اگر اینطور نبود، متغیر isError را روی true تنظیم می‌کند.

بسته به وضعیت، سپس داده های API یا پیام خطا را ارائه می دهد. در حالی که درخواست API در حال تعلیق است، یک متن “بارگیری…” را در صفحه نشان می دهد.

پیاده سازی useHook().

جزء بالا کمی دست و پا گیر است زیرا پر از کد دیگ بخار است. برای حل این مشکل، قلاب use() را وارد کنید و کد خود را تغییر دهید.

با استفاده از هوک () می توانید مولفه فوق را به دو خط کد کاهش دهید. اما قبل از انجام این کار، توجه داشته باشید که این قلاب نسبتاً جدید است، بنابراین فقط می توانید از آن در نسخه آزمایشی React استفاده کنید. بنابراین مطمئن شوید که از آن نسخه استفاده می کنید:

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

...

اکنون برای استفاده از قلاب آماده هستید و با جایگزین کردن واردهای useState و useEffect فقط با استفاده از آن شروع کنید:

import {use} from "react"

در داخل کامپوننت Data، تنها چیزی که قرار است نگه دارید درخواست واکشی است. اما شما باید درخواست واکشی را در قلاب use() خود قرار دهید. داده های JSON یا یک خطا را برمی گرداند. سپس پاسخ را روی متغیری به نام داده تنظیم کنید:

export function Data({ url }) {
  const data = use(fetch(url).then(res => res.json()))

  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

همین! همانطور که می بینید، کد بالا کامپوننت را تنها به دو خط کد کاهش می دهد. این نشان می دهد که قلاب use() چقدر می تواند در سناریوهایی مانند این مفید باشد.

وضعیت بارگیری (تعلیق)

بخش مهمی از قلاب use() رسیدگی به حالت‌های بارگذاری و خطا است. می توانید این کار را در مولفه والد Data انجام دهید.

برای پیاده سازی عملکرد بارگذاری، مولفه Data را با Suspense بپیچید. این کامپوننت یک پایه پشتیبان می گیرد که هر زمان که در حالت بارگیری هستید آن را ارائه می دهد:

export default function App () {
  const [url, setUrl] = useState(URL.USERS)

  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>
        <Data url={url} />
      </Suspense>
    </>
  )
}

قلاب use() در مؤلفه Data این تعلیق را برای بارگذاری فعال می کند. در حالی که این وعده هنوز حل نشده است، مؤلفه App حالت بازگشتی را ارائه می دهد. سپس، هنگامی که مؤلفه Data داده های پاسخ را دریافت می کند، محتوا را به جای حالت بارگذاری ارائه می دهد.

مدیریت خطا با مرز خطا

وقتی نوبت به کشف خطاها می رسد، باید بدانید که مرز خطا چگونه کار می کند تا از آن استفاده کنید. به طور معمول، زمانی که با Suspense کار می کنید، از آن استفاده خواهید کرد.

نمونه ای از مرز خطا در کد زیر است:

import React from "react"

class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
      error
    }
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback
    }

    return this.props.children
  }
}

export default ErrorBoundary;

این مثال Error Boundary دارای یک شیء حالت است که وضعیت خطا و میزان خطا را ردیابی می کند. بعد، حالت مشتق شده از آن خطا را دریافت می کند. تابع render() در صورت وجود خطایی، عنصر بازگشتی را نمایش می دهد. در غیر این صورت، هر آنچه را که در داخل است، رندر می کند.

مولفه فوق تقریباً مانند Suspense عمل می کند. بنابراین، در کامپوننت App، می‌توانید همه چیز را در داخل مؤلفه ErrorBoundary مانند زیر بپیچید:

export default function App () {
  const [url, setUrl] = useState(URL.USERS)

  return (
    <>
      <ErrorBoundary fallback={<div>Oops! There's an error.</div>}>
        <Suspense fallback={<div>Loading...</div>}>
          <Data url={url} />
        </Suspense>
      </ErrorBoundary>
    </>
  )
}

اگر هر کدام از کدهای تو در تو خطایی ایجاد کند، Error Boundary شما آن را از طریق getDerivedStateFromError() دریافت می کند و وضعیت را به روز می کند، که به نوبه خود متن بازگشتی، “اوه! یک خطا وجود دارد.”

قوانین هوک use().

بنابراین قلاب use() می تواند به کاهش مقدار کد دیگ بخار کمک کند و بارگذاری و حالت های خطا را تسهیل می کند. اما قلاب use() کاربرد بسیار مفید دیگری نیز دارد.

بیایید فرض کنیم که شما در حال ارسال یک بولی shouldFetch به عنوان پایه به مولفه Data هستید، و تنها در صورتی می خواهید درخواست واکشی را اجرا کنید که shouldFetch درست باشد.

شما نمی توانید قلاب های سنتی React را در داخل یک دستور if قرار دهید، اما قلاب use() متفاوت است. می توانید تقریباً در هر جایی که می خواهید از آن استفاده کنید (در یک حلقه for، دستور if و غیره پیچیده شده است):

export function Data({ 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>
}

با کد بالا، React به طور پیش فرض “داده های پیش فرض” را ارائه می دهد. اما اگر به آن بگویید که با ارسال prop shouldFetch از والد واکشی انجام دهد، درخواست را انجام می دهد و پاسخ را به داده ها اختصاص می دهد.

یکی دیگر از چیزهای جالب در مورد قلاب use() این است که لازم نیست فقط از آن با وعده استفاده کنید. به عنوان مثال، در زمان نوشتن، می توانید در یک زمینه عبور کنید:

export function Data({ url, shouldFetch }) {
  let data = "Default data"

  if (shouldFetch) {
    const data = use(Context)
  }

  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

در حالی که استفاده از useContext () کاملاً خوب است، نمی‌توانید از آن در داخل اگر دستورات و حلقه‌ها استفاده کنید. اما می‌توانید قلاب use() را داخل دستورات if و حلقه‌های for قرار دهید.

بهترین روش ها برای React Hooks

قلاب use() تنها یکی از قلاب های متعدد ارائه شده توسط React است. آشنایی با این قلاب ها و بهترین روش استفاده از آنها برای بهبود دانش React شما ضروری است.

منبع مقاله