داخل هوک‌ها چه خبره؟ (قسمت اول)

تابحال به این فکر کردید که هوک‌های ری‌اکت چجوری کار می‌کنن؟
اینکه چیکار می‌کنن نه، ده‌هزار تا مقاله راجب چیکار کردنشون موجوده، اینجا میخوایم راجب این صحبت کنیم که هوک‌های ری‌اکت، چجوری کار می‌کنن و در نتیجه، میتونیم اینکه چیکار می‌کنن رو بهتر درک کنیم.

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

بخش اول، که این مقاله‌اس، در قالب ۴ ویدیو به یسری مقدمات میپردازه، چیزهایی که باید بلدشون باشیم تا بتونیم پیاده‌سازی هوک‌هارو بخونیم و بفهمیم.

توی ویدیوی اول، میگردیم ببینیم لابلای اینهمه کد ری‌اکت، هوک‌ها کجای قضین، و برای فهمیدنشون کدوم فایل‌ها رو باید بررسی کنیم.
توی ویدیوی دوم، مهم ترین تابع اون فایل، ینی تابع renderWithHooks رو میخونیم، با مفاهیم current fiber و workInProgress fiber آشنا میشیم، میبینیم که هوک‌ها کجا ذخیره می‌شن و کیه که وظیفه مدیریت کردن تابع‌های useState و useReducer و سایر هوک‌ها رو بر عهده داره.
توی ویدیوی سوم، با data structure ای که هوک‌ها توش ذخیره میشن آشنا میشیم. دوتا linked list به اسم های currentHooks و workInProgressHooks. و می‌بینیم که ری‌اکت چجوری با استفاده از تابع‌های mountWorkInProgressHooks و updateWorkInProgressHooks باهاشون ارتباط برقرار می‌کنه.
و توی آخرین ویدیو، یه مثال از ری‌اکت واقعی می‌بینیم. سعی می‌کنم داخل internal هاش سرک بکشیم و یه نگاهی به چیزهایی که طی ویدیوهای قبلی بررسی کردیم بندازیم.

پس بریم که داشته باشیم.

لینک قسمت اول

لینک قسمت دوم

لینک قسمت سوم

لینک قسمت چهارم