زمینه API + TypeScript: چگونه می توان در React از حفاری جلوگیری کرد

عبور از غرفه ها در بسیاری از سطوح مؤلفه ها – همچنین به عنوان شناخته می شود حفاری – می تواند به سرعت برنامه React شما را برای حفظ و درک سخت تر کند.

خبر خوب؟ واکنش API متن می تواند کمک کند – و با شرح، می توانید آن را کاملاً از نوع ایمن کنید.

در این پست ، من به شما نشان می دهم که چگونه می توانید با استفاده از React + TypeScript ، زمینه ای را از ابتدا ایجاد کنید ، و اینکه چگونه به تمیز نگه داشتن کد شما کمک می کند.

✅ مشکل: حفاری در همه جا

این سناریو را تصور کنید:

• شما یک جزء عمیقاً تو در تو دارید.
• شما باید از طریق چندین لایه ، داده های مشابه (مانند اطلاعات کاربر یا موضوع) را منتقل کنید.

بدون زمینه ، شما در نهایت چنین کاری را انجام می دهید:

function App() {
  const user = { name: 'Alice' };
  return <Page user={user} />;
}

function Page({ user }: { user: { name: string } }) {
  return <Sidebar user={user} />;
}

function Sidebar({ user }: { user: { name: string } }) {
  return <UserInfo user={user} />;
}

function UserInfo({ user }: { user: { name: string } }) {
  return <p>Hello, {user.name}!p>;
}

هر مؤلفه موجود در زنجیره باید دریافت کند و user prop اینجاست زمینه می درخشد

💡 راه حل: API Context React React

ما می توانیم ایجاد کنیم usercontext و به داده های کاربر از هر مؤلفه دسترسی پیدا کنید – نیازی به حفاری نیست.

مرحله 1: زمینه و انواع را ایجاد کنید

// UserContext.tsx
import { createContext, useContext } from 'react';

export type User = {
  name: string;
};

export const UserContext = createContext<User | null>(null);

export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
};

مرحله 2: یک مؤلفه ارائه دهنده ایجاد کنید

// UserProvider.tsx
import { User, UserContext } from './UserContext';

export function UserProvider({ children }: { children: React.ReactNode }) {
  const user: User = { name: 'Alice' }; // this could come from API or auth

  return (
    <UserContext.Provider value={user}>
      {children}
    UserContext.Provider>
  );
}

مرحله 3: از آن در برنامه خود استفاده کنید

// App.tsx
import { UserProvider } from './UserProvider';
import { Page } from './Page';

export default function App() {
  return (
    <UserProvider>
      <Page />
    UserProvider>
  );
}

و اکنون ، در هیچ مؤلفه تو در تو:

// UserInfo.tsx
import { useUser } from './UserContext';

export function UserInfo() {
  const user = useUser();
  return <p>Hello, {user.name}!p>;
}

نیازی به عبور نیست user از طریق چندین لایه – فقط آن را مستقیماً از متن مصرف کنید.

⚙ چرا این رویکرد خوب کار می کند

• دولت متمرکز بدون کتابخانه های جهانی
• اجزای تمیز و جدا شده
• کاملاً از نوع با Typescript ایمن
• قابل استفاده مجدد در چندین مؤلفه

🧠 نکاتی برای استفاده موثر از متن

• تقسیم زمینه به ارائه دهندگان متمرکز کوچک (به عنوان مثال ، UserContextبا ThemeContextبا CartContext)
• فقط قسمت هایی از درخت را که به آن داده ها نیاز دارند بپیچید
• برای بهتر DX با قلاب های سفارشی ترکیب کنید (useUserبا useCart، و غیره)
• از قرار دادن داده های عمیق پویا (مانند مقادیر سریع در حال تغییر) در متن خودداری کنید

thoughts افکار نهایی

استفاده از API زمینه با TypeScript روشی قدرتمند برای جلوگیری از حفاری و نگه داشتن کد React شما است.

این الگوی ساده ، مقیاس پذیر و به طور گسترده در برنامه های تولید استفاده می شود.

👉 آیا در پروژه های React خود از زمینه استفاده می کنید؟ الگوی رفتن به شما برای جلوگیری از حفاری پیش بینی چیست؟ بیایید بحث کنیم! 👇

🔗 برای واکنش بیشتر + نکات مربوط به Typescript من را دنبال کنید!