useContext در React – انجمن DEV 👩‍💻👨‍💻

من به تازگی کار روی پروژه دیگری را به پایان رسانده ام و یکی از الزامات پروژه حفظ وضعیت کاربر در جلو بود.
پایان یافتن با useContext. بنابراین، مجبور شدم نحوه استفاده را دوباره یاد بگیرم useContext. می خواستم برخی از چیزهایی را که یاد گرفتم به اشتراک بگذارم.

به طور معمول حالت ما در کامپوننتی ذخیره می شود که تمام اجزایی که نیاز به دسترسی به آن دارند می توانند به راحتی به آن دسترسی پیدا کنند. در این پروژه، از آنجایی که بیشتر کامپوننت های من نیاز به دسترسی به کاربر داشتند، a userContext. برای شروع، به یک فایل نیاز دارید تا زمینه خود را در آن ذخیره کنید context پوشه در من src پوشه و الف user.js فایل در context پوشه سپس، زمینه و ارائه دهنده زمینه را ایجاد کنید.
زمینه را ایجاد کنید

const UserContext = React.createContext();

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

function UserProvider({ children }) {
  return <UserContext.Provider value={{ user, setUser }}>{children}</UserContext.Provider>;
}

ارزش زمینه ای است که من از آن عبور می کنم و در دسترس فرزندان ارائه دهنده خواهد بود. اکنون که ایجاد شده است باید به برنامه منتقل شود. برای انجام این کار، من وارد می کنم UserProviderوارد برنامه شده و اجزا را در آن قرار دهید UserProvider. همچنین دیگر نیازی به پاس کردن ندارم user و setUser به کامپوننت می چسبد.

...
import { UserProvider } from "../context/user";

function App() {
  return(
    <UserProvider>
      <AComponent />
    </UserProvider>
  )
}
...

اکنون، باید زمینه را به مؤلفه ای که قرار است از آن استفاده کنم اضافه کنم.

import React, { useContext } from "react";
import { UserContext } from "../context/user";

function AComponent() {
  const { user, setUser } = useContext(UserContext);

  {now you have access to your context values here}

  return (
    {and here too}
  )
}

و این روشی است که شما از زمینه برای ذخیره وضعیت در سطح جهانی استفاده می کنید. یکی از چیزهایی که برای من دردسر زیادی ایجاد کرد این بود که وقتی حالت کاربری خود را مقداردهی اولیه می کردم، آن را با یک آرایه خالی به جای null مقداردهی اولیه کردم. در حالی که احتمالاً می‌توانستم کد را بازنویسی کنم تا راه اول کار کند، این برای من دردسر زیادی ایجاد می‌کرد و تغییر آن به null واقعاً به من کمک کرد.
اینطوری نه،

const [user, setUser] = useState([])

اما مثل این

const [user, set user] = useState(null)