https://virgool.io/feed/@hershelGreene Software engineer fa 2026-06-27 17:29:41 https://files.virgool.io/upload/users/710/avatar/3b81pM.png?height=120&width=120 https://virgool.io/@hershelGreene https://virgool.io/@hershelGreene/%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86-%D9%85%D9%86%D8%A7%D8%A8%D8%B9-%D8%A8%D8%B1%D8%A7%DB%8C-%DB%8C%D8%A7%D8%AF%DA%AF%DB%8C%D8%B1%DB%8C-%D9%88-%D8%B9%D9%85%DB%8C%D9%82-%D8%AA%D8%B1%D8%B4%D8%AF%D9%86-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-uagcozfbamfs سلام توی این مقاله میخوام خیلی خلاصه و مفید منابعی که برای یادگیری و همینطور عمیق تر شدن توی جاوااسکریپت به نظرم خیلی مفید و خوب هستن رو معرفی کنم . 1- W3schools.comاگر بخوایم منصفانه به قضیه نگاه کنیم وب سایت w3schools برای شروع خیلی وب سایت خوبیه. ولی فقط برای شروع و نه بیشتر. از یک سطحی به بعد دیگه جوابگوی نیاز برنامه نویس ها نیست و باید سراغ منابع حرفه ای تری رفت .. دلیل خوب بودن این وب سایت از نظر من اینه که محیط تعاملی داره . به این شکل که علاوه بر این که برای هر قسمت از آموزش ها مثال هایی رو زده این امکان رو هم به کاربر داده که اون کد رو اجرا و ویرایش کنه و به صورت عملی درک کنه مطلب رو.2- Javascript.infoیکی از بهترین وب سایت ها برای عمیق تر شدن توی مباحث جاوااسکریپت javascript.info هست . مطالعه ی مطالب این وب سایت رو برای شروع یادگیری برنامه نویسی جاوااسکریپت و برای افراد مبتدی که تازه شروع کردن توصیه نمی کنم چون یک مقدار وارد جزئیات میشه و باعث میشه مطالب یک مقدار سخت به نظر برسن. ولی بعد از تسلط اولیه به مفاهیم برنامه نویسی و جاوااسکریپت میتونین مطالعش کنین و بسیار مسائل و مفاهیم جاوااسکریپت رو به صورت ریشه ای تر یاد بگیرید.3- MDN Web Docsوب سایت موزیلا یکی از غنی ترین منابع برای یادگیری برنامه نویسی و تکنولوژی های تحت وب از جمله جاوااسکریپت هست. هیچ تاپیکی وجود نداره در حوزه ی جاوااسکریپت که در رفرنس این وب سایت وجود نداشته باشه. اخیرا خصوصیت تعاملی بودن و امکان ویرایش و اجرای کدها هم به این وب سایت اضافه شده که یک امتیاز خیلی بزرگ برای این وب سایت محسوب میشه . پیشنهاد میکنم حتما این وب سایت رو حداقل به عنوان یک رفرنس بزرگ مطالعه کنید.اگر منبع دیگه ای رو هم میشناسید که به نظرتون مطالعش مفیده حتما داخل کامنت ها بگید .. ممنون از این که وقت گذاشتین و مقاله ی من رو مطالعه کردین. Amin Ataee Amin Ataee Sat, 24 Apr 2021 20:00:47 +0430 https://virgool.io/@hershelGreene/%DA%A9%D8%AA%D8%A7%D8%A8-%D9%87%D8%A7%DB%8C%DB%8C-%DA%A9%D9%87-%D9%85%D9%86-%D8%AE%D9%88%D9%86%D8%AF%D9%85-%D9%82%D8%B3%D9%85%D8%AA-%D8%AF%D9%88%D9%85-eo1ghkvfwcma در مقاله ی قبلی 6 مورد از کتاب هایی که مطالعه کردم و پیشنهاد میکنم رو بهتون معرفی کردم . در قسمت دوم این مقاله ادامه ی لیست کتاب های پیشنهادی خودم رو برای شما مینویسم :انسان در جستجوی معنا نوشته ی ویکتور فرانکلاین کتاب خیلی نزدیکه به کتاب هایی که از جانبازها و سربازهای جنگ ایران و عراق منتشر شده . ولی با یک تفاوت . این که نویسنده ی کتاب از دیدگاه روانشناسانه به قضیه نگاه میکند. در واقع 70 صفحه ی اول این کتاب صرفا داستان اتفاقاتی است که برای نویسنده طی دوران اسارت افتاده و از صفحه ی 70 به بعد به صورت تخصصی تر از دیدگاه روانشناسی مسائل را بررسی میکند . در قسمت های پایانی کتاب توضیحات سنگین تر و نیاز به تفکر بیشتر دارد و این حس به خواننده منتقل میشود که در حال مطالعه ی یک کتاب دانشگاهی است (که در واقع هم همین طور است. این کتاب در برخی دانشگاه ها تدریس میشود) .تخت خوابت را مرتب کناین یک کتاب بسیار کوچک با تعداد صفحاتی کم است. در واقع این کتاب متن سخنرانی یک فرمانده نیروی دریایی است که درباره ی سختی هایی که طی دوران جنگ و تمارین مربوط به محل آموزش سربازان صحبت میکند و به این نکته تاکید میکند که انجام دادن درست کارهای کوچک روزمره به اندازه ی کارهای بزرگ مهم و پراهمیت است.قدرت عادتاین کتاب به صورت علمی به بررسی عاملی به نام عادت و نقش آن در موفقیت و زندگی میپردازد. با اشاره به نتایج علمی و آزمایشگاهی به خواننده نشان میدهد که عادت های بد و خوب چگونه مسیر زندگی افراد را تغییر میدهد.خودت رو به فنا ندهقبل از این که کامنت بذارین که کتاب های زرد معرفی نکنم و این صحبت ها بگذارید نکته ای را بیان کنم : هیچ کتابی مطلقا زرد نیست و هیچ کتابی مطلقا درست نیست .. حتی از زردترین کتاب هایی که در کتاب فروشی ها میبینید ( مثل کتاب های برایان تریسی :|) هم میتوانید نکاتی را بیاموزید . البته این کتاب متفاوت است. حدودا تا فصل سه بیشتر مطالب حالت انگیزشی و روحیه بخش دارند ولی از فصل 4 به بعد به نکاتی بررسی میکند که در زندگی روزمره کاربرد دارد ..هنر شفاف اندیشیدناین کتاب یکی از کتاب هایی است که به شدت توصیه میکنم و در حال حاظر هم در حال مطالعه ی این کتاب هستم . تقریبا 150 صفحه از این کتاب را مطالعه کردم . همچنین این کتاب یکی از پرفروش ترین کتاب های ایران و دنیا است . دلیل پرطرفدار بودن این کتاب حضور عادل فردوسی پور در تیم ترجمه ی این کتاب است . همچنین کتاب صوتی این کتاب به گویندگی عادل فردوسی پور در مارکت های دیجیتالی کتاب موجود است . این کتاب لیستی از خطاهای شناختی که برخی از ان ها مفید هستند و برخی از آن ها نقاط ضعف ما هستند را بررسی میکند و به انسان ها کمک میکند که منطقی تر و درست تر به مسائل نگاه کنیم ..این هم از قسمت دوم کتاب های پیشنهادی من .. اگر نظری برای بهتر شدن مقالات دارید حتما کامنت کنید . ممنون از وقتی که گذاشتید . Amin Ataee Amin Ataee Sat, 06 Feb 2021 20:35:45 +0330 https://virgool.io/@hershelGreene/%DA%A9%D8%AA%D8%A7%D8%A8-%D9%87%D8%A7%DB%8C%DB%8C-%DA%A9%D9%87-%D9%85%D9%86-%D8%AE%D9%88%D9%86%D8%AF%D9%85-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-ffosg6ojzyih سلام . حدود دوسال میشه که به صورت جدی تر شروع کردم به مطالعه کردن در مورد مطالب روانشناسی و موفقیت یا رمان که ارتباط مستقیمی با حوزه ی کاری من ندارند. به نظرم جالب آمد که این کتاب ها را معرفی کنم و حس خودم را در مورد این کتاب ها به اشتراک بگذارم . ( توجه کنید که دلیل انتخاب این کتاب ها بررسی نظرات بقیه مردم و یا بررسی معرفی این کتاب ها در یوتوب و یا میزان فروش ان ها در new York times یا آمازون است )1- اثر مرکب The Compound Effect ( اثر دارن هاردی)این کتاب یکی از بهترین کتاب های دنیا در حوزه ی موفقیت و همینطور یکی از کتاب های مورد علاقه من در این زمینه است. برخلاف سایر کتاب های زردی که در این حوزه در بازار وجود دارند این کتاب شامل راهکارهای عملی است که میتوان از آن ها به صورت واقعی و عملی در زندگی استفاده کرد و به پیشرفت های خیلی خوبی دست پیدا کرد. دارن هاردی در این کتاب مانند یک معلم بسیار صادق و دلسوز مسیر و روش های موفقیت را آموزش می دهد. 2- قمارباز (Gambler) اثر فئودور داستایوفسکیمن به شخصه خیلی علاقه ای به مطالعه ی زیاد رمان نداشتم ولی این کتاب یکی از کتاب هایی است که همه ی افرادی که علاقه به مطالعه ی رمان دارند باید بخوانند. نویسنده به گونه ای داستان و شخصیت ها را نقل میکند که خیلی واقعی به نظر میرسد و این حس به انسان دست میدهد که واقعا جای آن شخصیت و در همان مکان و موقعیت و شرایط حضور دارد.اگر نظر شخصی را کنار بگذاریم میتوانیم بگوئیم فئودور داستایوفسکی یکی از بهترین نویسنده های روسیه و کتاب های او جزو بهترین آثار هنری روسیه می باشد.3- هنر خوب زندگی کردن (The art of the good life) اثر Rolf Dobelliهنگام مطالعه ی این کتاب این حس به من دست داد که نویسنده یک انسان با سن بالا در حال توصیه و نصیحت کردن به من است . به این دلیل که اصل حرف ها و صحبت های رولف دوبلی این است که باید به سمت هدف و مسیر حرکت کرد ولی نباید خیلی دنیا و اهداف را جدی گرفت و باید انعطاف پذیر بود . این کتاب شامل 52 بخش است که در هر بخش یک نکته برای زندگی بهتر را ارائه میدهد . این کتاب در ایران بسیار مورد توجه قرار گرفت . یکی از دلایل مورد توجه واقع شدن این کتاب این است که آقای عادل فردوسی پور (گوینده ی با سابقه ی قوتبال) جزو تیم ترجمه ی این کتاب است.4- من پیش از تو (Me before you) اثر جوجو مویزکتاب من پیش از تو ( و دو کتاب بعد از آن که ادامه ی داستان این کتاب است) یکی از محبوب ترین و لذت بخش ترین رمان های حال حاضر ایران و دنیا است . استقبال بسیار زیادی از این کتاب در دنیا شد در نتیجه در سال 2016 فیلم Me before you را طبق این کتاب تولید کردند که اتفاقا بازیگر معروف امیلیا کلارک نقش لویزا کلارک را در این فیلم بازی میکند. این کتاب داستان عشق بین یک خدمتکار که خودش و خانواده اش به پول نیاز دارند و یک فرد معلول است به نام ویل.. 5 - پس از تو (After you) اثر جوجو مویز این کتاب در واقع جلد دوم کتاب me before you است و در واقع داستان مربوط به اتفاقات پس از ویل است .. این کتاب به نسبت کتاب من پیش از تو از استقبال کمتری برخوردار شد ولی همچنان جزو محبوب ترین رمان های حال حاضر است . ضمنا بهترین نسخه های ترجمه شده ی این کتاب توسط نشر آموت و ترجمه شده ی خانم مریم مفتاحی میباشد. Amin Ataee Amin Ataee Sat, 16 Jan 2021 18:04:17 +0330 https://virgool.io/@hershelGreene/%D8%B5%D9%81%D8%B1-%D8%AA%D8%A7-%D8%B5%D8%AF-react-hooks-%D9%82%D8%B3%D9%85%D8%AA-%D8%B4%D8%B4%D9%85-usememo-xw2vowau8nza Memoization is an optimization technique which passes a complex function to be memoized. In memoization, the result is “remembered” when the same parameters are passed-in subsequently.در این قسمت هوک useMemo را از طریق یک مثال خیلی ساده و کاربردی بررسی میکنیم.در واقع useMemo یکی از هوک های ری اکت است که از نسخه ی 16.8 معرفی شده است. این هوک برای جلوگیری از انجام دوباره عملیات یا محاسبات برای داده های یکسان استفاده میشود. به این صورت که تا موقعی که داده ها تغییری نکنند مانع انجام دوباره عملیات میشود. داده های و عملیات مد نظر نیز ورودی های آن هستند. کد زیر یک todo بسیار ساده است . به این شکل که یک اینپوت قرار دارد که کاربر داخل آن تایپ میکند و مقادیر ورودی در پایین آن ، لیست میشود. به کد آن توجه کنید :همانطور که در تصویر میبینید در کامپوننت list یک فیلتر وجود دارد که تنها تسک هایی که done شده است را نمایش می دهد. یک مشکل در کد بالا وجود دارد. درصورتی که در اینپوت تایپ کنیم فیلتر داخل کامپوننت list دوباره اجرا میشود. برای اطمینان از این اتفاق یک console داخل filter قرار میدهیم :نکته: برای اجرا شدن کنسول داخل فیلتر ابتدا یک داده ثبت کنید و سپس شروع به تایپ کردن داخل اینپوت کنید .با فشردن هر دکمه یک بار فیلتر اجرا میشود. برای جلوگیری از این اتفاق باید از هوک useMemo استفاده کنیم. به صورت زیر :ممنون از این که وقت گذاشتید.. لطفا نظراتتون را در کامنت ها ارسال کنید.. با تشکر Amin Ataee Amin Ataee Sun, 15 Nov 2020 06:21:08 +0330 https://virgool.io/@hershelGreene/%D8%B5%D9%81%D8%B1-%D8%AA%D8%A7-%D8%B5%D8%AF-react-hooks-%D9%82%D8%B3%D9%85%D8%AA-%D9%BE%D9%86%D8%AC%D9%85-usecallback-cvnnux0i1x9y در این قسمت به بررسی هوک useCallback می پردازیم . برای آشنایی بیشتر با این هوک بهتر است یکی از مفاهیم زیرساختی جاوااسکریپت را بررسی کنیم.در جاوااسکریپت توابع نیز نوعی آبجکت هستند. همانطور که میدانید در جاوااسکریپت آبجکت ها تنها با خودشان برابر هستند. به مثال زیر دقت کنید :همانطور که گفتیم توابع نیز نوعی آبجکت هستند پس توابع نیز از این قاعده مستثنی نیستند . به مثال زیر توجه کنید :پس تا این لحظه متوجه شدیم که جاوااسکریپت با تعریف توابع به چه صورت برخورد میکند.دلیل استفاده از useCallback در React هم به منظور رفع این مشکل است . در واقع در ری اکت هر تابع با هر رندر کامپوننت دوباره initialize یا تعریف میشود و این در بعضی اوقات باعث میشود کامپوننت های فرزند دوباره render شوند. برای رفع این مشکل از این هوک استفاده میشود . برای درک بهتر به مثال زیر توجه کنید :مثال بالا یک شمارنده در ساده ترین حالت ممکن را پیاده سازی کردیم. همینطور یک فیلد متنی قرار دارد که هرچه در آن تایپ شود داخل کامپوننت Title نمایش داده میشود. حال قصد داریم بررسی کنیم که کامپوننت های Counter, Buttons , Titleدر چه حالاتی render میشوند. به همین دلیل داخل هر کامپوننت یک console قرار می دهیم.اگر به خروجی کنسول دقت کنیم درصورتی که داخل اینپوت تایپ کنیم کامپوننت های Buttons نیز دوباره رندر میشود .در صورتی که باید جلوی این رندر اضافه گرفته شود . ابتدا برای جلوگیری از رندر شدن کامپوننت های فرزند صرفا به دلیل آپدیت شدن استیت های Counter باید از memo استفاده کنیم .اما چرا کامپوننت Buttons همچنان دوباره رندر میشوند ؟دلیل این اتفاق، توضیحاتی است که در ابتدای مقاله به آن اشاره شد. با هر رندر دوباره ی Counter توابع increase/decrease دوباره تعریف میشوند. در نتیجه prop های کامپوننت Buttons دارای مقدار جدید میشوند و این کامپوننت نیز دوباره رندر میشود. برای جلوگیری از این اتفاق باید از useCallback استفاده شود. به صورت زیر:همانطور که مشاهده میکنید useCallback یک پارامتر به صورت آرایه ای دریافت میکند . به این شکل که در صورتی که مقادیر داخل آرایه تغییر کند تابع داخل useCallback دوباره تعریف میشوند.حال خروجی کنسول به شکل زیر درمی آید :دقت کنید که memo برای جلوگیری از رندر شدن اضافه کامپوننت ها استفاده میشود ، درصورتی که useCallback برای جلوگیری از تعریف اضافه ی توابع داخل کامپوننت ها استفاده می شود. Amin Ataee Amin Ataee Fri, 13 Nov 2020 19:05:23 +0330 https://virgool.io/@hershelGreene/%D8%B5%D9%81%D8%B1-%D8%AA%D8%A7-%D8%B5%D8%AF-react-hooks-%D9%82%D8%B3%D9%85%D8%AA-%DA%86%D9%87%D8%A7%D8%B1%D9%85-usereducer-tt9ikussbjmo خوب در این قسمت از سری مطالب React Hooks ، قصد داریم useReducer را بررسی کنیم .از این هوک هنگامی استفاده میشود که یک سری فیلدهای استیت به یکدیگر مرتبط هستند و یا فیلدهایی که مقدار جدید آن ها به مقدار قبلی خود مرتبط است.** در صورتی که از redux استفاده کرده باشید با مفهوم reducer در ری اکت آشنا هستید. **برای این که به صورت عملی تر با این هوک آشنا شوید به مثال زیر توجه کنید (مثال زیر همان مثال counter است که در این قسمت به وسیله ی useReducer پیاده سازی شده است .همانطور که میبینید هوک useReducer دو مقدار را به عنوان ورودی دریافت میکند . اولین پارامتر باید تایع reducer باشد که براساس تایپ ورودی مقادیر داخل استیت را تغییر میدهد. دومین پارامتر هم آبجکت اولیه استیت است .در مثالهایی که در سری مقالات میبینید صرفا روش استفاده از هوک ها را بررسی میکنیم . برای استفاده ی واقعی و عملی از هوک ها در پایان سری مقالات یک ویدئوی کامل ضبط میشود . Amin Ataee Amin Ataee Mon, 02 Nov 2020 23:19:39 +0330 https://virgool.io/@hershelGreene/%D8%B5%D9%81%D8%B1-%D8%AA%D8%A7-%D8%B5%D8%AF-react-hooks-%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85-usecontext-tt2fs1h0lspf در این قسمت به بررسی هوک useContext می پردازیم . در صورتی که با context در ری اکت آشنایی ندارید میتوانید به داکیومنت رسمی ری اکت مراجعه کنید :https://reactjs.org/docs/hooks-reference.html#usecontextکاربرد این هوک به این صورت است که میتوانید به مقادیر یک آبجکت context دسترسی پیدا کنید . توجه کنید که با هر آپدیت مقادیر context کامپوننتی که از این هوک استفاده میکند هم rerender میشود . که برای بهینه سازی بهتر میتوانید از React.memo یا shouldComponentUpdate استفاده کنید .طبق داکیومنت رسمی ری اکت روش صحیح استفاده از useContext به صورت زیر است :برای درک بهتر این مثال بهتر است یک مثال عملی تر را بررسی کنیم . ابتدا داخل یک فایل یک context ایجاد میکنیم . ( با مقدار اولیه صفر) :سپس در یک فایل دیگر یک کامپوننت ایجاد میکنیم و از context که در عکس قبل تعریف کردیم استفاده میکنیم :سپس باید کامپوننت ShowCurrentValue را ایجاد کنیم . درواقع در این کامپوننت برای دستیابی به مقدار count از useContext استفاده میکنیم. ( با پاس دادن مقدار count هم میتوانیم به مقدار آن دسترسی داشته باشیم ولی در این مقاله هدف، آموزش استفاده از این hook است)همانطور که در شکل بالا می بینید با استفاده از useContext به مقدار count دسترسی پیدا کردیم . با هر تغییر در مقدار count کامپوننت showCurrentValue نیز rerender میشود .همانطور که دیدید استفاده از هوک useContext پیچیدگی زیادی ندارد . در صورتی که نظر یا انتقادی دارید حتما کامنت کنید . با تشکر Amin Ataee Amin Ataee Sat, 10 Oct 2020 16:05:43 +0330 https://virgool.io/@hershelGreene/%D8%B5%D9%81%D8%B1-%D8%AA%D8%A7-%D8%B5%D8%AF-react-hooks-useeffect-qeprp3lvpmem خوب در این قسمت از سری مطالب React Hooks ، قصد داریم useEffect را بررسی کنیم . در قسمت قبل به این نتیجه رسیدم که درواقع useState در functional components مشابه this.setState در class components است .در واقع میتوان componentDidMount, componentDidUpdate و componentWillUnmount ها را به وسیله ی useEffect پیاده سازی کنیم .طبق تعریف وب سایت رسمی کتابخوانه ی React :The Effect Hook lets you perform side effects in function componentsبرای درک بهتر ، به مثال زیر توجه کنید :هوک useEffect در کد بالا دقیقا هنگام هرآپدیت count صدا زده میشود . همچنین هنگام mount شدن Counter نیز یک بار اجرا میشود . به عبارت دیگر کد بالا در class components به صورت زیر عمل میکند :هوک useEffect یک پارامتر را به عنوان ورودی دریافت میکند . درصورتی که این پارامتر به آن ارسال نشود هم به عنوان componentDidMount و هم به عنوان componentDidUpdate عمل میکند.ورودی های این هوک باید به صورت یک آرایه باشد . در صورتی که آرایه ارسالی خالی ارسال شود مشابه comopnentDidMount عمل میکند و در صورتی که پارامتری به آن ارسال شود در صورت تغییر مقدار آن پارامتر این هوک اجرا میشود .به مثال زیر توجه کنید :در شکل زیر در صورتی که مقدار count تغییر کند useEffect اجرا میشود .و در شکل زیر هم هنگام mountشدن کامپوننت Counter ، useEffect اجرا میشود .نکته : برای انجام عملیات مختلف از useEffect های جداگانه استفاده شود.برای پیاده سازی componentWillUnmount نیز باید داخل useEffect یک تابع را برگردانیم. به مثال زیر توجه کنید :در صورتی که کد بالا رو اجرا کنید متوجه خواهید شد که عبارت component will Unmount پس از هردفعه اجرای useEffect اجرا میشود ( تا آخرین اجرای useEffect cleanup بکند). در واقع این ویژگی باعث قدرتمندتر شدن useEffect نسبت به componentWillUnmount میشود. Amin Ataee Amin Ataee Fri, 09 Oct 2020 15:26:49 +0330 https://virgool.io/@hershelGreene/%D8%B5%D9%81%D8%B1-%D8%AA%D8%A7-%D8%B5%D8%AF-react-hooks-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-usestate-no92yptihxau قبلا کامپوننت های ری اکت صرفا به صورت کلاس تعریف می شدند ولی از ری اکت نسخه ی 16.8 به بعد این امکان نیر به وجود آمد که از کامپوننت های به صورت تابع نیز استفاده کنیم. برای درک بهتر یک مثال خیلی ساده را بررسی میکنیم :-تعریف کامپوننت به صورت کلاس:- تعریف کامپوننت به صورت تابع: ( اگر متوجه کد پایین نشده اید هیچ مشکلی نیست. توابع به کار رفته را در ادامه به صورت کامل بررسی میکنیم )اولین hook که در این قسمت میخوام درمورد آن صحبت کنیم useState است . طبق روشی که قبل از نسخه ی 16.8 ری اکت استفاده میکردیم برای تعریف stateیک آبجکت به نام state باید ایجاد کنیم و سپس فیلدهای مدنظر را درون آن قرار دهیم. (مانند شکل اول)ولی در استاندارد جدید برای تعریف فیلدهای state از تابع (هوک) useState استفاده میشود . درواقع این هوک یک آرایه شامل دومقدار باز میگرداند که از طریق این دو مقدار میتوان به مقدار آن دسترسی پیدا کرد و همچنین مقدار را تغییر داد.همانطور که در این شکل میبینید برای ایجاد یک فیلد به نام count باید به این صورت عمل شود . مقداری که به عنوان مقدار اولیه میخواهیم به count بدهیم را باید به تابع useState پاس داده و در نتیجه useState دو مقدار برمیگرداند. یکی مقدار count و یک تابع برای تغییر مقدار count . دقت کنید که اسامی count و setCount نام های دلخواه هستند و حتی میتوانند هیچ ارتباطی به هم نداشته باشند. برای استفاده از تابع setCount باید یک تابع به آن پاس بدهیم . مقدار ورودی تابعی که تعریف میکنیم آخرین مقدار count را به عنوان ورودی دریافت میکند و مقدار بعدی که باید در count قرار بگیرد را باید برگردانیم . به شکل زیر :حال برای نمایش و یا استفاده از مقدار count به صورت زیر میتوانیم عمل کنیم :شکل 2 مثالی کامل از روش استفاده از useState است که بهتر است دوباره بررسی کنیم :در خط 5 ابتدا فیلد count تعریف شده است.درصورتی که برروی دکمه ی Increase Value کلیک شود تابع increaseCount صدا زده میشود و مقدار count یک واحد افزایش پیدا میکند و همینطور در صورتی که بر روی دکمه ی Decrease value کلیک شود مقدار count یک واحد کاهش میابد.تا این لحظه با اولین و ساده ترین هوک آشنا شدیم. پیش از این که به بررسی هوک بعدی بپردازیم ابتدا قوانین اساسی هوک ها در ری اکت را بررسی میکنیم :1- Only Call Hooks at the Top LevelDon’t call Hooks inside loops, conditions, or nested functions.2- Only Call Hooks from React FunctionsDon’t call Hooks from regular JavaScript functionsطبق قانون اول نباید هیچگاه از hooks در داخل if یا for و توابع تودرتو استفاده کرد . به طور خلاصه هوک ها فقط باید در بالاترین سطح در توابع ری اکت استفاده شود.طبق قانون دوم نیز فقط باید از هوک ها در توابع ری اکتی استفاده شود ... (واضحه دیگ )در قسمت بعدی از سری مقالات React Hooks به بررسی useEffect میپردازیم.. اگر انتقاد یا نظری داشتید حتما کامنت بذارید . با تشکر Amin Ataee Amin Ataee Thu, 08 Oct 2020 18:43:39 +0330 https://virgool.io/@hershelGreene/react-hoc-cijjz0wjrvvh در این مقاله ابتدا به تعریف و مفهوم HOC می پردازیم و سپس یک HOC می نویسیم.مفهوم HOC:نوعی کامپوننت و به عبارتی بهتر نوعی پترن در React JS است که برای به اشتراک گذاری عملیات تکراری بین کامپوننت ها بدون تکرار کد اسفاده میشود. HOC یک کامپوننت را به عنوان ورودی دریافت میکند و یک کامپوننت دیگر را به عنوان خروجی برمیگرداند. در واقع HOC در بین لایه های کامپوننت ها قرار میگیرد. برای درک بهتر به شبه کد زیر دقت کنید :همانطور که در شکل بالا مشاهده می کنید کامپوننت higherOrderComponent کامپوننت WrappedComponent را به عنوان ورودی دریافت کرده. در این مرحله میتوان یک سری prop به WrappedComponent پاس داده و در نهایت آن را برگرداینم.فقط باید دقت شود که در این حین نباید prototype کامپوننت تغییر کند . با استفاده از این روش میتوان پراپ هایی که نیازی به ارسال به WrappedComponent ندارند را فیلتر کنیم. به کد زیر دقت کنید :همچنین برای مدیریت فرم ها نیز میتوان از این روش استفاده کرد . به عبارت دیگر میتوانیم توابع مدیریت فرم و استیت های مربوط به ‌آن را در یک HOC قرار دهیم و آن ها را از طریق props به کامپوننت خروجی ارسال کنیم . به کد زیر توجه کنید :البته روش بهتر برای ذخیره سازی داده استفاده از global state (به عنوان مثال redux) است. تا به این مرحله یک Custom HOC نسبتا ساده نوشتیم. نحوه ی استفاده از این HOC به شکل زیر است :نمونه های معروف HOC که اکثر برنامه نویسان از آن ها به صورت روزمره استفاده میکنند عبارتند از : connect (React Redux)withRouter (React Router Dom)withStyles (Material-ui)منابع:‌- https://levelup.gitconnected.com/understanding-react-higher-order-components-by-example-95e8c47c8006- https://medium.com/@rossbulat/how-to-use-react-higher-order-components-c0be6821eb6c Amin Ataee Amin Ataee Fri, 22 May 2020 16:50:12 +0430 https://virgool.io/@hershelGreene/%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D9%88-closure-%D9%82%D8%B3%D9%85%D8%AA-%D8%AF%D9%88%D9%85-dkby2tso1w9m در این قسمت میخوایم عمیق تر به نحوه ی عملکرد closure ها در جاوااسکریپت بپردازیم.اما ابتدا باید دو مفهوم را باهم بررسی کنیم :1- Execution Context2- Lexical Environmentتعریف Context Execution : مفهوم انتزاعی از محیطی است که کد فعلی در آن اعتبار سنجی میشود.در جاوااسکریپت execution context به دو دسته تقسیم میشوند :1- Global execution context (GEC)به هنگام شروع اجرای کد جاوااسکریپت این نوع context execution به صورت پیش فرض وجود دارد. همه ی کدهای موجود در global scope که داخل هیچ تابع یا object نیستند ، در global execution context قرار میگیرند.فقط یک GEC در هنگام اجرای کد جاوااسکریپت وجود دارد و نه بیشتر . به این دلیل که جاوااسکریپت اصولا single thread است.2- Functional execution context (FEC)نوعی execution contextاست که هنگام صدازده شدن هر تابع جاوااسکریپتی ، توسط موتور javascript ایجاد میشود. هر تابع، execution context مربوط به خود را دارد. البته میتواند بیشتر از یکی هم باشد. FEC قابلیت دسترسی به تمام کدهای Global execution context را داراست ولی برعکس این ممکن نیست. هنگام اجرای global execution contextاگر موتور جاوااسکریپت فراخوانی تابعی را پیدا کند، برای آن تابع یک FEC ایجاد خواهد کرد3- Evalدرواقع execution context داخل تابع eval می باشد.برای َاشنایی با تابع eval به لینک زیر مراجعه کنید : https://www.w3schools.com/jsref/jsref_eval.aspتا به این مرحله با انواع execution context ها اشنا شدیم.مفهومی دیگر در جاوااسکریپت وجود دارد که بسیار مرتبط با مفاهیمی است که تا به حال بررسی کردیم.Execution context stack (ECS)همانطور که واضح است execution context stackیک پشته است که طی اجرا شدن اسکریپت وجود دارد. به این دلیل که global execution context در ابتدای اجرا شکل میگیرد همیشه اولین آیتمی که در این پشته push میشود global execution context است. سپس هنگامی که جاوااسکیپت با فراخوانی توابع مواجه میشود ، برای تابع صدازده شده یک execution context ایجاد میکند و آن را در پشته push میکند. هنگامی که تمامی کدها اجرا شدند ، جاوااسکریپت آیتم های پشته را یک به یک pop میکند و تابع مربوط به آن را اجرا میکند.هنگامی که تمام کدها اجرا شد موتور جاوااسکریپت global execution context را pop میکند و اجرای برنامه ی جاوااسکریپتی به پایان میرسد.تا به این مرحله بررسی کردیم که جاوااسکریپت چگونه execution context را مدیریت میکند . در مرحله ی بعدی به چگونگی ایجاد execution context میپردازیم .جاوااسکریپت در دو مرحله execution context را ایجاد میکند.1- Creation phaseمرحله ای است که موتور جاوااسکریپت تابعی را فراخوانی میکند ولی اجرای آن آغاز نمیشود. در این مرحله موتور جاوااسکریپت در حال کامپایل کردن است و هیچ کدی را اجرا نمیکند.2- Execution phaseدر فاز execution ، موتور جاوااسکریپت دوباره تابع را بررسی میکند تا مقادیر متغیرها را به روز کند و در نهایت کد اجرا میشود.مفهوم بعدی که باید مورد بررسی قرار داد Lexocal Environment است.تعریف Lexical Environment :it's the internal js engine construct that holds identifier-variable mapping. (here identifier refers to the name of variables/functions, and variable is the reference to actual object [including function type object] or primitive value). A lexical environment also holds a reference to a parent lexical environment.به زبان ساده تر هر دفعه که موتور جاوااسکریپت یک execution context ایجاد میکند تا کدهای global scope یا کدهای یک تابع را اجرا کند ، یک lexical environment جدید هم ایجاد میکند تا متغیرهای تعریف شده در تابع را ضمن اجرای تابع ذخیره کند.درواقع lexical environment شامل دوبخش میباشد :1- Environment Record:محل واقعی که تعریف تابع در آن ذخیره میشود.2- Reference to the outer environmentاشاره گری به environment بیرونیبه این معنا است که دسترسی به lexical environment بیرونی دارد. این قسمت مهترین مفهوم مورد نیاز برای یادگیری و فهم closure ها است.میتوان فرض کرد که lexical environment به شکل زیر است :برای درک بهتر ،مثال زیر را بررسی میکنیم :در این مثال global lexical environment به شکل زیر خواهد بود :همانطور که مشاهده کردید در global lexical environment اشاره گر outer برابر با null است. به این دلیل که هیچ lexical environment خارجی برای آن وجود ندارد.هنگامی که موتور جاوااسکریپت execution context برای تابع first را ایجاد میکند، یک lexical environment هم ایجاد میکند تا متغیرهای تعریف شده در این تابع را در طی اجرای تابع در آن ذخیره کند. پس lexical environment مربوط به این تابع به شکل زیر خواهد بود :حالا که execution context و lexical Environment را بررسی کردیم یک مثال کامل درباره ی closure ها را بررسی میکنیم :درواقع lexical environment مربوط به تابع getCounter به شکل زیر خواهد بود :و هنگامی که تابع hits اجرا میشود lexical Environmentمربوط به آن به شکل زیر تشکیل میشود : Amin Ataee Amin Ataee Wed, 13 May 2020 19:05:18 +0430 https://virgool.io/@hershelGreene/closures-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-v53unezl5qfr در جاوااسکریپت به طور کلی توابعی هستند که به scope تابع خارجی خود حتی بعد از به پایان رسیدن آن دسترسی دارند. این جمله به این معناست یک closure به تمامی متغیرها و آرگومان های تابع خارجی خود دسترسی دارد.هر تابع در جاوااسکریپت یک closure است.برای این که به مفهوم closureها بهتر پی ببریم ابتدا Lexical Scope را بررسی میکنیم . این مفهوم در جاوااسکریپت اشاره به قابلیت دسترسی به متغیرها و توابع و اشیاء براساس موقعیت آن ها در کد دارد.برای درک بهتر به مثال زیر توجه کنید :در سورس کد بالا تابع inner میتواند به داده های outerFunction یعنی متغیر outer Variable و هم به داده های global scpe یعنی متغیر globalVariable دسترسی داشته باشد.همچنین تابع outerFunction به داده های اسکوپ خود و global scope میتواند دسترسی داشته باشد.در واقع در مثال بالا تابع innerfunction توسط lexical scope مربوط به outerfunction و global scope احاطه شده است و به همین دلیل به داده های آن ها دسترسی دارد.برای فهم بیشتر بهتر است یک سری مثال را بررسی کنیم :همانطور که مشاهده میشود ابتدا تابع makeCounter صدا زده شده و یک تابع به نام getCurrentرا بازمیگرداند و در متغیر hitsذخیره میشود. با هربار صدا زدن تابع hits مقدار count به حالت اولیه باز نمیگردد و مقدار قبلی خود را حفظ میکند.این اتفاق به این دلیل است که با هر صدا زدن تابع hits، اسکوپ جدید و مخصوص به آن تابع ایجاد میشود اما تنها یک اسکوپ برای تابع makeCounter ایجاد می شود و به این دلیل که متغیر count داخل اسکوپ تابع makeCounter تعریف شده است با هر صدا زدن تابع hits مقدارش افزایش پیدا میکند و دوباره از صفر آغاز نمیشود.در قسمت بعدی این مقاله در این موضوع که closure چگونه کار میکند با جزئیات بیشتر بحث میکنیم.منابع :1- https://blog.bitsrc.io/a-beginners-guide-to-closures-in-javascript-97d372284dda2- You Don't know JS by ( Kyle Simpson ) Amin Ataee Amin Ataee Tue, 12 May 2020 23:38:28 +0430