واکشی Easy React داده با قلاب «use()» جدید

React.use() هنوز یک API ناپایدار است. برای اطلاعات بیشتر، پشتیبانی از وعده‌های React RFC را بررسی کنید. در زمان نوشتن این مطلب، فقط می توانید این API را در Next.js 13 تست کنید.

خوب با این سلب مسئولیت، اجازه دهید در مورد چگونگی صحبت کنیم use() آثار .

به طور خلاصه، این قلاب جدید به شما امکان می دهد کدهای ناهمزمان را در مؤلفه های واکنش سمت کلاینت خود اجرا کنید. می توانید آن را به عنوان نسخه React در نظر بگیرید async / await.

برای درک اینکه چرا می‌خواهد یک تغییر بازی برای واکشی داده‌های سمت کلاینت باشد، اجازه دهید روش قدیمی انجام واکشی داده از سمت مشتری را با استفاده از آن مقایسه کنیم. useEffect() با use().

// returns an array of user objects e.g:
// [ {id:1 name: "Leanne Graham"}, {id:1 name: "Ervin Howell"}] 

export const fetchUsers = async () => {
  const resp = await 
  fetch("https://jsonplaceholder.typicode.com/users");
  const json = await resp.json();
  return json; 
};

'use client'

import { useState, useEffect } from "react";
import { fetchUsers } from "@/fetch-users";


export const OldDataFetchData = () => {

const [usersData, setUsersData] = useState(null);


useEffect(() => {
    if (!usersData) {
        const startFetchingData = async () => {
            const users = await fetchUsers();
            setUsersData(users);
        };
           startFetchingData();
    }

    }, [usersData]);



    if (!usersData) {
        return <>Loading...</>;
    }

    return (
        <>
            {usersData.map((u) => (
                <div key={u.id}>{u.name} </div>
            ))}

        </>
    );

};

این کد اصطلاحی برای اکثر توسعه دهندگان React است. اما برای کسانی که کمتر با React و useEffect شما ممکن است انواع سؤالات را بپرسید:

• چرا تابعی که به آن منتقل می کنید نمی تواند useEffect بودن async?
• چرا نمی توان کل مؤلفه React باشد async?
• چرا باید بررسی کنید userData قبل از تماس startFetchingData()?

پاسخ های فنی برای همه اینها وجود دارد، اما این یک جواب نیست useEffect بنابراین یک پاسخ سریع خواهد بود – زیرا، React. 😅

منظور من این است که این کد بصری برای خواندن نیست، اما ما توسعه دهندگان React به قوانین و ویژگی های آن عادت کرده ایم. useEffect.

حالا بیایید ببینیم چگونه می توان این را دوباره نوشت use() .

'use client'

import { use } from "react";
import { fetchUsers } from "@/fetch-users";

export const NewDataFetchData = () => {

const usersData = use(fetchUsers());

return (
    <>
        {usersData.map((u) => (
            <div key={u.id}>{u.name} </div>
        ))}
    </>
);

};

همین!

باشه دروغ گفتم

اگر می‌خواهید وضعیت بارگیری را مدیریت کنید، به کد کمی بیشتر نیاز است. در مؤلفه سرور والد که از این مؤلفه مشتری استفاده می کند، می توانید آن را در آن قرار دهید Suspense که می تواند یک کامپوننت React را در خود بپذیرد fallback پشتیبانی

// ./app/page.jsx

import { Suspense } from "react";
import { NewDataFetchData } from "@/components/NewDataFetch";  

export default function Home() {
    return (
        <main>
            <Suspense fallback={<>Loading...</>}>
                <NewDataFetchData />
            </Suspense>
        </main>
    );
}

به طور کلی، خواندن و نوشتن بسیار زیباتر است.

یک خاصیت جالب از use قلاب است که می توان آن را مشروط نامید 🤯.

این یک مشکل بزرگ است زیرا ما به طور سنتی هرگز نمی توانستیم از قلاب ها به صورت مشروط استفاده کنیم.

در اینجا مثالی از این است که چگونه این می تواند از روی rfc به نظر برسد.

function Note({id, shouldIncludeAuthor}) {
  const note = use(fetchNote(id));

  let byline = null;
  if (shouldIncludeAuthor) {
    const author = use(fetchNoteAuthor(note.authorId));
    byline = <h2>{author.displayName}</h2>;
  }

  return (
    <div>
      <h1>{note.title}</h1>
      {byline}
      <section>{note.body}</section>
    </div>
  );
}

من برای پایدار شدن این قلاب هیجان زده هستم اما احساسات متفاوتی دارم.

از یک طرف، ارگونومی واکشی داده ها خواهد بود خیلی زیاد بهتر است و ممکن است دیگر نیازی به اعتماد به کتابخانه های شخص ثالث مانند پرس و جوی TanStack نداشته باشیم.

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

اگر می خواهید تست کنید use() برای خودتان، با خیال راحت این جعبه کد را که نمونه‌های کد بالا را اجرا می‌کند، فورک کنید.