نحوه استفاده از … “استفاده”، قلاب جدید React 19

Summarize this content to 400 words in Persian Lang

اجازه دهید ارزش یک Promise یا یک Context را در داخل یک جزء بخوانید

const value = use(resource)

یک مثال کوتاه که می توانیم از آن برای خواندن متن یا وعده مقادیری مانند این استفاده کنیم:

import { use } from “react”;

function MessageComponent ({ messagePromise }) {
const message = use(messagePromise);
const theme = use(ThemeContext);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اگر می‌خواهید به جای خواندن، تماشا کنید، یا می‌خواهید استفاده از متن و وعده‌ها را با رمز عبور کنید، این ویدیو را ببینید

مؤلفه ای که استفاده نامیده می شود باید با آن یکپارچه شود Suspense و به صورت اختیاری error boundaries. در حالی که حل و فصل وعده و گرفتن داده ها از context، بازگشت از Suspense نشان داده خواهد شد. هنگامی که Promise حل شد، مولفه های رندر شده با استفاده از داده های برگردانده شده توسط use API.

اگر وعده گذشت به use رد می شود، بازگشت نزدیکترین مرز خطا نمایش داده می شود.

استفاده از “use” با React Context

تنظیم Context

ابتدا باید اپلیکیشنی را به آن متصل کنیم Context.

فرض کنید می خواهیم یک تم سفارشی، روشن و تاریک تنظیم کنیم. ما باید یک فایل به نام ایجاد کنیم ThemeContext.ts:

// ThemeContext.ts
import { createContext, Dispatch, SetStateAction } from ‘react’;

type Theme = ‘light’ | ‘dark’;

interface IThemeContext {
theme: Theme;
setTheme: Dispatch<SetStateAction<Theme>>;
}

export const ThemeContext = createContext<IThemeContext>({
theme: ‘dark’,
setTheme: () => {},
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

موارد فوق شیء ThemeContext ما را ایجاد می‌کنند، که می‌توانیم آن را از هر فایلی وارد کنیم تا موضوع فعلی را بگیریم و setTheme برای به‌روزرسانی طرح زمینه استفاده خواهد شد. ما به طور پیش‌فرض موضوع را «تاریک» می‌کنیم، زیرا به نظر بسیار جالب‌تر می‌رسد.

سپس برای ذخیره همه زمینه‌های برنامه‌هایمان، a ایجاد می‌کنیم Context.tsx جزء، برای اینکه برنامه ما به خوبی سازماندهی شود:

// Context.tsx
import React, { useState } from ‘react’;
import { ThemeContext } from ‘./ThemeContext’;
import { Theme } from ‘../types’;

export default function Context({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<Theme>(‘dark’);

return (
<ThemeContext.Provider
value={{
theme,
setTheme: setTheme,
}}
>
{children}
ThemeContext.Provider>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما شیء حالت را به ما منتقل می کنیم ThemeContext.Provider، که برای خواندن و به روز رسانی تم از طریق برنامه ما استفاده می شود. در نهایت، برای به هم زدن این همه، ما باید خود را بپیچیم جزء در ما جزء

// index.tsx

// … Other imports etc.
import Context from ‘./Context.tsx’

const root = ReactDOM.createRoot(
document.getElementById(‘root’) as HTMLElement
);
root.render(
<React.StrictMode>
<Context>
<App />
Context>
React.StrictMode>
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در حال حاضر و فرزندان آن (که اساساً کل پروژه ماست) به ما دسترسی خواهند داشت ThemeContext.

قرار دادن “استفاده” برای استفاده با Context

بیایید یک مؤلفه ایجاد کنیم که موضوع برنامه ما را به روز کند! Components/ContextExample.tsx:

// ContextExample.tsx
import { use } from ‘react’;
import { ThemeContext } from ‘../context/ThemeContext’;

export default function ContextExample() {
const { setTheme } = use(ThemeContext);

const handleThemeToggle = () => {
setTheme((prevTheme) => {
if (prevTheme === ‘light’) {
return ‘dark’;
} else {
return ‘light’;
}
});
};

return (
<div>
<button onClick={() => handleThemeToggle()}>Switch Themebutton>
div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما در حال چنگ زدن به setTheme روش از ThemeContext. ما در حال ارائه a که onClick تماس می گیرد handleThemeToggle() که موضوع فعلی را بررسی می کند. اگر در حال حاضر “روشن” است، تم را روی “تاریک” و برعکس تنظیم می کنیم.

با این حال… تا زمانی که آن را وارد نکنیم و برخی از سبک ها را تنظیم نکنیم، کاری انجام نمی دهد. در ما App.tsx:

// App.tsx
// Other imports…
import { ThemeContext } from ‘./context/ThemeContext’;
import ContextExample from ‘./components/ContextExample’;

function App() {
const { theme } = use(ThemeContext);

return (
<div className={`App ${theme}`}>
<ContextExample />
div>
)
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما در حال واردات و عبور هستیم theme از ThemeCotnext به عنوان یک کلاس برای ما App.tsxدر حال بسته بندی . Now we can go into our App.css فایل کنید و چند سبک اضافه کنید تا ببینید آیا تغییر تم ما کار می کند یا خیر!:

/* App.css */
.dark {
background-color: black;
color: white;
}

.light {
background-color: white;
color: black;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زیاد نیست… اما به ما نشان می دهد که آیا از آن استفاده می کنیم use و React Context کاملاً کامل است. ادامه بده! آن دکمه را تغییر دهید.

آیا به آن نگاه خواهید کرد؟! زشت، اما کاربردی. این به استفاده از “استفاده” با React Context پایان می دهد. به خواندن ادامه دهید اگر می خواهید ببینید آیا در عمل با یک وعده!

استفاده از “استفاده” با یک وعده Async

اول از همه، ما یک را ایجاد می کنیم server اقدام، برای اطلاعات بیشتر در مورد عملکردهای سرور و نحوه استفاده از آنها با AWS این ویدیو را ببینید.

یک فایل جدید به نام ایجاد کنید lib.ts:

// lib.ts
‘use server’;

export const fetchMessage = async () => {
await new Promise((resolve) => setTimeout(resolve, 2500));
return ‘Secret Message Recieved!’;
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما در اینجا یک درخواست API را “جعل” می کنیم، در یک برنامه واقعی، این یک تماس با یک پایگاه داده یا یک درخواست واکشی به برخی API برای گرفتن برخی از داده های خارجی است. اما با استفاده از یک await، Promise() و setTimeout ما می توانیم خودمان را بسازیم Promise در این مثال 2.5 ثانیه طول می کشد.

ما باید چند جزء ایجاد کنیم تا بتوانیم این کار را انجام دهیم، یک لفاف که از آن استفاده خواهد شد Suspense سپس داخل آن کامپوننت و کامپوننت دیگری که استفاده خواهد شد use برای گرفتن نتیجه ما fetchMessage() قولی که همین الان ایجاد کردیم lib.ts.

این دو فایل جدید را ایجاد کنید Components/MessageContainer.tsx & Components/PromiseExample.tsx:

MessageContaienr.tsx:

// MessageContainer.tsx
import { Suspense } from ‘react’;
import PromiseExample from ‘./PromiseExample’;

export default function MessageContainer({
messagePromise,
}: {
messagePromise: Promise<string>;
}) {
return (
<Suspense fallback={<p>Waiting for the message…p>}>
<PromiseExample messagePromise={messagePromise} />
Suspense>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را inside the fallback is what will display while we wait for our Promise to resolve.

Now for the PromiseExample.tsx file:

// PromiseExample
‘use client’;

import { use } from ‘react’;

export default function PromiseExample({
messagePromise,
}: {
messagePromise: Promise<string>;
}) {
const messageConent = use(messagePromise);
return <p>Here’s the message: {messageConent}p>;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا جادو اتفاق می افتد، ما از آن استفاده می کنیم use جزء برای دریافت مقدار وعده حل‌شده، رشته «پیام مخفی دریافت شد» را در ما برمی‌گردانیم. fetchMessage() قول بده چقدر آسان است؟ use() و مطمئن شوید که کار با داده های ناهمزمان را آسان کنید…

بیایید خودمان را وصل کنیم MessageContainer به App.tsx بنابراین ما می توانیم آن را در عمل ببینیم!App.tsx:

// App.tsx

// Other imports…
import { fetchMessage } from ‘./lib’;
import MessageContainer from ‘./components/MessageContainer’;

function App() {
const { theme } = use(ThemeContext);

const [messagePromise, setMessagePromise] = useState<Promise<string> | null>(
null
);

const handleFetchMessage = () => {
setMessagePromise(fetchMessage());
};

return (
<div className={`App ${theme}`}>
<ContextExample />
<button onClick={() => handleFetchMessage()}>Send Messagebutton>
{messagePromise && <MessageContainer messagePromise={messagePromise} />}
div>
)
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما یک شیء حالت جدید برای ذخیره سازی ایجاد می کنیم messagePromise، آن را به طور پیش فرض تنظیم کنید null. این به این دلیل است که اگر هنوز آن را درخواست نکرده‌ایم، می‌توانیم پیام را پنهان کنیم.را handleFetchMessage() تابع به سادگی تنظیم می کند messagePromise وضعیت حاوی پیام Promise از طرف ما باشد fetchMessage عمل سرور یک را ایجاد کردیم برای فراخوانی handleFetchMessage. در نهایت، ما به صورت مشروط نشان می دهیم در FE ما بسته به وضعیت messagePromise، این بدان معنی است که فقط ما را نشان می دهد جزء یک بار fetchMessage() وعده آغاز شده است.

بنابراین پس از زدن این دکمه: handleFetchMessage()}>Send Message. ما به خودمان زنگ می زنیم fetchMessage() اقدام سرور، بازگشتی در Suspense در حالی که تحریک می شود use() منتظر است تا وعده حل شود.

هنگامی که Promise حل شد، از داده هایی که از Promise استخراج کردیم با استفاده از آن استفاده می کنیم use قلاب کنید و آن را به FE ما نشان دهید:

وای…خیلی بود امیدوارم منطقی باشه! بخش کلیدی که هنگام کار با آن باید به خاطر بسپارید use و Promises این است که کامپوننتی را که استفاده می‌کنید بسته بندی کنید use در یک Suspense و بعد از آن، به سادگی تماس گرفتن است use(promiseIWantTheValueOf)

import { use } from "react";

function MessageComponent ({ messagePromise }) {
    const message = use(messagePromise);
    const theme = use(ThemeContext);
}

// ThemeContext.ts
import { createContext, Dispatch, SetStateAction } from 'react';

type Theme = 'light' | 'dark';

interface IThemeContext {
  theme: Theme;
  setTheme: Dispatch<SetStateAction<Theme>>;
}

export const ThemeContext = createContext<IThemeContext>({
  theme: 'dark',
  setTheme: () => {},
});

// Context.tsx
import React, { useState } from 'react';
import { ThemeContext } from './ThemeContext';
import { Theme } from '../types';

export default function Context({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('dark');

  return (
    <ThemeContext.Provider
      value={{
        theme,
        setTheme: setTheme,
      }}
    >
      {children}
    ThemeContext.Provider>
  );
}

// index.tsx

// ... Other imports etc.
import Context from './Context.tsx'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Context>
      <App />
    Context>
  React.StrictMode>
);

// ContextExample.tsx
import { use } from 'react';
import { ThemeContext } from '../context/ThemeContext';

export default function ContextExample() {
  const { setTheme } = use(ThemeContext);

  const handleThemeToggle = () => {
    setTheme((prevTheme) => {
      if (prevTheme === 'light') {
        return 'dark';
      } else {
        return 'light';
      }
    });
  };

  return (
    <div>
      <button onClick={() => handleThemeToggle()}>Switch Themebutton>
    div>
  );
}

if (isAdmin) {
  use(getAllUsers)
} else {
  use(getUsersInMyAccount)
}