جدا کردن منطق از UI در React: مقایسه با خدمات زاویه ای

از توسعه دهندگان زاویه ای برای یک جریان به خوبی تعریف شده برای ویژگی های ساختمان استفاده می شود: به طور معمول ، خدمات به عنوان یک لایه میانی بین منطق تجارت و UI عمل می کنند.

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

services خدمات زاویه ای: سازمان از طریق تزریق وابستگی

خدمات زاویه ای کلاسهای تزریقی با منطق قابل استفاده مجدد هستند. آنها مسئول اشتراک وضعیت و رفتار بین مؤلفه ها هستند – مانند تأیید اعتبار ، تماس های HTTP ، ارتباطات مؤلفه و موارد دیگر.

شایان ذکر است که این امر نیاز به ابزارهای مدیریت دولت را از بین نمی برد
NGRX یا AKITA ، که در هنگام استفاده از یک برنامه ، استفاده از حالت قوی تر استفاده می شود.

تزریق وابستگی باعث می شود خدمات به راحتی در سراسر برنامه قابل دسترسی باشند:

@Injectable({ providedIn: 'root' }) 
export class NotificationService { 
  show(message: string) {
    /* display toast */
  }
}

🌀 واکنش: تنوع معماری به عنوان یک ویژگی

React ساختاری را برای جدا کردن منطق از UI ایجاد نمی کند – که انعطاف پذیری را به همراه می آورد ، بلکه مسئولیت آن نیز می شود. تیم ها باید الگویی را تعریف کنند که پایگاه کد را سازگار نگه می دارند.

رویکردهای متداول برای جدا کردن منطق در React شامل موارد زیر است:

• اجزای بدون سر (فقط منطق منطقی یا اجزای کنترل کننده)
• قلاب های سفارشی
• API متن
• ترکیب اعلامیه
• ماژول های خارجی (مانند auth.ts ، useuser.ts و غیره)

🧩 مثال: والدین داده های فروشگاه را به کودک ارائه می دهند

سناریو: Parent مؤلفه داده ها را از یک فروشگاه استخراج می کند و آن را به Child از طریق غرفه ها Child کاملاً از منابع داده جدا شده و آن را در هر نقطه از برنامه قابل استفاده مجدد می کند.

// Parent.tsx
import { useUserStore } from './stores/useUserStore';
import { Child } from './Child';

export function Parent() {
  const { user } = useUserStore();

  if (!user) return null; // or a spinner

  return <Child name={user.name} />;
}

// Child.tsx
export function Child({ name }: Props) {
  return <p>Hello, {name}!</p>;
}

// App.tsx
import { Parent } from './Parent';

export default function App() {
  return (
    <main>
      <h1>Headless Component Exampleh1>
      <Parent />
    main>
  );
}

مزایای این الگوی:

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

⚖ خدمات زاویه ای × الگوهای واکنش: یک مقایسه مستقیم

💡 اجزای بی سر: مؤلفه هایی که چیزی جز اجرای منطق یا کنترل عوارض جانبی ندارند.

اعلان ، قابل استفاده مجدد و در داخل درخت JSX زندگی می کند. آنها مانند “خدمات قابل مشاهده” در واکنش ، سازماندهی منطق در خارج از ارائه UI هستند.

function AnalyticsTracker() {
  useEffect(() => {
    trackPageView();
  }, []);
  return null;
}

🪝 قلاب های سفارشی: توابعی که منطق قابل استفاده مجدد را بر اساس قلاب های React محاصره می کنند.

قوانین تجاری را استخراج کنید (به عنوان مثال ، تماس های ASYNC ، اعتبار سنجی) ، بهبود قابلیت آزمایش و استفاده مجدد در مؤلفه ها.

function useAuth() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    // fetch user data
  }, []);
  return { user };
}

🌐 زمینه API: راه حل داخلی React برای به اشتراک گذاری داده ها بدون حفاری Prop.

عالی برای مضامین ، احراز هویت ، زبان یا رویدادهای جهانی. همراه با قلاب ، مانند یک فروشگاه کوچک رفتار می کند.

const UserContext = createContext(null);
function useUser() {
  return useContext(UserContext);
}

🧱 ترکیب اعلامی: منطق و رفتار را از طریق مؤلفه های JSX به جای پراکندگی IF یا Switch Switch کنترل می کند.

<When condition={user.isAdmin}>
  <AdminPanel />
When>

UI را قابل خواندن تر و مؤلفه محور تر می کند و شرط های پیچیده ای را با عبارات اعلانی جایگزین می کند.

thoughts افکار نهایی

React نیازی به جدا کردن UI و منطق ندارد – اما انجام این کار باعث می شود که کد شما مقیاس پذیر ، قابل آزمایش و قابل حفظ تر باشد.

اجزای بدون سر و قلاب های سفارشی روشهای قدرتمندی برای محاصره منطق بدون به خطر انداختن ارائه هستند. آنها به خوبی با مدل اعلانی و ترکیبی React هماهنگ می شوند.

حتی اگر همیشه قابل استفاده مجدد نباشد ، این الگوهای مؤلفه های کودک را انعطاف پذیر و آماده کار با منابع یا زمینه های مختلف داده است.

در پایان ، عدم وجود خدمات زاویه ای مانند در React محدودیتی نیست-این یک فرصت است
معماری متناسب با نیازهای برنامه خود را بسازید.