‏React به‌صورت تصویری؛ از jQuery تا رندر

این مقاله یه راهنمای تصویری برای درک React ئه و می‌گه برای اینکه واقعاً قدر React رو بدونی، اول باید بفهمی چرا ساخته شد. تاریخ وب رو مرور می‌کنه: jQueryها محبوب‌ترین راه ساخت وب بودن و وب رو همون چیزی می‌دیدن که بود، یه درخت از node‌های DOM. با jQuery، state اپ داخل خود DOM زندگی می‌کرد و برای هر تغییر باید دستی DOM رو پیمایش می‌کردی، node رو پیدا می‌کردی و به‌روزش می‌کردی.

بعد Backbone.js اومد که الگوی Model-View-Controller رو به وب آورد و با حدود ۲٬۰۰۰ خط کد اجازه داد state اپ رو از DOM جدا کنی؛ state تو «Model»ها زندگی می‌کرد و هر وقت یه Model عوض می‌شد، همهٔ Viewهایی که بهش اهمیت می‌دادن دوباره رندر می‌شدن. AngularJS هم two-way data binding رو در آغوش گرفت که در تئوری قشنگ بود چون لازم نبود دستی DOM رو دست‌کاری کنی، ولی در عمل تغییرهای ضمنی state کد رو هم سخت‌فهم و هم سخت‌دیباگ می‌کرد و به مشکل پرفورمنس منجر می‌شد چون Angular مدام باید دنبال تغییرها کل اپ رو اسکن می‌کرد.

نویسنده می‌گه مشکل بیشتر کتابخونه‌ها قبل از React این بود که mutationها رو بد مدیریت می‌کردن. قلب کاری که React می‌کنه اینه که این مشکل رو تا حد زیادی کنار بزنه. نوآوری اصلیش این بود که View رو تابعی از State کرد، که اغلب به شکل v = f(s) نشون داده می‌شه؛ تو فقط نگران این باشی که state چطور عوض می‌شه و React بقیه‌شو انجام می‌ده. ولی نیمهٔ دوم ماجرا وقتی بود که این ایده تو یه API مبتنی بر کامپوننت بسته شد، تا همون شهودی که دربارهٔ ساخت و ترکیب توابع داری مستقیم به ساخت و ترکیب کامپوننت‌ها اعمال بشه. برای توصیف UI از داخل خود کامپوننت هم JSX متولد شد، ترکیبی از HTML و JavaScript، که بیشترین نفرت اولیه رو هم به‌خاطر تفسیرش از اصل «جدایی دغدغه‌ها» جذب کرد.

مقاله بعد سراغ props می‌ره و می‌گه props برای کامپوننت‌ها همون‌ان که argumentها برای توابع؛ حتی می‌شه دیتا رو بین تگ باز و بسته پاس داد که از طریق props.children در دسترسه و برای ساخت کامپوننت‌های Layout کاربردیه. بعد مدیریت state رو توضیح می‌ده: چون کامپوننت‌ها فقط تابع‌ان، متغیرهای معمولی بین رندرها باقی نمی‌مونن، پس از hook به‌اسم useState استفاده می‌کنی؛ هر وقت React ببینه state عوض شده، یه re-render تریگر می‌کنه. یه قاعدهٔ سرانگشتی هم می‌ده: هر state که چند کامپوننت بهش وابسته‌ان رو به نزدیک‌ترین والد مشترک «بالا ببر» و از طریق props پایین بفرست، و یه تابع updater تو والد بساز که بچه‌ها صداش بزنن.

در بخش rendering توضیح می‌ده که رندر یعنی React کامپوننتت رو با هدف به‌روزرسانی View صدا می‌زنه. موقع رندر دو چیز اتفاق می‌افته: اول React یه snapshot از کامپوننت می‌سازه که props، state، event handlerها و توصیف UI رو در همون لحظه ثبت می‌کنه، بعد از اون توصیف برای به‌روزرسانی View استفاده می‌کنه. React فقط وقتی دوباره رندر می‌کنه که state یه کامپوننت عوض بشه؛ و یه نکتهٔ کمتر شهودی اینه که وقتی state عوض می‌شه، React هم کامپوننت صاحب اون state و هم همهٔ کامپوننت‌های فرزندش رو دوباره رندر می‌کنه، فارغ از اینکه اون‌ها props می‌گیرن یا نه.

نکات کلیدی:

• jQuery state رو تو DOM، Backbone تو مدل‌ها و Angular با two-way binding مدیریت می‌کرد
• نوآوری اصلی React این بود که View رو تابعی از State کرد: v = f(s)
• props برای کامپوننت‌ها مثل argument برای توابع‌ان؛ children یه placeholder برای محتواست
• state مشترک رو به نزدیک‌ترین والد بالا ببر و با props پایین بفرست
• تغییر state هم کامپوننت صاحبش و هم همهٔ فرزنداش رو دوباره رندر می‌کنه