https://virgool.io/feed/@faridshariati989 سعی در ایجاد ثبات و فرار از سکون fa 2026-06-16 09:48:55 https://files.virgool.io/upload/users/529850/avatar/AhlC5L.jpeg?height=120&width=120 https://virgool.io/@faridshariati989 https://virgool.io/@faridshariati989/%D8%AA%D8%B9%D8%B1%DB%8C%D9%81-%D8%A8%D9%87%D8%AA%D8%B1%DB%8C-%D8%A7%D8%B2-hoisting-%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-ff0pwyogdpgq احتمالا شما هم مثل من موقعی که براتون سوال شده که hoisting در جاوا اسکریپت چیه ؟به این توضیح برخوردید : جاوا اسکریپت در زمان اجرای برنامه ها فانکشن ها و متغیر هایی که با var تعریف شدن رو به بالای اسکوپ منتقل میکنه تا در صورتی که فانکشنی رو قبل از تعریفش صدا زده باشیم به ارور برخورد نکنیم . خب این شاید این دیدگاه رو به ما بده که جاوا اسکریپت میاد و به صورت فیزیکی اون فانکشن بنده خدارو بلند میکنه و میذاره بالای اسکوپ و بعدش شروع میکنه میخونه کد رو ، که این خیلی درست نیست و دقیق نیست چون که جاوا اسکریپت اصلا کد مارو عوض نمیکنه و جای هیچی تغییری نمیکنه موقع اجرای برنامه .پس تعریف بهتر چیه ؟ چطور میشه که اگه قبل از استفاده از یه فانکشن اون رو صدا بزنیم هم بازم درست عمل میکنه ؟ باید بگم که دلیلش hoisting هست :) خب ؟ حالا تعریف بهترش چیه ؟ قبلش باید این رو توضیح بدم که در جاوا اسکریپت ما چیزی به نام Execution Context داریم که یه مفهوم فرضی هست که اطلاعات اون قسمتی از کد رو که در حال اجرا شدن هست رو داخل خودش نگه میداره ...و دارای 2 فاز هست به نام های creation phase و execution phase که در هر کدوم از این فاز ها یک سری عملیات انجام میشه که من نمیخوام خیلی وارد جزئیاتشون بشم ولی برای این که hoisting رو بتونم درست تعریف کنم باید یه تعریف مختصر از این فاز ها بدم ... Creation phase :توی این فاز اتفاقی که میوفته این هست که موتور جاوا اسکریپت میاد و داخل کد میگرده و هرجا که فانکشنی تعریف شده بود رو پیدا میکنه و داخل مموری ذخیره میکنه یعنی در واقع کل فانکشن با پارامتر هاش اگر چیزی داشته باشه ذخیره میشه و متغیر هایی که با کلمه var تعریف شدن هم ذخیره میکنه اما بهشون مقدار undefined رو میده حتی اگر مقدار داشته باشن .execution phase :توی این فاز موتور جاوا اسکریپت برمیگرده و حالا متغیر هایی که ذخیره کرده رو بهشون مقداری که براشون در نظر گرفته شده رو اختصاص میده و دیگه undefined نیستن و همچنین میاد و فانکشن هارو اگر جایی صدا زده شدن اجراشون میکنه .خب ؟! hoisting کجاست الان ؟ همونجوری که گفتم جاوا اسکریپت توی creation phase میاد و متغیر ها و فانکشن هارو یه جورایی توی مموری ذخیره میکنه و زمانی که قراره اون هارو اجرا کنه حتی در صورتی که قبل از تعریف یک فانکشن بهش برسه چون از قبل اونو ذخیره کرده اون فانکشن رو میشناسه و اجراش میکنه و مشکلی از این بابت نداره ، در خصوص متغیر هایی که با var تعریف شدن هم اگر قبل از تعریفشون صداشون بزنیم میاد و بهمون مقدار undefined که تو مرحله ی creation phase بهشون اختصاص داده رو نمایش میده بهمون . پس جاوا اسکریپت نمیاد فانکشن رو بگیره بیاره بذاره بالای کد و بعدش از بالا بخونش ! بلکه میاد و توی یه فاز اون هارو ذخیره میکنه و این باعث میشه حتی اگه زودتر از این که تعریفشون کرده باشیم هم صداشون بزنیم مشکلی براش پیش نیاد ، این احتمالا تعریف درست تری از hoisting هست :) راستی ! شاید براتون سوال پیش بیاد که تکلیف متغیر هایی که با let و const تعریف کردیم چی میشه ؟ باید بگم که اگر متغیر هایی که با let و const تعریف شدن رو قبل از تعریفشون صدا بزنیم این بار جاوا اسکریپت بهمون اروری به نام ReferenceError میده و میگه که کلا اصلا همچین چیزی وجود نداره که من بخوام بهش دسترسی پیدا کنم ! ممکنه از این نتیجه بگیرین که خب پس جاوا اسکریپت let و const رو موقع creation phase جایی ذخیره نمیکنه و مقداری بهشون نمیده که نمیتونه بخونشون ، باید بگم که نه ! این کار رو میکنه و بهشون هم مقدار undefined میده اما بنا به دلایلی در دسترس نیستند که قبل از تعریفشون صداشون بزنیم .این که اون دلایل چین و چطور اتفاق میوفته یه بحث دیگه س :) که اینجا جاش نیست ، اگه خیلی براتون سوال شده بود میتونید درباره ی Temporal dead zone تحقیق کنید .امیدوارم براتون مفید بوده باشه ... موفق و خوشحال باشین ;) فرید شریعتی فرید شریعتی Sun, 03 Jul 2022 14:31:27 +0430 https://virgool.io/@faridshariati989/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-state-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-react-js-asue06balvjn گفتم مطلب بدون عکس نباشه :)توی این مطلب میخوام به طور خلاصه یه معرفی از State ها داشته باشم برای کسی که اول راه یادگیری ری اکت هست یا حتی برای کسی که مدتیه داره کار میکنه و خب یهو براش سوال شده که state دقیقا ماجراش چیه ؟ خب ... بریم برای معرفی state :به طور خلاصه state یک آبجکت هست که متعلق به خود ری اکته یعنی در اصل built-in هست و ما دیتای خودمون و یا اطلاعاتی که داریم رو توی این ابجکت ها ذخیره میکنیم و از اون ها برای مدیریت کامپوننت های ری اکتیمون استفاده میکنیم ... اما یکم بهتر اگه بخوام بگم ، استیت ها فقط اینجور نیستن که یه سری دیتا توشون ذخیره کنیم و اونارو بخونیم ، چون اون موقع فرقی با متغیر ندارن ! فرق استیت و متغیر اینجاست که متغیر ها با تموم شدن عملکرد فانکشنشون دیگه خبری ازشون نیست ولی استیت ها توسط خود ری اکت کنترل میشن یعنی تا مدت زمانی که کامپوننت هست این استیت ها هم وجود دارن و در طول زمانی که کامپوننت وجود داره ممکنه استیت ها تغییر کنن و باید بگم که استیت ها به نوعی درباره ی وضعیتی که کامپوننت ما داره هم اطلاعات میدن و یه سری property ارائه میدن که رفتار کامپوننت هامون رو کنترل میکنن و همچنین با تغییر state های ما کامپوننت هم re-render میشه ، پس باید حواسمون باشه چه زمانی نیازه استیت خودمون رو تغییر بدیم تا از render های اضافه جلوگیری کنیم . ما در کل 4 نوع state داریم که میخوام اونا رو بهتون معرفی کنم :1 - Local state :لوکال استیت ها به اون دسته از استیت هایی گفته میشه که ما از اون ها توی یک کامپوننت مشخص استفاده میکنیم ، یعنی این استیت ها مخصوص اون کامپوننت هست وبرای اون کامپوننت ازشون استفاده میکنیم .2 - Global state :ما تا یه قسمتی میتونیم کارمون رو با لوکال استیت ها راه بندازیم ، ولی یه جایی ممکنه نیاز داشته باشیم که یک یا چند تا از state هامون رو توی چندین کامپوننت استفاده کنیم و خب توی این حالت یا باید لوکال استیت هارو یکی یکی پاس بدیم به کامپوننت های مختلف که این هم کار اضافه ایه و هم کدمون رو زشت میکنه و سرعت توسعه ی اون رو پایین میاره ، یه راه دیگه هم اینه که ما بیایم از گلوبال استیت ها استفاده کنیم ، گلوبال استیت ها به اون دسته ای از استیت ها گفته میشه که میتونیم ازشون توی همه جای برناممون استفاده کنیم و موقعی که بخوایم دیتامون رو توی چندین جای برنامه از یک استیت بخونیم یا اون رو توی یه استیت ذخیره کنیم به کارمون میاد و خیلی مفید واقع میشن .3 - Server state :این دسته از استیت ها به دیتایی گفته میشه که از جایی خارج از برنامه ی ما یعنی از یه سرور خارجی به برناممون اضافه میشن و قراره اون هارو توی برناممون استفاده کنیم و انواع مختلفی دارن که باید اون هارو مدیریت کنیم و هر بار که دیتایی رو میگیریم یا چیزی رو اپدیت میکنیم باید این استیت هارو مدیریت کنیم مثل استیت loading و یا استیت error که اینجور مواقع باهاشون سر و کار داریم . 4 - URL state :دسته ی آخر از استیت ها هم url state ها هستند که به دیتایی گفته میشه که توی url ما وجود داره مثل pathname یا پارامتر ها .برای مدیریت state ها توی فانکشنال کامپوننت از هوک ها استفاده میکنیم ، که اگه دوست دارین با هوک های ری اکت هم آشنا بشین میتونین این مطلب رو بخونین : https://virgool.io/@faridshariati989/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%AA%D9%85%D8%A7%D9%85-%D9%87%D9%88%DA%A9-%D9%87%D8%A7%DB%8C-react-js-o065rkwm4qju خب اینم از این :) امیدوارم توضیحاتم به دردتون خورده باشه و یه ذره هم که شده مسیر رو براتون روشن تر کرده باشه هر جا که هستید موفق و خوشحال باشین ;) فرید شریعتی فرید شریعتی Mon, 20 Jun 2022 11:17:15 +0430 https://virgool.io/@faridshariati989/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%AA%D9%85%D8%A7%D9%85-%D9%87%D9%88%DA%A9-%D9%87%D8%A7%DB%8C-react-js-o065rkwm4qju توی این پست میخوام یه معرفی کلی از تمام هوک های react js داشته باشم و خب برای کسانی که تازه این مسیر رو شروع کردن میتونه راهنمای خوبی باشه و دید نسبتا مناسبی بهشون درباره ی هوک های react js بده.react hooksخب قبلش اصلا ببینیم هوک چیه ؟؟در نسخه های قبل react برای مدیریت state ها و لایف سایکل برنامه و چیز های دیگه از کلاس کامپوننت ها استفاده میکردیم و فقط زمانی که یه کامپوننت stateless یا بدون state بود از فانکشنال کامپوننت ها استفاده میکردیم ، اما در نسخه ی 16.8 هوک ها معرفی شدن که این خبر بسیار خوبی بود برای برنامه نویس ها ، چون هم کار راحت تر میشد و هم اکثر وقت ها کد کم تری نوشته میشد و خب چی از این بهتر ؟! در نتیجه دیگه فقط برای نوشتن کامپوننت های stateless از فانکشنال کامپوننت استفاده نمیشد بلکه میشد کل یک پروژه رو به شکل فانکشنال نوشت که خب الان هم اکثر پروژه ها دیگه فانکشنال هستن و کمتر کسی هست که از کلاس کامپوننت استفاده کنه مگر به دلایل دیگه ای که خود اون شخص میدونه و مایل هست که فانکشنال ننویسه یا چند تا از کامپوننت هاش رو فانکشنال نکنه و کلاس کامپوننت استفاده کنه . *** اگه state براتون آشنا نیست یا میخواین یکم بیشتر باهاش آشنا بشین ، میتونین قبل از شروع ، این مطلب هم بخونین : https://virgool.io/@faridshariati989/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-state-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-react-js-asue06balvjn خب بریم سراغ معرفی هوک های ری اکت ...هوک های اصلی و پر کاربرد react این سه تا هوک هستن :useState :اولین هوک و البته پرکاربرد ترین هوک react چیزی نیست جز useState که از این هوک برای مدیریت state های برنامه استفاده میکنیم و این همون هوکی هست که به ما اجازه میده وقتی فانکشنال کامپوننت مینویسیم بتونیم توش state تعریف کنیم و مقادیر state های خودمون رو تغییر بدیم و نحوه ی استفاده از این هوک هم به این شکل هست : const [state, setState] = useState(initialState);که در قسمت state ما نام state خودمون رو انتخاب میکنیم ، برای مثال میخوایم لیست دانش آموزان رو بریزیم توی یک state پس میایم و نام state رو میذاریم students ، قسمت دوم که میشه setState متدی هست که قراره state ما رو مدیریت کنه و مقدارش رو عوض کنه و معمولا هم نام گذاریش به این شکل هست که قبل از نام state یه دونه set قرار میدیم ، توی مثال ما میشه setStudents ، در سمت راست مساوی هم اسم هوک نوشته شده و همچنین توی پرانتز ها مقدار اولیه ای که state ما میخواد داشته باشه رو مینویسیم ، در مثال ما مقدار اولیه میشه یک آرایه ی خالی که به این شکل توی پرانتز مینویسیمش : [ ] useEffect :هوک بعدی ای که میخوام بهتون معرفی کنم هم یک هوک پرکاربرد هست که برای این که با استفاده از لایف سایکلِ react عملیات مختلفی انجام بدیم و ساید افکت ها رو مدیریت کنیم ازش استفاده میکنیم ، به این دلیل که خب دیگه توی فانکشنال کامپوننت ها ما نمیتونم از چیز هایی که برای کلاس کامپوننت استفاده میکردیم استفاده کنیم مثل componentDidMount ، و به جاش از این هوک استفاده میشه ، نحوه ی استفادش هم به این شکل هست :useEffect( ( ) => { } , [ ] )که یک کال بک فانکشن میگیره و زمانی که صفحه ی ما render میشه اجرا میشه و در حالت دیفالت یعنی وقتی که بعد از کال بک فانکشن خودمون [ ] رو نذاریم با هر بار re-render شدن کامپوننت این فانکشن هم اجرا میشه اما در صورتی که بخوایم فقط یک بار اجرا بشه بعد از فانکش یک ارایه ی خالی رو قرار میدیم و این باعث میشه که فانکشن ما فقط موقع اولین رندر صفحه اجرا بشه ، و در صورتی که بخوایم بعد از تغییر یک مقدار خاص فانکشن ما صدا زده بشه اون مقدار رو داخل [ ] قرار میدیم ، در کل این [ ] رو ارایه ای از وابستگی ها بهش میگیم که اون وابستگی هایی که طبق تغییر اون ها بخوایم useEffect اجرا بشه رو داخلش قرار میدیم . useContext :از این هوک برای جلوگیری از Prop drilling استفاده میشه ، Prop drillin حالتیه که وقتی ما prop رو بین چند لایه از کامپوننت هامون هی پاس میدیم رو به پایین تا به کامپوننتی که میخوایم برسه ، که خب این باعث میشه که کد ما خوندنش سخت بشه و خودمونم کارمون بیشتر بشه ، برای مثال اگر شما یک prop دارین که در لایه ی بالایی هست و قراره سه لایه پایین بره و به کامپوننت مد نظرتون برسه ، خب باید هی این prop رو یکی یکی پاس بدین پایین تا برسه جایی که میخواین و این کار جالبی نیست ، این هوک این مشکل رو حل میکنه و prop ها رو یک جا نگه میداره و هر جایی که ما نیاز داشتیم از اون prop استفاده میکنیم بدون این که نیاز باشه از جایی به کامپوننت خودمون پاسش بدیم .const value = useContext(MyContext);در اینجا ما value رو از کانتکسی که ساختیم به نام MyContext داریم میگیریم و ازش توی کامپوننتمون استفاده میکنیم و از جایی بهمون پاس داده نشده .خب ... این سه تا هوک اصلی و پرکاربرد react بودن ... اما چند تا هوک دیگه هم هست که شاید اندازه ی این سه تا هوک پر کاربرد نباشن ولی قطعا کاربرد خودشون رو دارن و از هر کدوم میشه جایی استفاده کرد و میتونن مشکل مارو حل کنن یا کد مارو بهتر کنن .useReducer :قبل از معرفی این هوک بهتره که reducer رو یه معرفی کوتاه بکنم ، reducer رو اگه بخوام ساده بگم چیزیه که یک state قدیمی رو میگیره و روی اون عملیاتی انجام میده و در نهایت به ما یک state جدید میده ، میتونین reducer رو یک قهوه ساز در نظر بگیرین که بهش قهوه رو میدیم که اینجا همون state ما هست و سپس reducer میاد یک سری عملیات (action) روی قهوه انجام میده و یک state جدید بهمون برمیگردونه که میشه قهوه ی تازمون ... خب حالا این هوک میاد چکار میکنه ؟ زمانی که ما برنامه ای داریم که state های اون به هم مرتبط هستند بهتره که از useReducer استفاده بکنیم ، اگر بخوایم یک counter رو باهاش پیاده سازی کنیم به این شکل میشه (این مثالِ خود داکیومنتِ react هست ) :یک counter که با useReducer پیاده سازی شدهمشاهده میکنید که این هوک یک state رو داره و از dispatch استفاده میکنه که dispatch یک فانکشن هست برای صدا زدن آبجکت های اکشن های ما . و در سمت راست علامت مساوی یک reducer وجود داره که توضیح دادم کارش چیه و مقدار اولیه ، و در نهایت وقتی دکمه کلیک میشه عملیات انجام میشه و مقداری که توی state ذخیره کردیم که در اینجا count هست تغییر میکنه .useCallback :بهتره قبلش بدونیم که callBack چیه ؟ callBack تابعی هست که توسط یه تابع دیگه صدا زده میشه ، این صدا زدن زمانی اتفاق میوفته که عملیاتی که به تابع اول داده شده به اتمام برسه بعدش callBack ما صدا زده میشه . و خب همونطور که احتمالا متوجه شدین ، useCallBack هم یک هوک هست که یک تابع رو میگیره و اون رو کَش میکنه یا به نوعی تو مموری ذخیرش میکنه و به ما تحویل میده ، و این خروجی ای که یک تابع هست تنها زمانی تغییر میکنه و از اول کش میشه که تابع ورودی ما یکی از مقادیرش تغییر کنه ، در اون صورت این هوک یک تابع جدید برمیگردونه و در غیر این صورت همون تابعی که توی این هوک کش شده برگشت داده میشه . در react به این عمل که تابع ما کش میشه یا ذخیره میشه توی این هوک Memoization یا به خاطر سپردن گفته میشه و به نوعی این هوک به ما یک کال بک memoized برمیگردونه .و به این شکل هم نوشته میشه : useCallback( someFunction() }, [dependencies])در نهایت این که استفاده از useCallBack از render های اضافی برنامه جلوگیری میکنه و performance برنامه رو بهتر میکنه .useMemo :عملکرد این هوک هم شبیه به useCallBack هست با این تفاوت که به جای یک تابع در اینجا ما به جای این که یک فانکشن رو برگردونیم یک مقدار memoized شده رو برمیگردونیم . و به این شکل هم نوشته میشه : const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);useRef :با استفاده از این هوک ما میتونیم به شکل مستقیم به المنت های DOM دسترسی پیدا بکنیم برای مثال ما میتونیم به برناممون با استفاده از این هوک بگیم که وقتی صفحه render شد روی یک اینپوت فوکِس بکنه یا کار هایی شبیه به این ، و به این شکل هم نوشته میشه : const refContainer = useRef(initialValue);که در سمت چپ یک متغیر هست که آبجکتی که این هوک برمیگردونه رو در اون داریم ذخیره میکنیم و در سمت راست تساوی خود هوک هست که مقدار اولیه رو در پرانتز بهش میدیم ، ما میتونیم با استفاده از مقدار current که در آبجکتی که برگشت داده میشه هست ، از ویژگی های المنت هامون استفاده کنیم ، مثلا میتونیم بنویسیم ()refContainer.current.focus و با این دستور روی اون اینپوتی که ref رو بهش نسبت دادیم فوکِس میکنیم . اینم از هوک هایی که بیشتر ازشون استفاده میشه ، و اما خود سایت react چند تا هوک دیگه هم علاوه بر این ها معرفی کرده که در اینجا به طور خلاصه اون هارو هم معرفی میکنم :useImperativeHandle : زمانی که ما یک ref یا همون ارجاع رو به کامپوننت پدر ارسال کنیم برای ویرایش کردن اون ref میتونیم از این هوک استفاده کنیم ، و این هوک هم به این شکل هست :useImperativeHandle(ref, createHandle, [deps])که در اینجا ref همون ارجاعی هست که به کامپوننت پدر ارسال کردیم و createHandle اون تابعی هست که روی ref قراره اجرا بشه و deps هم آرایه ای از وابستگی ها هست که توی بخش useEffect توضیح دادم .useLayoutEffect :این هوک شبیه به useEffect هست با این تفاوت که useEffect بعد از این که صفحه render شد و به کاربر نمایش داده شد اجرا میشه ولی useLayoutEffect قبل از این که صفحه render بشه و به کاربر نمایش داده بشه اجرا میشه .useDebugValue :و آخرین و شاید کم کاربرد ترین هوک هم useDebugValue هست که برای زمانی استفاده میشه که میخوایم مقدار یا فانکشنی رو دیباگ کنیم ولی نمیخوایم خیلی عملکرد برناممون پایین بیاد و یا تاثیری توش انجام بشه ، اون موقع از این هوک استفاده میکنیم و این هوک فقط زمانی اجرا میشه که React DevTools باز باشه . نکته ای که هست اینه که اگر خواستین تعریف بهتر و کامل تری درباره ی این سه تا هوک بخونین بهتره که به این لینک مراجعه کنید : لینک**** آپدیت 2022 **** :از اونجایی که نسخه ی 18 ری اکت سال 2022 معرفی شد چند تا هوک جدید هم به ری اکت اضافه شد که لازم دونستم اون هارو هم به این هوک ها اضافه کنم تا هر وقت کسی میخواد این مطلب رو بخونه با این هوک ها هم آشنا بشه ... useDeferredValue :این هوک یک مقدار رو میگیره و یه کپی از اون برمیگردونه و نمایش میده تا زمانی که ما نیاز داریم که به صورت فوری مقدار اپدیت بشه کندی کم تری رو تجربه کنیم برای مثال وقتی که ما یک لیست طولانی داریم از داده ها و یک اینپوت داریم که میخوایم زمانی که کاربر متن رو وارد کرد همزمان اون مقادیری که داریم تغییر کنن ، خب در حالت های عادی ما از صفحه بندی استفاده میکنیم که نیاز نباشه تمام دیتا رو با هم نمایش بدیم یا از راه های دیگه ... اما خب اگه لازم باشه که اطلاعات رو با هم نمایش بدیم به این هوک نیاز پیدا میکنیم ، از این هوک وقتی باید استفاده کرد که دیتایی که میگیریم از یه لایه ی بالاتر بیاد و ما کنترلی روی ست کردن اون مقدار نداشته باشیم توی کامپوننت خودمون ، در اون صورت ما دیتامون رو به این هوک میدیم به این شکل : const deferredValue = useDeferredValue(value);و حالا مقدار ما با کندی کمتری تغییر میکنه و تجربه ی کاربری بهتری رو ارائه میدیم . useTransition :این هوک هم یه جورایی برای موقعیت هایی شبیه موقعیتی که از هوک useDeferredValue استفاده میکنیم استفاده میشه و کاربردی مثل اون داره یه جورایی ، اما وقتی باید ازش استفاده کنیم که ما کنترل روی ست کردن مقادیرمون داریم .این هوک به این شکل استفاده میشه : const [isPending, startTransition] = useTransition();همونطور که میبینید ما یک هوک داریم که با خودش دو تا المنت isPending و startTransition رو داره ، ما از تابع startTransition برای این استفاده میکنیم که تابع های ست کردن اون استیت هایی که اهمیت کم تری دارند رو داخلش قرار میدیم و بهش میگیم که این استیت که قراره ست بشه رو دیرتر ست کن و خب این باعث میشه همزمانی ست کردن استیت ها از بین بره و یا کم بشه که در نهایت تجربه ی کاربری بهتری ارائه میدیم و سرعت اجرای برنامه بالاتر میاد ، و isPending هم یک مقدار بولین هست که میتونه true یا false باشه که وقتی ازش استفاده میکنیم که میخوایم موقعی که startTransition داره اون ست کردن رو دیر تر انجام میده به کاربر یه پیام یا لودینگ برای مثال نمایش بدیم .useId : بالاخره ری اکت دست به کار شد و هوک خودش رو برای ایدی های یونیک معرفی کرد تا دیگه نیاز نباشه برای ساختن ایدی های رندوم و یونیک از پکیج دیگه ای استفاده کنیم ، که خب این خیلی خوبه و برای اینجور مواقع خیلی کاربردیه ، روش استفاده ازش هم به این شکل هست : const id = useId() ;در کنار این سه هوک ، ری اکت چند تا هوک دیگه هم برای کتابخونه هایی که برای ری اکت ساخته شده هست و اون ها میتونن از این هوک ها استفاده کنن و معمولا توسعه دهندگان ری اکت خیلی با این هوک ها سر و کله نخواهند زد ، من هم توضیح خاصی نمیدم ولی اینجا معرفیشون میکنم که باهاشون آشنا بشین : useSyncExternalStore : از این هوک برای وقتی استفاده میشه که قراره از یه منبع خارجی یک سری دیتا بخونیم یا حالا از اون ها استفاده کنیم که برای بهتر شدن عملکرد در همزمانی استفاده میشه ، که به این شکل هم هست :const state = useSyncExternalStore(subscribe, getSnapshot[, getServerSnapshot]);useInsertionEffect : این هوک عملکردی مثل useEffect داره با این تفاوت که قبل از این که DOM اجرا شده باشه عمل میکنه .و ازش برای تزریق کردن یا اضافه کردن استایل به DOM استفاده میشه قبل از این که layout توسط هوک useLayoutEffect خونده بشه کارش رو انجام میده .به این شکل هم هست :useInsertionEffect(didUpdate);خب اینم از تمام هوک های react js ... امیدوارم که تونسته باشم بهتون یه دید کلی درباره ی این هوک ها داده باشم و کمکتون کرده باشم که کارتون رو راحت تر شروع کنید :) موفق و خوشحال باشین ;) فرید شریعتی فرید شریعتی Sat, 25 Dec 2021 10:32:39 +0330 https://virgool.io/@faridshariati989/%D8%A2%D8%B3%DB%8C%D8%A8-%D9%BE%D8%B0%DB%8C%D8%B1%DB%8C-csrf-%DA%86%DB%8C%D8%B3%D8%AA-tek9zzobhtzl در این پست که قراره کوتاه هم باشه میخوام براتون توضیح بدم که این آسیب پذیری به چه معناست و کلا ممکنه چطور باعث ایجاد مشکل بشه .این CSRF که کوتاه شده ی Cross-Site Request Forgery هست به معنای جعل در خواست میان وبی یا همچین چیزی هست کلا این مدلی کار میکنه که شخص حمله کننده میاد خودش رو جای شما جا میزنه و از طرف شما یک سری اقدامات توی اون وب سایت انجام میده و خب وب سایت فکر میکنه این خود شما هستین که دارین اون کار هارو میکنین و شک نمیکنه ، برای مثال شخص حمله کننده میتونه بیاد و ایمیلی که شما باهاش توی وب سایت ثبت نام کردین رو عوض کنه و ایمیل خودش رو جاش بذاره بعدش بیاد یه در خواست تغییر رمز عبور یا فراموشی رمز عبور بده و لینک برای ایمیل خودش ارسال میشه و به این شکل اون صاحب حساب شما میشه و شما دیگه نمیتونین واردش بشین .خب حالا چطور باید از این اتفاق جلوگیری کرد ؟اینجاست که توکن csrf میاد وسط و مانع این اتفاق میشه ! چطور ؟ به این شکل که برای هر کاربر یک توکن از طرف سرور ساخته میشه و برای کاربر فرستاده میشه ، اینجوری هر موقعی که کاربر به سرور درخواست بده باید همراه درخواستش این توکن هم فرستاده بشه تا سرور چک کنه که این کاربر دقیقا خودش هست یا خیر ، در صورتی که توکن نبود و یا فرق داشت با چیزی که سرور توقع داره اون موقع درخواست رد میشه و خب از اتفاق افتادن مشکلات امنیتی جلوگیری میشه .امیدوارم که براتون مفید بوده باشه ... موفق و سلامت باشین ;) فرید شریعتی فرید شریعتی Sat, 11 Dec 2021 10:20:12 +0330 https://virgool.io/@faridshariati989/%D8%A8%D8%A7%D9%84%D8%A7%D8%AE%D8%B1%D9%87-cors-%DA%86%DB%8C%D8%B3%D8%AA-rhcpia8ara4b چند وقتی بود که برام سوال شده بود تا بدونم cors به چه معناست و برای فهمیدنش سرچ کردم تا متوجه این موضوع بشم ، ولی خب خیلی جاها درست توضیح نداده بودن یا حداقل برای من جا نمیوفتاد ... بالاخره بعد از وقت گذاشتن بسیار متوجه شدم که cors چیه و میخوام خیلی ساده و کوتاه بهتون معرفیش کنم که گیج نشین و بتونین یه درک کلی ازش به دست بیارین .در حالت معمولی یک مرورگر فقط میتونه به وب سایتی که در حال حاضر داره نمایش میده درخواست ارسال بکنه و مثلا وقتی وب سایت الف باز شده مرورگر نمیتونه بره به وب سایت ب درخواست بده خب کار منطقی ای هم نیست که همینجوری مروگر بتونه به همه جا درخواست بده از هرجا که دلش خواست ! و اگر از وب سایت الف به وب سایت ب درخواست بده اجازه بهش نمیده و به این سیاست میگیم Same Origin Policy .اما خب به هر حال وقتی دارم یک وب اپلیکیشن رو توسعه میدیم احتمالش زیاده که نیاز پیدا کنیم به سرور های دیگه درخواست بدیم و برای عملی کردن این درخواست ها از مکانیزم CORS استفاده میکنیم .این CORS یا Cross-Origin Resource Sharing مکانیزمیه که این امکان رو به وب سرور ها میده تا بتونن منابع خودشون رو در اختیار بقیه ی وب سایت ها بذاره و اونا هم بتونن استفاده کنن .برای فعال کردن این ویژگی کافیه که در ریسپانس یک هدر به شکل زیر ست کنیم :Access-Control-Allow-Origin: *البته این برای وقتیه که ما میخوایم api عمومی یا همون public داشته باشیم که همه بتونن بهش دسترسی داشته باشن ، و اون علامت * این قابلیت رو میده که از طریق همه ی دامنه های دیگه این دسترسی وجود داشته باشه و خب اگر ما نخوایم همه قابلیت دسترسی رو داشته باشن و فقط جاهایی که مد نظرمون هست این قابلیت رو داشته باشن نیازه که این دسترسی رو محدود کنیم برای مثال به این شکل هدر رو ست کنیم : Access-Control-Allow-Origin: https://test.comدر این حالت فقط وب سایت test.com میتونه از api ما استفاده کنه .البته برای حالت مختلف نیازه هدر های دیگه ای هم ست کنیم که خب برای این بحث نیازی نمیبینم که همشونو توضیح بدم چون هدفم فقط یک مثال و معرفی بود .و در نهایت این بحث خیلی گسترده تر از این مطلب کوتاهی هست که من نوشتم ، اما فقط خواستم ساده و کوتاه توضیح بدم که اگر کسی براش سوال شده بود و میخواست تحقیق درباره ی این مطلب رو شروع کنه ، خوندن این مطلب یکم راهش رو آسون تر کنه . موفق و سلامت باشین ;) فرید شریعتی فرید شریعتی Sat, 11 Dec 2021 10:03:20 +0330 https://virgool.io/@faridshariati989/%DA%A9%D9%88%D8%AA%D8%A7%D9%87-%D9%85%D8%AE%D8%AA%D8%B5%D8%B1-%D9%85%D9%81%DB%8C%D8%AF-solid-udmd1f9zhkv4 از چیز هایی که یک برنامه نویس باید بلد باشه و حداقل ازشون آگاه باشه و یک دید کلی بهش داشته باشه مفاهیم SOLID هست ، احتمال این که توی مصاحبه ی کاریتون ازتون بپرسن که SOLID چی هست و یه توضیح دربارش بهمون بده خیلی بالاست ، تعریف های کامل و دقیق از مفاهیم SOLID وجود داره که فارسی چه انگلیسی ولی قصد من از این مقاله ی خیلی کوتاه اینه که یه توضیح ساده درباره ی هر کدوم از این مفاهیم بهتون بدم که یه دید اولیه بهشون پیدا بکنید :S - Single responsibility principle :این قانون رو به طور خلاصه SRP هم میگیم و بیان میکنه که هر کلاس که ما میسازیم نباید بیشتر از یک وظیفه داشته باشه ، و اگر بخواهیم این کلاس رو تغییر بدیم فقط وظیفش رو عوض کنیم ، همین .O - Open-Closed principle : این قانون میگه که کلاسی که میسازیم برای توسعه یافتن باز باشه ولی برای تغییرات بسته باشه ، به همین دلیله که بهش میگیم باز و بسته ، برای مثال کتابخانه هایی که موجود هستن رو میشه ازشون ارث بری بکنیم و تغییرات بدیم و گسترده بکنیم ، اما نمیتونیم خود اون کتابخونه رو عوض کنیم . L - Liskov Substitution principle :این قانون میگه که وقتی ما یک کلاس فرزند داریم ، این کلاس باید بتونه تمام کار هایی که پدرش انجام میده رو انجام بده و رفتار کلاس پدرش رو تغییر نده ، در غیر این صورت این قانون نقض شده ، یعنی مثلا اگه ما یک کلاس داریم که اسمش مرغ هست ، و اسم کلاس فرزندش بشه مرغ پلاستیکی ، خب کلاس فرزند این مرغ نمیتونه تخم بذاره :) چون پلاستیکیه ، پس ما این قانون رو اینجا نقض کردیم . I - Interface Segregation principle : این قانون میگه که داشتن چند تا اینترفیس که هر کدوم یک کار مشخص انجام میدن ، بهتر از اینه که ما یک اینترفیس داشته باشیم که چند تا کار انجام بده .D - Dependency Inversion principle :این قانون هم میگه که ماژول های سطح بالای برنامه نباید به ماژول های سطح پایین برنامه وابسته باشن و به نوعی بیان میکنه که وابستگی رو باید از بالا به پایین کم کنیم .امیدوارم این توضیحات کوتاه براتون مفید بوده باشه و تونسته باشم یه دید اولیه و کلی نسبت به مفاهیم SOLID بهتون بدم ، اما قطعا این مفاهیم عمیق تر از این مقاله ی کوتاه هستن و توصیه میکنم که بعد از خوندن این مقاله ، خودتون هم درباره ی این مفاهیم تحقیق بکنید تا به درک بهتری ازشون برسید . موفق باشید :) فرید شریعتی فرید شریعتی Sun, 30 May 2021 20:10:02 +0430