مدیریت دولت در جبهه: درک API زمینه

مدیریت دولت چیست

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

حالت در یک برنامه جبهه چیست؟

حالت هرگونه اطلاعاتی است که در هنگام تعامل با برنامه با گذشت زمان تغییر می کند. یک مثال متن تایپ شده در یک قسمت جستجو است. مثال دیگر این است که وقتی روی یک دکمه کلیک می کنیم و یک معین باز می شود.

تفاوت بین دولت محلی و دولت جهانی

حالت محلی محدود به یک مؤلفه واحد است ، مانند دکمه ای که هنگام کلیک تغییر رنگ می کند.

Global State توسط چندین مؤلفه ، مانند داده های کاربر که در طول برنامه قابل دسترسی هستند به اشتراک گذاشته می شود.

مثال ساده با استفاده از ما

ضد کشور محلی است. این فقط بر مؤلفه پیشخوان تأثیر می گذارد.

import { useState } from 'react';

function Counter() {
  const [counter, setCounter] = useState(0);

  return (
    

      
You clicked {counter} times
       setCounter(counter + 1)}>Click
    
  );
}

چرا ماستاسیون گاهی اوقات کافی نیست؟

حال برنامه ای را با چندین مؤلفه تصور کنید که نیاز به دسترسی یا اصلاح همان داده ها دارند. این جایی است که مشکلات مربوط به استفاده از ما شروع می شود ، مانند انتقال بسیاری از غرفه ها از یک مؤلفه به مؤلفه دیگر. ما باید حالت را به یک مؤلفه مشترک والدین بلند کنیم ، که باعث می شود ساختار کد برای مقیاس و حفظ آن سخت باشد.

مثال ساده از مشکل:

function App() {
  const [user, setUser] = useState(null);

  return (
    <>
      

      
      
    >
  );
}

اگر شما نیاز به تغییر کاربر در داشبورد دارید ، ما نیز باید SetUser را منتقل کنیم ، و اینجاست که همه چیز در پروژه های بزرگتر کثیف می شود. به همین دلیل راه حل هایی مانند زمینه API ، Redux و Zustand به مرحله اجرا در می آیند ، زیرا آنها با ارائه وضعیت جهانی به روشی سازمان یافته ، این مشکلات را حل می کنند.

چگونه API زمینه مشکل را حل می کند؟

بازگشت به مثال قبلی ، کجا user باید از آنجا عبور کرد props برای چندین مؤلفه ، با API زمینه ، می توانیم زمینه ای ایجاد کنیم ، مقدار زمینه را در یک مؤلفه والدین ارائه دهیم و مقدار را در هر مؤلفه کودک مصرف کنیم.

مثال اساسی با API زمینه

ایجاد UserContext.js متن با استفاده از createContextبشر

import { createContext } from 'react';

export const UserContext = createContext(null);

پس از ایجاد زمینه خود ، ما مؤلفه اصلی خود را با provider، به اشتراک گذاری داده ها از طریق value خاصیت

// App.js
import { useState } from 'react';
import { UserContext } from './UserContext';
import Header from './Header';
import Dashboard from './Dashboard';

function App() {
  const [user, setUser] = useState({ name: 'John' });

  return (
    
      

      
    
  );
}

استفاده در هر مؤلفه:

// components/Header.js
import { useContext } from 'react';
import { UserContext } from '../context/UserContext';

function Header() {
  const { user } = useContext(UserContext);

  return (
    

      
Welcome, {user.name}!
    
  );
}

export default Header;

مزایای استفاده از API زمینه

• ما به کتابخانه های خارجی احتیاج نداریم زیرا برای واکنش به بومی است.

• عالی برای داده های مشترک ساده مانند موضوع ، زبان و احراز هویت.

• ما از عبور غرفه ها در یک زنجیره جلوگیری می کنیم و برنامه را تمیز و سازماندهی می کنیم.

معایب و محدودیت ها

• هنگامی که مقدار یک زمینه تغییر می کند ، تمام مؤلفه هایی که از آن متن استفاده می کنند ، دوباره ارائه می شوند ، حتی اگر تنها بخشی از دولت تغییر کرده باشد.
• عدم وجود ابزار اشکال زدایی ، میانه های میانه و مدیریت اقدامات پیچیده ناهمزمان مانند تماس های API با بارگیری و خطا در حالت های خطا می تواند کثیف شود.
• از آنجا که ما ارائه دهندگان متن بیشتری را برای تقسیم حالت به قطعات کوچکتر اضافه می کنیم ، برنامه ما می تواند مانند ظروف سرباز یا مسافر ارائه دهندگان به نظر برسد. به عنوان مثال:

این می تواند کد را برای حفظ و خواندن سخت تر کند.

پایان

مدیریت دولت برای حفظ قوام و صافی در برنامه های جبهه ما ضروری است. زمینه API یک راه حل بومی عالی برای کشورهای ساده جهانی است ، اما اگر ما با برنامه های بسیار بزرگ یا پیچیده با بسیاری از به روزرسانی های دولتی سر و کار داریم ، بهتر است از راه حل هایی مانند استفاده کنیم Zustand وت Reduxبشر