جاوا اسکریپت رو بلدی ، اما توجه نمیکنی

موضوع آخرین ارائه من در دورهمی جامعه ری اکت ایران در اصفهان (28 شهریور 1398) با اسم:

you know js , but you don't care

یا "جاوا اسکریپت رو بلدی، اما توجه نمیکنی" انجام شد .

اول بگم قضیه چی بود. ?

من قرار بود که در مورد Reason React صحبت کنم . اما در ماهی که گذشت، چندین مصاحبه داشتم و در طی این مصاحبه ها دیدم که باید بیشتر روی مبانی جاوا اسکریپت و یا javascript fundamentals تمرکز کنم . ?

واقعا اکثر اتفاقاتی که در ری اکت میوفته و ما درک نمیکنیم ، به خاطر ندونستن fundamental ها ست . نه فقط در جاوا اسکریپت ، بلکه توی همه زبان ها ، مبانی اهمیت داره .

از جایی که دیدم این ارائه شاید برای برخی دوستان مهم باشه و در دورهمی اصفهان نبودند یا نتونستن باشن ، تصمیم گرفتم تا ارائه را برای عموم قرار بدم تا شاید کمکی باشه .

http://javascript_fundamentals_presentation.surge.sh/

چند مورد رو داخل ارائه با هم در همین پست بحث میکنیم .

Currying

داخل جاوا اسکریپت مبحث Currying شاید خیلی دیده نشده و یا در موردش نوشته نشده . اما در ری اکت خیلی دیدیم . برای مثال به این کد دقت کنین :

const MyComponent= withStyles(styles)(ExampleComponent)

export default connect(mapState)(MyComponent);

به این تیکه کد در ری اکت میگن ، HOC یا high order component . این مثال را در قالب یک مثال کوچکتر در جاوا اسکریپت نگاه کنیم .

sum(5)(2)(5)

جواب این کد باید 12 باشه . برای این کار به این کد نگاه کنیم :

var sum =
function (a){
return function(b){
	return function(c){
		return a+b+c;
		}
	}
}

کش یا Momoize

این تابع در ری اکت نسخه 16.8 معرفی شد و با هوک ها استفاده شد . اما ابتدا به یک مثال ساده نگاه کنیم :

const add = () => {
const cache = {};
	return num => {
		if (num in cache) {
			 return `From cache! ${cache[num]}`;
			} else {
				 const result = num + 10;
	  			 cache[num] = result;
       			 return `Calculated! ${result}`;
       		}
		    };
		};
const addFunction = add();
console.log(addFunction(10));
console.log(addFunction(10));
console.log(addFunction(5 * 2));

خروجی بالا مقدار :‌ Calculated! 20 From cache! 20 From cache! 20 خواهد بود . در اولین دفعه اجرا ، کش خالی است و در دو اجرای دیگه ، کش پر هست . از طرفی 10 و 5*2 یکسان هستن .

در ری اکت هم از Memo استفاده شده که با memo و یا useMemo میتونین دسترسی داشته باشید

https://reactjs.org/docs/react-api.html#reactmemo

مثال های این چنین ، در ارائه وجود داره که میتونین مطالعه کنین

باز هم اگر سوال یا پیشنهادی بود ، در حد سوادم در خدمت هستم.

با من در تماس باشید . ?