https://virgool.io/feed/@sambrainschannel fa 2026-06-16 19:15:00 https://files.virgool.io/upload/users/195905/avatar/8JyETC.png?height=120&width=120 https://virgool.io/@sambrainschannel https://virgool.io/@sambrainschannel/%D8%AE%DB%8C%D9%84%DB%8C-%D9%85%D8%AE%D8%AA%D8%B5%D8%B1-%D9%88-%D8%B3%D8%A7%D8%AF%D9%87-%D8%B1%D8%A7%D8%AC%D8%A8-%D8%AA%D9%81%D8%A7%D9%88%D8%AA-usecallback-%D9%88-usememo-kkcsivgl2lfh سلام و امیدوارم که حالتون خوب باشه. چند وقته میبینم بچه هایی که تازه دارن ری اکت کار میکنن و یا حتی در برخی از موارد افراد یکم با سابقه تر این دوتا هوک ری اکت رو با هم قاطی میکنن و دقیق نمیدونن مرز این دو هوک چیه. خواستم اینجا یه توضیحی رابجب این دو هوک بدم. اول از همه برای کسایی که یکم تازه تر هستن توضیح بدم که اصا این دوتا چی هستن. اینا دو تا هوکن و تو کامپوننت های فانکشنال قابل استفاده هستن. کارشون چیه ؟‌ الان توضیح میدم. ببینید فرض کنید که ما یه کامپوننت داریم که داریم داخلش تو یه فانکشن یه کار سنگین انجام میدیم. خب اگر این کامپوننت بخواد هر باری که ری رندر میشه این فانکشن رو دوباره کال کنه خیلی وضعیت بد میشه. به مثال زیر توجه کنید: (این مثال هارو من همینجوری اینجا مینویسم برای همین اگه یه وقت تصمیم گرفتید که ازشون استفاده کنید و ارور خورد ببخشید دیگه :)‌ ) import React,{useState} from 'react' const DisplayResult = ({result}) => <p>{result}</p>const test = props => { const func = ()=> { /// some complicate operation } const result = func(); let [state,setState] = useState(0) return <div> <DisplayResult result={result} /> <button ={()=>setState(state + 1 )} /> <p>{state}</> </div>}تو این مثال شما هر باری که اون باتن رو فشار بدید این کامپوننت آپدیت میشه و دوباره رندر میشه و با هربار رندر شدن مجددا اون تابع سنگینمون ران میشه و خب این اصلا خوب نیست. اینجاست که این دوتا هوک میان کمکون که بتونیم این مشکل رو باهاشون رفع کنیم. اما ببینیم اینا چین و چه فرقی با هم میکنن. useMemo:هوک اولی که راجبش صحبت میکنم useMemo عه.به صورت ساده این هوک یه تابع به عنوان آرگومان اول و یک آرایه از دیپندنسی یا وابستگی به عنوان آرگومان دوم میگیره. اون تابع رو اجرا میکنه برامون و جوابشو بهمون میده و فقط در صورتی که اون وابستگی تغییر بکنه این تابع رو دوباره ران میکنه. الان مثال بالا رو با کمک useMemo مینویسیم ببینیم چجور میشه:import React,{useState,useMemo} from 'react' const DisplayResult = ({result}) => <p>{result}</p>const test = props => { const func = ()=> { /// some complicate operation } const [state,setState] = useState(0) const result = useMemo(func,[state]) return <div> <DisplayResult result={result} /> <button ={()=>setState(state + 1 )} /> <p>{state}</> </div>}خب من الان با استفاده از useMemo و پاس دادن اون تابع سنگینمون بهش کاری کردم که این تابع هر بار ران نشه. اما من تو کد بالا یع اشتباهی کردم که باعث شده وضعیتم با کد قبلی فرقی نکنه. ببینید میتونید بفمید چرا؟ خب علتش اینه که من اومدم به عنوان آرگومان دوم به useMemo اون state رو پاس دادم و با هر بار تغییر مقدار اون state این تابع دوباره ران میشه و عملا نصبت به قبل تغییر ایجاد نشد. برای اینکه این تابع یک بار و فقط یک بار ران بشه من باید اون خط برنامه رو به شکل زیر ویرایشش کنم const result = useMemo(func,[])خب الان من یه آرایه خالی به عنوان وابستگی به این تابع پاس دادم یعنی این هوک هیچ وابستگی نداره و باعث میشه فقط و فقط یکبار ران بشه و خب همه چی خوب بشه :) ** یه نکته ی مهم اینه که جایگاه استفاده از useMemo و useCallback خیلی مهمه و نباید الکی هرجایی ازشون استفاده کنید. استفاده غلط از این دو هوک باعث میشه برنامتون اشتباه کار کنه ** useCallbackخب حالا که به صورت ساده و ابتدایی با این هوک آشنا شدین بریم ببینیم که هوک دوم چیه. بچه ها useCallbak هم مثل همین useMemo کار میکنه فقط تنها فرقش اینه که useCallback فانکشنی که بهش به عنوان آرگومان میدیم رو ران نمیکنه و خود اون فانکشن رو برمیگردونه. و ما باید خودمون اونو ران کنیم. اگه بخوام مثال بالارو با useCallback بنویسم اینجوری میشه.import React,{useState,useCallback} from 'react' const DisplayResult = ({result}) => <p>{result}</p>const test = props => { const [state,setState] = useState(0) const func = useCallback(()=> { /// some complicate operation },[]) return <div> <DisplayResult result={func()} /> <button ={()=>setState(state + 1 )} /> <p>{state}</> </div>}خب این یه توضیح خیلی ساده بود ازین دو هوک بیشتر برای اینکه جا بیوفته فرق این دوتا هوک باهم چیه اما راستشو بخواید یکم فرقشون بیشتر ازین حرفاس ولی این مثال کمک میکنه بفهمید چجور باید ازین هوک ها استفاده کنید . امیدوارم مفید بوده باشه . sambrainschannel sambrainschannel Mon, 29 Jun 2020 10:48:34 +0430 https://virgool.io/@sambrainschannel/%D8%AA%D8%A7%D8%B2%D9%87-%D9%87%D8%A7%DB%8C-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%AF%D8%B1-es2020-gqjsz9vtjfm2 (اول از همه بگم که برای فهمیدن بهتر این مطلب باید با جاوااسکریپت آشنا باشید)خب میخواستم تو این پست یه مرور کلی داشته باشیم بر روی تازه های جاوااسکریپت در es2020. میدونم که خیلی هاتون از قبل با این ویژگی های جدید آشنایی دارید ولی باز بهشون یه اشاره ی تیتروار میکنم که هم یه مروری برای شمایی که از قبل باهاشون آشنایی داری بشه و هم به شمایی که ازین موضوع اطلاعی نداری کمکی بکنه. خب همونطور که میدونید هر ساله در یه استاندادری به نام ecma یا اکما (در اصطلاح) میاد و یه سری موارد و فیچر جدید رو برای جاوااسکریپت معرفی میکنه که ازون به بعد در اینترپرتر این زبون مفهوم و قابل استفادس. خب میدونید که استاندارد es6 سطلان تحول در زبون جاوااسکریپت بود و یه عالمه قابلیت اضافه کرد به جاوااسکریپت و بعد ازون هیچ سالی انقدر به این زبون قابلیت اضافه نشده ولی خب این بدین معنی نیست که استانداردهای سالهای بعد چیزی برای ارائه نداشتن. سال ۲۰۲۰ هم ازین قاعده مستثنا نیست و یه سری قابلیت ها به این زبون محبوب و پر استفاده اضافه کرده. که اینجا تیتر وار و مختصر براتون توضیح میدم.1.BigIntیه دیتا تایپ جدیدی به این زبونه اضافه شده به نام بیگ اینت که خب همونطور که از اسمش پیداست و میتونید حدس بزنید دامنه بیشتری از اعداد اینتیجر رو شامل میشه. تا قبل از این ماکسیمم عدد قابل دسترس در جاوااسکریپت عدد ۲ به توان ۵۳2 pow(53) بود که برابر 9007199254740992 میشد و میتونستید به این عدد با متغیر Number.MAX_SAFE_INTEGERهم استفاده کنید. اگر این عدد رو داخل متغیری میریختید و اون متغیر رو یک واحد اضافه میکردید متوجه میشدید که تغییری تو مقدار متغیرتون شکل نمیگرفت چون این عدد ماکسیمم اینتیجر قابل دسترس در جاوااسکریپت بود. اما خب دیگه الان داستان فرق میکنه و با معرفی بیگ اینت اعداد بزرگتر هم تو جاوااسکریپت قابل دسترسی هستن فقط باید آخر عدد حتما "n" باشه. اینترپرتر جاوااسکریپت با دیدن اون n میفهمه که الان با یه عدد بیگ اینت سر و کار داره. همین مثال چند خط بالایی که زدم رو در نظر بگیرید. اگر شما عدد 9007199254740992 رو تو یه متغیر بریزید و اونو به علاوه یک بکنید چیزی تغییر نمیکنه. اما 9007199254740992n رو میتونید به علاوه یک بکنید و ببینید نتیجه میشه 9007199254740993n.2.Dynamic Importتا قبل ازین شما وقتی میخواستید یک فانکشن رو که تو یه فایل دیگه نوشتید و اکسپورتش کردید رو تو این فایلتون داشته باشید اون رو به صورت گلوبال و بالای فایلتون ایمپورت میکردید. اما با معرفی داینامیک ایمپورت این داستان عوض شده و شما میتونید حتی تو یه فانکشنتون به صورت داینامیک یه فایل رو اینپورت کنید. البته این عملیات به صورت async انجام میشه.const tmp = await import('./test')tmp.testFunction();3.import.metaاین متد یک آبجکت با یک پراپرتی url از فایل ایمپورت شده بهتون میده (این آبجکت پروتوتایپی نداره و configurable , enumerable و writable عه). فرقی هم نداره که شما این ماژول رو با عبارت import به کدتون آورده باشید یا تو اچ تی ام ال از تگ اسکریپت استفاده کرده باشید. در دو حالت کار میکنه.<script type=&quotmodule&quot src='./index.mjs?someURLInfo=5' > new URL(import.meta.url).searchParams.get('someURLInfo'); // 5 // or import './index2.mjs?someURLInfo=5'; new URL(import.meta.url).searchParams.get('someURLInfo'); // 54.Module Namespace Exportsاین همه قابلیت جالبیه که اضافه شده. اینجوریه که شما تا امروز اگه میخواستید یک ماژول رو تحت یه عنوانی ایمپورت کنید و تحت همون عنوان اکسپورتش کنید باید به این صورت عمل میکردید.import * as test from './test'export { test }که میتونید ازین به بعد خیلی مستقیم اینکارو انجام بدید export * as test from './test'5.globalThis احتمالا از اسمش بتونید حدس بزنیدکه این ویژگی جدید چیه. شما تو جاوااسکریپت تا قبل از این در محیط های مختلف باید از کامند های مختلفی برای دسترسی به this استفاده میکردید.مثلا تو محیط وب و بروزر window استفاده میشد ولی تو وب ورکر ها باید از self استفاده میکردید. حالا با معرفی این آبجکت شما یه متغیر سراسری دارید که همه جا هم بهش دسترسی دارید به نام globalThis. 6.[String].matchAllمیدونید که یه متدی تو جاوااسکریپت داریم به نام match که یه رگولار اکسپرشن میگیره و میگه اون رشته ی ما تو محدودیت های این رگولاراکسپرشن قرار میگیره یا نه. حالا این تابع اینطوری عمل میکنه که تموم حالت هایی که تو محدودیت های رگولاراکسپرشن قرار میگیرن رو به صورت یه آرایه برمیگردونه. 7.Promise.allSettledخب همونطور که میدونید Promise ها متدی دارن به نام all که یک آرایه از پرامیس هارو میگیره و اونارو اجرا میکنه. حالا اگه در خلال این اجرا یکی از این چند پرامیس به ارور بخوره این متد دیگه ادامه به کار نمیده و کار رو متوقف میکنه. این متد (allSettled) هم به همین صورت عمل میکنه فقط فرقش اینه که اگر یکی از پرامیس ها به ارور بخوره کار ادامه پیدا میکنه و در آخر اگر بعد از این متد .then رو صدا بزنید میبینید که یک آرایه از آبجکت ها برمیگردونه که همشون حاوی فیلدی به نام استتوس هستن . اگر پرامیس با موفقیت به اتمام رسیده باشه وضعیت یا اسستوسش fulfilled و اگر به ارور خورده باشه وضعیت یا استتوسش rejected خواهد بود. 8.Optional Chainingاین ویژگی خیلی بدرد بخوره.تا قبل از این اگه شما میخواستید یه فیلد یا متد از یک آبجکت رو که داخل یک آبجکت دیگه هست رو صدا بزنید و از ارور خوردن برنامتون برای مواقعی که آبجکتتون undefined عه جلوگیری کنید میومدید و اینجوری عمل میکردید. const obj = { obj2 : { a : '1' }}if(obj.obj2 !== undefined) console.log(obj.obj2.a) /// 1اما الان میتونید از عملگر .? استفاده کنید. در صورتی که اون آبجکت وجود داشته باشه برنامه اجرا میشه و در صورتی که undefined باشه مقدار undefined برمیگرده و برنامه به اروری نمیخوره. این متد برای صدا زدن فانکشن ها یا در مورد آرایه ها هم کاربرد داره. console.log(obj.obj3?.someField) ///undefined obj.obj2.someFunction?.() /// undefined9.Nullish Coalescingخب برای اینکه ببینیم این ویژگی چه مشکلی رو از ما حل میکنه باید یه مثال بزنم. فرض کنید که میخواستید مقادیر falsy رو برای یه متغیر فیلتر کنید.به این صورت که اگر مقدار falsy بود در کنسول چاپ کنه yes.به این صورت عمل میکنیم. const [a,b,c] = [0,'',undefined]a || console.log('yes') //yesb || console.log('yes') // yesc || console.log('yes') //yesخب همینطور که میبینید ۰ و استرینگ خالی هم جزو مقادیر falsy هست. اما اگه بخوایم این کارو فقط با مقادیر nullish انجام بدیم چی؟‌ دیگه این روش قابل استفاده نیست چون ۰ و استرینگ خالی جزو این مقادیر نیستن. در واقع nullish ها این ها هستند: null , undefined حتی false و NaN که جزو مقادیر falsy هستند هم جزو مقادیر nullish نیستند. برای اینکار این ویژگی و عملگر جدید معرفی شده که کار رو راحت تر میکنه. const [a,b,c,d] = [0,'',undefined,null]a ?? console.log('yes') b ?? console.log('yes') c ?? console.log('yes') // yes d ?? console.log('yes') //yes10.Private Variableهمونطور که میدونید جاوااسکریپت بعد از es6 شی گرایی رو به شکل رایجش میفهمید و قابل استفاده بود. اما وقتی شما یک کلاس در جاوااسکریپت مینوشتید و میخواستید متغیر خصوصی تعریف کنید یکم به مشکل میخوردید. جاوااسکریپت متغیر خصوصی رو نمیفهمید و به شما امکان دسترسی به همه متغیر هارو بیرون ازون کلاس و با ساختن یک شی ازون کلاس بهتون میداد. برنامه نویس ها با گذاشتن قرارهایی مثل اینکه متغیر خصوصی رو با _ تعریف کنید سعی میکردن به هم بفهمونن که این متغیری که اسمش با _ شروع شده یک متغیر خصوصیه و ازش استفاده نکنید.اما الان دیگه میتونید اول اسم متغیرتون یه # بذارید و اینترپرتر جاوااسکریپت اون رو یک متغیر خصوصی میفهمه و دیگه امکان دسترسی بهش رو از بیرون کلاس نمیده. class book{... #private = 'some text';... }const b = new book();console.log(b.#private) // Error11.flat ,flatMapاین دو تابع هم به تازگی معرفی شدن و خیلی کاربردی هستن.تابع flat به شما این امکان رو میده که یک آرایه تو در تو رو تبدیل به یه آرایه معمولی کنید. const arr = ['1','2',['3','4']]const flatArr = arr.flat();console.log(flatArr) /// ['1','2','3','4']تابع flatMap هم به همین صورت عمل میکنه ولی یه تفاوتی داره اونم اینه که یبار مپ رو روی آرایه اجرا میکنه و تو مواقعی که میخواید تغییراتی در آرایه بدین میتونه خیلی کاربردی باشه.const arr = ['1','2',['3','4']]const flatArr = arr.flatMap(a=>a*2);console.log(flatArr) /// ['2','4','6','8']من راجع به تمام این ها خیلی خلاصه و کلی گفتم و بهتره اگر خیلی میخواید رو این ویژگی ها دیپ بشید بایدراجع بهشون بیشتر مطالعه کنید . خب امیدوارم ازین مطلب خوشتون اومده باشه و استفاده ی لازم رو کرده باشید. من این مطلب رو با استفاده از دانش خودم و منابع زیر نوشتم:https://www.telerik.com/blogs/latest-features-javascript-ecmascript-2020https://dev.to/carlillo/es2020-features-in-simple-examples-1513https://kangax.github.io/compat-table/es2016plus/ sambrainschannel sambrainschannel Sun, 21 Jun 2020 15:48:53 +0430