دلیل ساخت history.js

سلام

داخل جلسه هم به این موضوع اشاره کردم که این موردی که پیاده سازی شده صرفا جهت آشنایی هست و یک نمونه پیاده سازی هست! همین مورد رو میشه به روش های متفاوتی پیاده سازی کرد و قطعا این مورد تنها روش نیست. همین مورد رو هم میشه با استفاده از Context پیاده سازی کرد و این نکته هم مدر نظرت باشه معمولا در پروژه های از پکیج های آماده و امکانات فریم ورک ها برای بحث routing استفاده میکنیم

اگر دقت کرده باشی کامپوننت Route تصمیم میگیره که آیا اون کامپوننت فرزندی رو که بهش پاس دادیم باید نمایش داده بشه یا نه

نکته ای که وجود داره این هست که این کامپوننت بعد از اینکه اولین رندر انجام بشه باید به یک طریقی متوجه تغییر مسیر بشه تا بتونه دوباره تصمیم بگیره که بر اساس مسیر فعلی آیا باید کامپوننت فرزندی رو که بهش پاس دادیم رو نمایش بده یا نه!

در این پیاده سازی که در این مثال انجام شده برای تغییر مسیر مستقیما داریم از window.history استفاده میکنیم و این یعنی هیچ ارتباط مستقیمی بین برنامه react ما یا بهتر بگم کامپوننت Route ما با این api وجود نداره که متوجه بشه مسیر تغییر کرده

راه حلی که اینجا پیاده سازی شده به این صورت هست که بیایم هر دفعه که مسیر تغییر کرد هر جایی که از کامپوننت Route استفاده شده اون رو دوباره رندر بکنیم و با توجه به مسیر فعلی دوبار تصمیم بگیره!

یکی از ساده ترین روش ها این هست که بیایم داخل کامپوننت Route یک state قرار بدیم و با هر بار تغییر مسیر این state رو تغییر بدیم و باعث رندر مجدد کامپوننت Route بشیم

اینجا اومدیم اسم اون تابعی رو که state داخل Route رو تغییر میده گذاشتیم forceUpdate که البته هر اسم دیگه هم بخوای میتونی قرار بدی. این یعنی ما اگر بخوایم کامپوننت Route دوباره رندر بشه کافیه این تابع forceUpdate رو فراخوانی بکنیم! حالا به خاطر اینکه از این کامپوننت Route به تعداد زیاد و در جاهای مختلفی میشه استفاده کرد به ازای هر بار استفاده کردن از کامپوننت Route ما یک تابع forceUpdate داریم. میایم همه این توابع رو با استفاده از register داخل یک آرایه ذخیره می کنیم و هر زمانی که مسیر تغییر کرد یک حلقه روی این آرایه میزنیم و همه توابع forceUpdate رو فراخوانی می کنیم

اگر بازم جایی نامفهوم لطفا بگو دقیق تر کدوم بخش مشکلی داری که همون رو بیشتر توضیح بدم