نوشته های حمیدرضا ناطقی

ساخت هوک برای fetch داده از سرور

حمیدرضا ناطقی — Mon, 09 Aug 2021 17:00:22 +0430

در این مقاله میخام بهت بگم جریان ساخت یک هوک به چه شکل پیش میره تا دید خوبی داشته باشی برای ساخت هوک های خودت.یک اپلیکیشن کوچیک مینویسم که از jsonplaceholder دیتا رو میگیره.پس مینویسمconst [ data, setData ] = useState([]); useEffect(() => { async function fetchData() { try { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const data = await response.json(); setData(data); } catch(e) { } } fetchData(); }, []);از هوک useEffect استفاده میکنم و دیتایی که از سرور میاد رو داخل متغیر data ذخیره میکنم.متغیر loading رو میخام اضافه کنم که روند گرفتن دیتا رو بهم نشون بده.پس مینویسمconst [ loading, setLoading ] = useState(false); const [ data, setData ] = useState([]); useEffect(() => { async function fetchData() { try { setLoading(true); const response = await fetch('https://jsonplaceholder.typicode.com/users'); const data = await response.json(); setLoading(false); setData(data); } catch(e) { setLoading(false); } } fetchData(); }, []);خب حالا من ده ها کامپوننت دارم که میخان از سرور دیتا بگیرن برای تک تک این کامپوننت ها باید این روند رو تکرار کنم که منطقی نیست.پس میتونم این کد رو داخل یک فانکشن بنویسم که ترجیحا اسمش با use شروع بشه که بهش میگن هوک. و پارامتری که میخام رو بهش پاس بدم و متغیرهایی که میخام رو ازش بگیرم. اینجا تفاوت هر هوک در روتی هست که بهش درخواست میدم پس url رو بعنوان آرگومان این فانکشن انتخاب میکنم و از هر هوک data و loading رو میخام.پس مینویسمfunction useFetch(url) { const [ loading, setLoading ] = useState(false); const [ data, setData ] = useState([]); useEffect(() => { async function fetchData() { try { setLoading(true); const response = await fetch(url); const data = await response.json(); setLoading(false); setData(data); } catch(e) { setLoading(false); } } fetchData(); }, []); return { loading, data }; }اگه بخوام خطا رو بگیرم میتونم متغیر error هم اضافه کنم بنابراین برای ساده سازی این روند بجای هوک useState از هوک useReducer استفاده میکنم و براش state اولیه تعریف میکنم که با اکشن های متفاوت تغییر میکنه و در انتها state رو از فانکشن برمیگردونم.پس مینویسمconst initialState = { loading: false, error: null, data: [] } function useFetch(url) { const [ state, dispatch ] = useReducer((state, action) => { switch(action.type) { case 'FETCHING': return { ...state, loading: true }; case 'FETCHED': return { ...state, loading: false, data: action.payload }; case 'ERROR': return { ...state, loading: false, error: action.payload }; default: return state; } }, initialState); useEffect(() => { async function fetchData() { try { dispatch({ type: 'FETCHING' }); const response = await fetch(url); const data = await response.json(); dispatch({ type: 'FETCHED', payload: data }); } catch(e) { dispatch({ type: 'ERROR', payload: e.message }); } } fetchData(); }, [url]); return { state }; }خب اگه بخوام در هر کامپوننت از این هوک استفاده کنم مینویسمconst { state } = useFetch('https://jsonplaceholder.typicode.com/users');بعدش با آبجکت state هر کاری بخوام انجام میدم.

تخریب ساختار Destructuring در جاوا اسکریپت

حمیدرضا ناطقی — Sat, 03 Jul 2021 01:18:33 +0430

چرا Destructuring وجود داره؟چون مشکلمونو حل میکنه. یک مثال ببینیم.این یک آبجکت ساده شامل اسم 5 نفره.const names = { hamidreza: 'Hamidreza', cinna: 'Cinna', amir: 'Amir', pooya: 'Pooya', majid: 'Majid' };اگه ازت بخوام این اسمارو روی کنسول چاپ کنی، احتمالا اینجوری مینویسی.console.log(names.hamidreza); console.log(names.cinna); console.log(names.amir); console.log(names.pooya); console.log(names.majid);کار میکنه. ولی این نقطه گذاری* خیلی منزجرکنندست. چجوری بهترش کنیم؟const hamidreza = names.hamidreza; const cinna = names.cinna; const amir = names.amir; const pooya = names.pooya; const majid = names.majid; console.log(hamidreza); console.log(cinna); console.log(amir); console.log(pooya); console.log(majid);خیلی بهتر شد. ولی خب هنوزم داریم همون کارو تکرار میکنیم. حالا اگه بتونیم در یک خط این متغیرهارو مقداردهی کنیم چی میشه؟بهتر میشه مگه نه؟ اینجاست که destructuring بدردمون میخوره. میتونیم اینجوری بنویسیم:const { hamidreza, cinna, amir, pooya, majid } = names; console.log(hamidreza); console.log(cinna); console.log(amir); console.log(pooya); console.log(majid);خیلی بهتر از قبل شد!ولی خب چجوری کار میکنه؟سادست. مشخصه های آبجکت* رو بیرون میکشیم و به متغیر انتساب میدیم. و اسم متغیر هم بصورت پیش فرض مشابه اسم مشخصه ست. میتونی اینجوری تغییرش بدی.const { hamidreza: hamid, cinna, amir, pooya, majid } = names;حالا destructuring برای آرایه چجوریه؟برای آرایه چند تفاوت داریم.میدونیم که داده آرایه با اندیس ذخیره میشه که به ترتیبه. پس، باید ترتیب رو رعایت کنیم:const arr = ['hamidreza', 'cinna']; const [hamidreza, cinna] = arr;اینم میدونیم که آرایه مشخصه نداره. پس، هر اسمی که دلت بخواد میتونی انتخاب کنی.چندتا مثال از تخریب ساختار destructuring برای آبجکت و آرایه ببینیم.تخریب ساختار برای آرایهجابجا کردن متغیرهاlet a = 1; let b = 3; [a, b] = [b, a]; console.log(a); // 3 console.log(b); // 1نادیده گرفتن برخی مقادیر برگشتی از تابعfunction f() { return [1, 2, 3]; }; const [a, , b] = f(); console.log(a); // 1 console.log(b); // 3انتساب مقادیر پیش فرض*let a, b; [a=5, b=7] = [1]; console.log(a); // 1 console.log(b); // 7تخریب ساختار برای آبجکتتخریب آبجکت بعنوان پارامتر تابعاین تکنیک برای props خیلی بدرد میخوره.const hamidreza = { name: 'Hamidreza', age: 30 }; const statement = ({name, age}) => { return `My name is ${name}. I am ${age} years old.` }; statement(hamidreza);تخریب ساختار تو در تو*const profile = { name: 'Hamidreza', age: 30, professional: { profession: 'Frontend Developer' } }; const {name, age, professional: {profession}} = profile; console.log(professional); // error console.log(profession); // Frontend Developerانتساب مقادیر پیش فرضconst {a = 10, b = 5} = {a: 3}; console.log(a); // 3 console.log(b); // 5پاورقی* نقطه گذاری = dot notation* مشخصه های آبجکت = object properties* انتساب مقادیر پیش فرض = default assignment* تخریب ساختار تو در تو = nested destructuring

هوک useMemo در React

حمیدرضا ناطقی — Sun, 27 Jun 2021 18:23:12 +0430

معرفیبا نسخه 16.8، تعدادی هوک کاربردی اضافه شد که میتونی در برنامه های ری‌اکت ازشون استفاده کنی. یکی از این هوک ها useMemo بود. این هوک سرعت اجرای برنامه رو بهبود میده.در این مقاله میبینیم که رندر دوباره re-render چجوری کار میکنه، چرا مهمه که بدونی، و اینکه useMemo چجوری سرعت اجرای این عملکرد رو بهبود میده. همچنین یاد میگیری که useMemo چه مشکلاتی میتونه داشته باشه.برابری ارجاعی و عملیات سنگینهوک useMemo دو تا مشکل رو حل میکنه:برابری ارجاعیعملیات محاسباتی سنگیندر چرخه حیات کامپوننت، وقتی بروزرسانی رخ میده ری‌اکت کامپوننت رو دوباره رندر میکنه، به نجوی که جاوااسکریپت مقایسات برابری و سطحی shallow رو انجام میده ممکنه تغییری ناخواسته یا غیرمنتظره رو تشخیص بده. این تغییر سبب میشه که کامپوننت بدون دلیل دوباره رندر بشه.علاوه بر این، اگه رندر دوباره عملیات سنگینی باشه، مثلا حلقه for loop طولانی، به سرعت اجرا لطمه میزنه. عملیات سنگین میتونه برای زمان، حافظه، یا پردازش هزینه‌بر باشه. علاوه بر این مشکلات فنی به تجربه کاربری هم صدمه میزنه.اگه کامپوننت دوباره رندر بشه، تمام زیردرخت کامپوننت دوباره رندر میشه.از اینرو، ری‌‌اکت ایده useMemo رو ارائه داد تا این مشکل رو حل کنه.درک مفهوم Memoizationمفهوم Memoization یا بمعنای کلمه به خاطر سپاری تکنیکی‌ست که تابعی پیچیده رو بخاطر میسپاره. در این روش، وقتی پارامترهای یکسان متعاقبا به تابع داده میشه نتیجه به خاطر سپرده میشه.اگه تابعی داشته باشیم که 1+1 رو محاسبه کنه، نتیجه 2 رو میده. ولی اگه از Memoization استفاده کنیم، دفعه بعدی که همین اعداد رو به تابع بدیم، اونارو با هم جمع نمیکنه؛ و بدون اینکه محاسبه ای انجام بده جواب 2 رو به یاد میاره.نوشتار useMemo به این شکله:const memoizedValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);هوک useMemo یک تابع و آرایه ای از تعلقات dependencies میگیره.این آرایه مشابه آرگومان های تابع کار میکنه. هوک useMemo این لیست رو تحت نظر داره: اگه تغییری نباشه، نتیجه تابع یکسان میمونه. درغیراینصورت، تابع رو دوباره اجرا میکنه. اگه لیست تغییری نداشته باشه، مهم نیست اگه کامپوننت دوباره رندر بشه، تابع دوباره اجرا نمیشه و در عوض نتیجه ذخیره شده رو برمیگردونه. اگه تابعی که استفاده میشه بزرگ و سنگین باشه این شرایط سرعت اجرا رو بهینه سازی میکنه.مثالی از useMemoاین مثالی انتزاعی از هوک useMemo برای آرایه ای از آیتم هاست که از دو تابع محاسباتی سنگین استفاده میکنه:const List = React.useMemo(() => listOfItems.map(item => ({ ...item, itemProp1: expensiveFunction(props.first), itemProp2: anotherPriceyFunction(props.second) })), [listOfItems] )در مثال فوق، تابع useMemo در رندر اول اجرا میشه.از اینرو، تا زمانیکه توابع سنگین تموم بشن thread مسدود میشه.با این حال، در رندرهای بعدی، تا زمانیکه listOfItems تغییری نکرده نیازی نیست که توابع سنگین دوباره اجرا بشن. هوک useMemo نتیجه هر تابع رو به خاطر میسپاره.بگونه ای هست که انگار این توابع بصورت آنی رندر میشن. اگه توابعی همزمان synchronous و سنگین داری بهتره که از این روش استفاده کنی.چه زمانی از useMemo استفاده کنیماول کدت رو بنویس بعد برگرد ببین میتونی بهینه کنی یا نه. اگه از useMemo مکررا استفاده کنی، ممکنه به سرعت اجرا لطمه بزنه.وقتی میخوای از useMemo استفاده کنی، میتونی از ابزارهای پروفایلینگ برای تشخیص مشکلات اجرای سنگین کمک بگیری. سنگین یعنی برنامه منابع (مثل حافظه) زیادی استفاده میکنه.استفاده از هوک مناسبعلاوه بر useMemo، هوک های useCallback، useRef و useEffect رو هم داریم.هوک useCallback مشابه useMemo هست، با این تفاوت که تابع memoized برمیگردونه، درحالیکه useMemo تابعیه که مقداری رو برمیگردونه.برای درخواست های async نباید از useMemo استفاده بشه. در این موارد از useEffect استفاده کن.

ایزوله کردن استایل در React به کمک CSS Modules

حمیدرضا ناطقی — Sun, 12 Jul 2020 11:47:54 +0430

استایل کامپوننت یا در یک فایل جداگونه با پسوند css یا scss و یا مستقیما در فایل جاوا اسکریپت به کمک مفهومی به نام css-in-js تعریف میشه.وقتی از فایل جداگونه استفاده کنی، بصورت پیش فرض، تمام استایل ها گلوبال هستن، و باید از تداخل جلوگیری کنی. در این پست روشی رو بهت یاد میدم که استایل رو برای کامپوننت ایزوله کنی.فایل جداگونه یا css-in-js؟وقتی از فایل جداگونه استفاده میکنی، معمولا، یک فایل با پسوند css یا scss و همنام با کامپوننت میسازی و به فایل جاوا اسکریپت کامپوننت وارد میکنی، تا بخشی از پکیج باشه. متناوبا، میتونی از یک کتابخونه استفاده کنی که از قواعد css-in-js پیروی میکنه و به کمک آبجکت های json استایل هارو مستقیما در فایل جاوا اسکریپت درج میکنه. مفهوم css-in-js یک کتابخونه نیست؛ گروهی از کتابخونه هاست که از قواعد مشابهی پیروی میکنن.هر دو روش محبوب هستن؛ هر روش مزایا و معایبی داره. وقتی از فایل جداگونه استفاده میکنی، استایل هارو کنار تعریف کامپوننت مینویسی، پس احتمالا انتظار داری که فقط به اون کامپوننت اعمال بشن. درحالیکه، در زمان اجرا، تمام استایل ها به head صفحه اضافه میشن، پس استایل ها از هم تفکیک نمیشن، و تداخل اجتناب ناپذیره.مفهوم css-in-js با تولید گزینشگرهای منحصربفرد از این تداخل جلوگیری میکنه.ساخت کامپوننت باکس با استایلتصویر زیر دو باکس رو نشون میده، که هر دو پس زمینه سبز رنگ دارن، با اینکه پس زمینه باکس اول باید قرمز رنگ باشه.دو باکس سبز رنگ بجای یک باکس قرمز و یک باکس سبزاین کدی هستش که برای این دو باکس نوشته شده.فایل استایل GreenBox.css.box { background: green; }فایل جاوا اسکریپت GreenBox.jsximport React from 'react'; import './GreenBox.css'; export function GreenBox() { return

Green Box

; }فایل استایل RedBox.css.box { background: red; }فایل جاوا اسکریپت RedBox.jsximport React from 'react'; import './RedBox.css'; export function RedBox() { return

Red Box

; }مشکل کجاست؟دو کامپوننت متفاوت تعریف کردیم؛ که هر کدوم استایل خودشو داره. هر دوی اینا کلاسی دارن به اسم box با رنگ پس زمینه متفاوت. وقتی این کد کامپایل میشه، ابزاری که فایل هارو کنار هم میچینه، تمام استایل هارو با هم گروه بندی میکنه، و در زمان اجرا، به head صفحه تزریق میکنه.از اینرو در زمان اجرا، این استایل ها به کامپوننت خودشون گره نخوردن، و قوانین دیگه هم بر روی اینا اثر میذارن. در این مورد، استایل محاسبه شده کلاس box برای هر دوی این کامپوننت ها رنگ پس زمینه سبز رو نمایش میده.استایل محاسبه شده کلاس boxچگونه از رخداد این مشکل جلوگیری کنیم؟متدولوژی های محبوبی، مثل BEM، ABEM، Atomic و SMACSS هستن که از تداخل این نامگذاری ها در مرورگر جلوگیری میکنن.بطور عمومی این روش ها عالی هستن، ولی با وجود کتابخونه های مدرن، راهکارهای جایگزین بهتری هم وجود داره که این پروسه رو خودکار انجام میدن که برای نوشتن برنامه های کامپوننت گرا مناسب هستن.برای اتوماسیون این فرایند، از ماژولی به نام CSS Modules استفاده میکنیم، کتابخونه ای که اطمینان میده در زمان اجرا هر کامپوننت از کلاس های منحصربفردی استفاده کنه.استایل بندی به کمک CSS Modulesبرای استفاده از این ماژول، باید به نام فایل استایل کلمه module. رو قبل از پسوند فایل اضافه کنی.هر دو باکس از یک نام برای کلاس استفاده میکنن ولی در زمان اجرا تداخلی نداریمفایل استایل GreenBox.module.css.box { background: green; }فایل جاوا اسکریپت GreenBox.jsximport React from 'react'; import classes from './GreenBox.module.css'; export function GreenBox() { return

Green Box

; }فایل استایل RedBox.module.css.box { background: red; }فایل جاوا اسکریپت RedBox.jsximport React from 'react'; import classes from './RedBox.module.css'; export function RedBox() { return

Red Box

; }مشکل حل شد

مفهوم Destructuring در جاوا اسکریپت

حمیدرضا ناطقی — Mon, 06 Jul 2020 09:57:10 +0430

تخریب یا Destructuring یک روش ساده و سریع برای ایجاد متغیره. مقادیر متغیرهای ایجاد شده از مقادیر داخل یک آرایه یا مشخصه های داخل یک آبجکت بدست میان. مزیت این روش خوانایی و بهره وری کد نوشته شده ست.با یک مثال شروع کنیم. آجکت ما این شکلیه:const person = { firstName: 'John', lastName: 'Smith', phoneNumber: 123456789, }بدون استفاده از Object Destructuringبدون این روش، متغیرهارو با نوشتن نام آبجکت، گذاشتن یک نقطه بعدش، و بعد نوشتن نام مشخصه ایجاد میکنیم.const firstName = person.firstName; const lastName = person.lastName; console.log(firstName); // John console.log(lastName); // Smithبا استفاده از Object Destructuringبه کمک این روش ایجاد متغیرها بسادگی انجام میشه.const { firstName, lastName } = person; console.log(firstName); // John console.log(lastName); // Smithلازمه که بدونی با این روش بدنبال نام مشخصه هستیم. پس این مشخصه هارو در متغیرهایی با همین نام ذخیره کردیم.توجه کن که لزومی نداره که از تمام مشخصه ها استفاده کنی. در مثال بالا، فقط متغیرهایی برای نام و نام خانوادگی ایجاد کردیم.میتونیم این روش روی آرایه هم پیاده کنیم.بدون استفاده از Array Destructuringconst brands = ['McLaren', 'Renault', 'Ferrari', 'Honda']; const brand = brands[0]; console.log(brand); // McLarenبا استفاده از Array Destructuringconst brands = ['McLaren', 'Renault', 'Ferrari', 'Honda']; const [ brand ] = brands; console.log(brand); // McLarenهمونطور که دیدی برداشتن آیتم اول از آرایه ساده ست، فرض کن بخوایم آیتم سوم رو برداریم. این آیتم در اندیس 2 قرار داره ولی نمیتونیم از اندیس استفاده کنیم. بهمین جهت مجبوریم دستی بشماریم و آیتم هایی که نمیخوایم رو خالی بذاریم.const brands = ['McLaren', 'Renault', 'Ferrari', 'Honda']; const [ , , brand ] = brands; console.log(brand); // Ferrariترکیبی از این دو روش بر روی آرایه ای از آبجکت هایکی از رایج ترین انواع داده در جاوا اسکریپت آرایه ای از آبجکت هاست. فرض کن با این آبجکت پیچیده سر و کار داریم:const persons = [ { firstName: 'John', lastName: 'Smith', phoneNumber: 123456789, accounts: { ing: 'NL69INGB0123456789', rabobank: 'NL44RABO0123456789', abnamro: 'NL02ABNA0123456789' } }, { firstName: 'Josh', lastName: 'Cruz', phoneNumber: 987654321, accounts: { ing: 'NL71INGB0123456789', snsbank: 'NL12SNSB0123456789 } } ]اگه شماره حساب های ING این دو شخص رو بخوایم در دو متغیر ingJohn و ingJosh ذخیره کنیم مینویسیم:const [ { accounts: {ing: ingJohn} }, { accounts: {ing: ingJosh} } ] = persons; console.log(ingJohn); // NL69INGB0123456789 console.log(ingJosh); // NL71INGB0123456789

متدهای آرایه جاوا اسکریپت

حمیدرضا ناطقی — Sat, 27 Jun 2020 10:04:16 +0430

آرایه یکی از مورد استفاده ترین ساختمان داده های جاوا اسکریپته. آرایه یک آبجکته که مجموعه ای از مقادیر یک نوع داده رو ذخیره میکنه. بعنوان مثال، کامنت های یک پست بلاگ یا عکس های یک آلبوم میتونن در یک آرایه ذخیره بشن.متدهای آرایه بسیاری وجود داره که میتونیم به کمک اونا داده ای اضافه کنیم، حذف کنیم یا دستکاری کنیم. در این مقاله تعدادی از متدهای رایج رو پوشش میدم.متد push این متد برای افزودن یک یا چند آیتم به انتهای آرایه استفاده میشه. آرایه اصلی با افزودن آیتم جدید تغییر میکنه. خروجی متد طول آرایه جدیده.let tea = ['breakfast', 'lemon', 'green']; let count = tea.push('peach'); console.log(tea); // ['breakfast', 'lemon', 'green', 'peach'] console.log(count); // 4 tea.push('black', 'strawberry', 'cranberry'); console.log(tea); // ['breakfast', 'lemon', 'green', 'peach', 'black', 'strawberry', 'cranberry']متد unshift این متد یک یا چند آیتم رو به ابتدای آرایه اضافه میکنه. همانند متد push، آرایه مربوط دستکاری میشه و فانکشن هم طول آرایه جدید رو برمیگردونه.let letters = ['a', 'b', 'c', 'd', 'e']; let count = letters.unshift('x', 'y', 'z'); console.log(letters); // ['x', 'y', 'z', 'a', 'b', 'c'] console.log(count); // 8متد pop این متد آخرین آیتم آرایه رو حذف میکنه. آرایه اصلی با حذف آخرین آیتم تغییر میکنه. فانکشن هم آیتم حذف شده رو برمیگردونه.let letters = ['a', 'b', 'c', 'd', 'e']; let poppedItem = letters.pop(); console.log(letters); // ['a', 'b', 'c', 'd'] console.log(poppedItem); // 'e'متد shift این متد اولین آیتم آرایه رو حذف میکنه. بطور مشابه، آرایه مربوط تغییر میکنه و فانکشن هم آیتم حذف شده رو برمیگردونه.let letters = ['a', 'b', 'c', 'd', 'e']; let shiftedItem = letters.shift(); console.log(letters); // ['b', 'c', 'd', 'e'] console.log(shiftedItem); // 'a'متد splice این متد با حذف یا جایگزینی آیتم های آرایه و یا افزودن آیتم های جدید محتویات آرایه رو دستکاری میکنه. آرایه اصلی تغییر میکنه.مثال اول: حذف 2 آیتم از اندیس 0let food = ['salad', 'steak', 'pudding', 'carrot cake']; food.splice(0, 2); console.log(food); // ['pudding', 'carrot cake']مثال دوم: حذف 0 آیتم از اندیس 1 و افزودن 2 آیتم جدیدlet animals = ['koala', 'fish', 'tortoise', 'whale'] animals.splice(1, 0, 'snake', 'rabbit'); console.log(animals); // ['koala', 'snake', 'rabbit', 'fish', 'tortoise', 'whale']مثال سوم: جایگزینی 2 آیتم از اندیس 0 با 2 آیتم جدیدlet tea = ['earl grey', 'lemon', 'green']; tea.splice(0, 2, 'breakfast', 'peach'); console.log(tea); // ['breakfast', 'peach', 'green']متد slice این متد بخشی دلخواه آرایه از نقطه ابتدای مشخص شده تا نقطه انتهایی مشخص شده رو برمیگردونه. اندیس منفی هم استفاده میشه کرد که از انتهای آرایه شروع به شمارش میکنه. اگه نقطه انتهایی مشخص نشده باشه، باقی آرایه برمیگرده. اگه نقطه ابتدایی و انتهایی مشخص نشده باشن، یک کپی از آرایه ساخته میشه. توجه کن که این متد آرایه اصلی رو دستکاری نمیکنه و فقط بخش دلخواه رو برمیگردونه.let food = ['steak', 'pasta', 'cake', 'pudding', 'salad', 'soup']; let copy = food.slice(); console.log(copy); // ['steak', 'pasta', 'cake', 'pudding', 'salad', 'soup'] let dessert = food.slice(2, 4); console.log(dessert); // ['cake', 'pudding'] let starter = food.slice(-2); console.log(starter); // ['salad', 'soup'] let sweets = food.slice(-4, -2); console.log(sweets); // ['cake', 'pudding']متد concat این متد برای ترکیب دو یا چند آرایه استفاده میشه. آرایه اصلی تغییر نمیکنه. فانکشن هم یک آرایه جدید برمیگردونه.let tea = ['breakfast', 'earl grey', 'green']; let juice = ['orange', 'pineapple', 'pear']; let drinks = tea.concat(juice); console.log(drinks); // ['breakfast', 'earl grey', 'green', 'orange', 'pineapple', 'pear']متد includes این متد یک مقدار بولی برمیگردونه که نشون میده این آرایه شامل اون آیتمی هست که دنبالشیم یا نه. آرگومان دوم، که اندیس شروع جستجو رو نشون میده، اختیاریه.let tea = ['breakfast', 'earl grey', 'green']; console.log(tea.includes('breakfast')); // true console.log(tea.includes('strawberry')); // false console.log(tea.includes('earl grey', 1)); // true console.log(tea.includes('earl grey', 2)); // falseمتد find اگه معیار جستجوت مشخصه، میتونی از این متد استفاده کنی. این متد اولین آیتمی که با معیار جستجو همخونی داره رو برمیگردونه. اگه آیتمی پیدا نشه، مقدار undefined برگردونده میشه.در مثال اول، معیار جستجو اینه که دنبال عددی هستیم که از 3 بزرگتره. فانکشن جستجو عدد 4 رو برمیگردونه چون 4 اولین آیتمی هست که با این معیار همخونی داره.در مثال دوم، معیار جستجو اینه که عدد باید از 1 کوچکتر باشه. فانکشن جستجو مقدار undefined برمیگردونه چون هیچ آیتمی با این معیار همخونی نداره.let numbers = [1, 2, 3, 4, 5, 6]; let found = numbers.find(num => num > 3); console.log(found); // 4 found = numbers.find(num => num < 1); console.log(found); // undefinedمتد findIndex این متد تقریبا مشابه متد find هستش. با این تفاوت که بجای اولین آیتم، اندیس اولین آیتمی که با معیار جستجو همخونی داره رو برمیگردونه. اگه آیتمی پیدا نشه عدد 1- رو میگردونه.در مثال اول، معیار جستجو اینه که دنبال عددی هستیم که از 3 بزرگتره. فانکشن جستجو عدد 1 رو برمیگردونه چون 1 اندیس اولین آیتمی هست که با این معیار همخونی داره.در مثال دوم، معیار جستجو اینه که عدد باید از 2 کوچکتر باشه. فانکشن جستجو مقدار 1- برمیگردونه چون هیچ آیتمی با این معیار همخونی نداره.let numbers = [2, 4, 6, 7, 9, 10]; let foundIndex = numbers.findIndex(num => num > 3); console.log(foundIndex); // 1 foundIndex = numbers.findIndex(num => num < 2); console.log(foundIndex); // -1متد indexOf این متد تقریبا مشابه متد findIndex هستش. با این تفاوت که بجای یک فانکشن بعنوان معیار جستجو، یک مقدار میگیره. آرگومان دوم، که اندیس شروع جستجو رو نشون میده، اختیاریه.let juice = ['orange', 'pineapple', 'pear']; let index = juice.indexOf('orange'); console.log(index); // 0 index = juice.indexOf('orange', 1); console.log(index); // -1متد reverse این متد با دستکاری آرایه اصلی اون آرایه رو معکوس میکنه.let array = ['Y', 'P', 'P', 'A', 'H']; let reversed = array.reverse(); console.log(reversed); // ['H', 'A', 'P', 'P', 'Y']از اینکه این مقاله رو مطالعه کردی ممنونم! این مقاله جامع و کامل نیست. هنوزم متدهایی هستن که در موردشون حرف نزدیم. اگه میخوای بیشتر مطالعه کنی، میتونی به اسناد MDN سر بزنی.

سه اشتباهی که برنامه نویسان مبتدی React با state کامپوننت مرتکب میشن

حمیدرضا ناطقی — Tue, 16 Jun 2020 19:50:56 +0430

از قشنگیای برنامه نویسی وب اینه که همیشه دانش جدید هست که یاد بگیری. میتونی کل عمرت رو بذاری زبان های برنامه نویسی، کتابخونه ها و فریم ورک های گوناگون رو مسلط بشی و آخرشم میبینی هنوزم همه چی رو نمیدونی.چون در حال یادگیری هستیم، طبیعیه که اشتباه هم بکنیم. ایرادی نداره. هدف اینه که بهتر و بهتر بشیم. اگه اشتباه کنی و ازش درس بگیری، کارت درسته! ولی اگه اشتباهاتت رو تکرار کنی، خب... پس داری درجا میزنی.بهمین جهت سه مورد از رایج ترین اشتباهاتی که برنامه نویسان مبتدی React بهنگام سر و کار داشتن با state کامپوننت مرتکب میشن رو برات لیست میکنم. نگاهی به هر مشکل میندازیم بعدش میگم چجوری اون مشکل رو حل کنی.1. دستکاری مستقیم stateوقتی state کامپوننت رو تغییر میدی، مهمه که یک کپی جدید از state برگردونی، نه اینکه state فعلی رو مستقیما دستکاری کنی. اگه state رو بدرستی تغییر ندی، الگوریتم React تغییرات رو نمیگیره، و در نتیجه کامپوننت بدرستی آپدیت نمیشه. به این مثال نگاه کن.فرض کن state این شکلیه:this.state = { colors: ['red', 'green', 'blue'] }و میخوای رنگ "زرد" رو به لیست اضافه کنی. وسوسه میشی این شکلی بنویسی:this.state.colors.push('yellow')یا شایدم این شکلی:this.state.colors = [...this.state.colors, 'yellow']ولی هر دو روش اشتباهه! وقتی state یک کامپوننت کلاس رو آپدیت میکنی، باید همیشه از متد setState استفاده کنی، و حواست باشه آبجکت هارو mutate نکنی. روش صحیح افزودن آیتم به این لیست این شکلیه:this.setState(prevState => ({ colors: [...prevState.colors, 'yellow'] }))2. آپدیت state قبلی بدون استفاده از فانکشندو روش برای استفاده از متد setState وجود داره. روش اول اینه که آرگومان آبجکت بهش بدیم. روش دوم اینه که بهش آرگومان فانکشن بدیم. خب، کجا از کدوم استفاده کنیم؟فرض کن، یک دکمه داری که میتونه فعال یا غیرفعال باشه، ممکنه یک تیکه state به نام isDisabled داشته باشی که یک مقدار بولی داره. اگه بخوای این دکمه رو تغییر وضعیت بدی شاید وسوسه بشی آرگومان آبجکت بهش بدی:this.setState({ isDisabled: !this.state.isDisabled })خب، مشکل کجاست؟ مشکل اینه که در حقیقت آپدیت های state بسته بندی میشن، یعنی چندین آپدیت state میتونن در یک تک چرخه آپدیت اتفاق بیفتن. پس اگه چندین آپدیت برای وضعیت فعال و غیرفعال دکمه داری، نتیجه نهایی ممکنه اونطور که انتظار داری نباشه.روش صحیح اینه که یک فانکشن بدیم که state قبلی رو بعنوان آرگومان میگیره:this.setState(prevState => ({ isDisabled: !prevState.isDisabled }))حالا، اگه حتی چندین آپدیت برای وضعیت داشته باشی، هر آپدیت به state قبلی تکیه میکنه بنابراین همیشه نتیجه ای که میگیری همونیه که میخوای.این داستان برای مثلا افزودن تایمر هم صدق میکنه.این شکلی ننویس:this.setState({ counterValue: this.state.counterValue + 1 })این شکلی بنویس:this.setState(prevState => ({ counterValue: prevState.counterValue + 1 }))3. یوقت فراموش کنی متد setState ناهمگامهیادت باشه متد setState یک متد async یعنی ناهمگامه. بعنوان مثال، فرض کن کامپوننتی داریم با state این شکلی:this.state = { name: 'John' };و متدی داریم که state رو آپدیت میکنه و روی کنسول چاپ میکنه:this.setState({ name: 'Matt' }); console.log(this.state.name);شاید فکر کنی روی کنسول 'Matt' چاپ میشه، ولی نخیر! 'John' چاپ میشه!دلیلشم اینه که، دوباره میگم، متد setState ناهمگامه. یعنی آپدیت state میره داخل صف و هر زمان نوبتش بشه صدا زده میشه، ولی خط کد دوم بی درنگ اجرا میشه چون کد ناهمگام روند اجرا رو بلاک نمیکنه.اگه کدی داری که لازمه بعد از آپدیت state اجرا بشه، میتونی یک فانکشن callback به متد setState بدی.پس مینویسیم:this.setState({ name: 'Matt' }, () => console.log(this.state.name));کلام آخر اینکه، یادت باشه اشتباه کردن هیچ ایرادی نداره. داری یاد میگیری دیگه، منم دارم یاد میگیرم. هممون داریم یاد میگیرم. پس همین روند رو ادامه بدیم تا بهتر و بهتر بشیم.

فرمان های بنیادی گیت

حمیدرضا ناطقی — Mon, 15 Jun 2020 21:32:29 +0430

اگه میخوای گیت رو به بهترین نحو استفاده کنی، باید فرمان هاش رو بدونی.چرا؟چون فرمان های گیت بنیاد گیت رو تشکیل میدن. بالاخره یک زمانی باید این مهارت رو مسلط بشی، مخصوصا اگه برنامه نویس هستی.گیت محبوبیت داره، مایکروسافت از گیت استفاده میکنه. پس شکی نیست که چرا انقدر مهمه.اینجا میخوام پنج فرمان بنیادی گیت رو بهت نشون بدم.فرمان git --versionبا این فرمان میتونی نسخه گیت رو ببینی و حواست باشه که از نسخه قدیمی استفاده نکنی.فرمان git addاین فرمان برای افزودن فایل های جدید به محیط staging استفاده میشه.با این فرمان میتونی یک فایل به محیط staging اضافه کنی.فرمان git add -Aو با این فرمان میتونی چندین فایل رو به محیط staging اضافه کنی.اینجا به این A میگن سوییچ یا آپشن و A که حرف اول All هست یعنی همه.میتونی بجاش از . git add هم استفاده کنی، همون کارو انجام میده.فرمان git statusاین یکی از اون فرمان های خیلی مهمه. با این فرمان میتونی شاخه یا همون branch که داری روش کار میکنی رو ببینی و فایل هایی که باید commit بشن رو لیست کنی.فرمان "git commit -m "your commit messageالان وقتشه که اون فایل هارو commit کنی.آپشن m که حرف اول message هست یعنی پیغام. میخوای فایل هارو همراه با یک پیغام commit کنی که بعدا بدونی چی به چیه. پس پیغامت رو هم همراه این فرمان مینویسی.اینم بگم که اگه بخوای پیام آخرین commit رو آپدیت کنی میتونی از این خط فرمان استفاده کنیgit commit --amend -m "your updated commit message"پس اساسا، این فرمان فایل های محیط staging رو میفرسته به مخزن گیت.محیط staging چیهاساسا محیط staging گام میانی بین پوشه پروژه روی کامپیوتر و مخزن گیته.امیدوارم که این فرمان هارو به زبان ساده برات توضیح داده باشم.

مهمترین درس هایی که بعد از سال ها کار با React یاد گرفتم

حمیدرضا ناطقی — Sun, 14 Jun 2020 19:39:01 +0430

شروع یک تکنولوژی جدید نسبتا دردسر داره. یهو میبینی وسط اقیانوسی از دوره‌ های آموزشی و مقالات، و میلیون‌ ها نظر شخصی داری غرق میشی. و همشونم ادعا میکنن که "بهترین و صحیح‌ ترین راه" رو پیدا کردن.اینجاست که با خودت میگی نکنه این دوره آموزشی وقتمو هدر کنه.قبل از همه اینا، باید مفاهیم بنیادی یک تکنولوژی رو درک کنیم. بعدش باید ذهنیت خودمون رو به سمت تکنولوژی سوق بدیم. اگه میخوایم React یاد بگیریم، اول مثل React فکر کنیم. اونوقته که میتونیم چندین ذهنیت رو با هم ترکیب کنیم.در این مقاله درس ‌هایی که از تجربیات شخصیم با React گرفتم رو پوشش میدیم. از روزهایی که شرکت بودم و شب ‌هایی که روی پروژه ‌های شخصیم کار میکردم برات تعریف میکنم.بزن بریم!کتابخونه React در حال تکامله، پس باید بروز باشیتیم اصلی React و تمام مشارکت‌ کنندگان برای بهبود این تکنولوژی خیلی زحمت میکشن.پس اگه میخوای بهترین باشی، باید با اتفاقاتی که در این جامعه میفته بروز باشی.بدونی که چی چجوری کار میکنه و چرا همچین چیزی رو اضافه کردن. یاد بگیری مشکلات چجوری حل میشن و نسخه جدید چه کمکی کرده. خیلی بهت کمک میکنه.از اینکه کدت رو تیکه تیکه کنی نترسساختار React بر پایه کامپوننت ‌هاست. پس باید از این اهرم استفاده کنی و از اینکه تیکه ‌های بزرگ کدت رو به تیکه‌ های کوچیکتر تقسیم کنی نترسی.گاهی اوقات یک کامپوننت ساده با چهار پنج خط کد میتونه ساخته بشه، و در بعضی موارد، هیچ ایرادی نداره.بطوریکه اگه یک نفر جدید کد رو بخونه، لازم نیست چند روز وقت بذاره تا بفهمه.return ( [ , ] );مجبور نیستی کامپوننت ‌هایی بسازی که همشون منطق پیچیده ‌ای دارن. میتونن فقط نمایشی باشن. اگه با این کار خوانایی و تست کد بهتر بشه، به نفع تمام اعضای تیم توسعه‌ ست.import ErrorMessage from './ErrorMessage'; const NotFound = () => ( );در مثال بالا، مشخصه ها همگی ثابت هستن. پس میتونیم کامپوننتی داشته باشیم که فقط و فقط وظیفه نمایش پیام خطای 404 رو به عهده بگیره.همچنین، اگه دلت نمیخواد همه جا از کلاس های CSS استفاده کنی، پیشنهاد میکنم از کامپوننت های styled استفاده کنی. خوانایی کد رو خیلی بالا میبره.const Number = styled.h1` font-size: 36px; line-height: 40px; margin-right: 5px; padding: 0px; `; //.. {skipRatePre} Skip Rate اگه میترسی کامپوننت بیشتر بسازی که یوقت ساختار پوشه ها و فایل هات شلوغ نشه، ساختاربندی پروژه رو تغییر بده. من از ساختار فراکتال استفاده میکنم و راضیم.به مفاهیم ابتدایی بسنده نکن — حرفه ای شوشاید گاهی اوقات فکر کنی که هنوز آمادگیشو نداری به سمت مفاهیم پیشرفته خیز برداری. اما اغلب اوقات نباید نگران باشی — خودت رو به چالش بکش و نشون بده که اشتباه میکردی.با مطالعه مفاهیم پیشرفته و اینکه به خودت سختی بدی، میتونی مفاهیم ابتدایی رو بیشتر درک کنی و بفهمی که چجوری برای مقاصد بزرگتر استفاده میشن.به این الگوها میتونی سرک بکشی:کامپوننت های ترکیبیکامپوننت های مرتبه بالا یا Higher Orderپراپ های رندرکامپوننت های باهوش و نادانمفاهیمی مثل Profilingوقتی بفهمی اینا کجا و چجوری استفاده میشن، با React بیشتر خو میگیری.render() { const children = React.Children.map(this.props.children, (child, index) => { return React.cloneElement(child, { : () => this.props.onTabSelect(index) }); }); return children; }همچنین، از اینکه چیزای جدیدی سر کار امتحان کنی نترس — با محدودیت های خاص، البته! فقط روی پروژه های شخصی آزمایش نکن.ممکنه سوال پیچت کنن، که خب طبیعیه. باید با دلیل و منطق از کارت دفاع کنی.هدفت باید این باشه که مشکلات رو حل کنی، روند توسعه رو آسون تر کنی، یا پیچیدگی های کد رو بگیری. حتی اگه پیشنهادات رد بشن، بازم نسبت به اینکه ساکت باشی بیشتر یاد میگیری.کد رو خیلی پیچیده نکندر هر موقعیت باید تعادل رو برقرار کنیم. نباید خیلی درگیر مهندسی بشیم. باید عملی باشیم. کدی بنویسیم که نه تنها کارش رو بدرستی انجام میده بلکه درکش هم ساده باشه.اگه به Redux نیاز نداری، و نمیدونی دقیقا هدفش چیه ولی صرفا چون بقیه ازش استفاده میکنن میخوای ازش استفاده کنی، نکن.گاهی اوقات ممکنه فکر کنی که اگه از آخرین تکنولوژی ها استفاده کنی و هرچقدر کدت پیچیده تر باشه به جهان میگی: "من مبتدی نیستم، دارم حرفه ای میشم. ببینین چه چیزایی بلدم!"ولی به مرور زمان میفهمی کدی که به رخ کشیده نشه و کارشو انجام بده خیلی بیشتر به دل میشینه. چرا؟ چونهمکارات میتونن روی پروژه کار کنن و به تنهایی وظیفه توسعه / اشکال زدایی / تست رو بر عهده نداری.تیم میفهمه بقیه چکار کردن و نیازی به جلسات طولانی و فرسایشی نیست.وقتی دو هفته میری مرخصی، بقیه میتونن کارتو انجام بدن.مردم به کسی که زندگیشون رو راحت تر میکنه احترام میذارن. بنابراین اگه میخوای احترام داشته باشی، پیشرفت کنی، و بهتر بشی، هدفت این باشه برای تیم کد بزنی نه برای خودت.اینجوری عضو مورد علاقه هر تیمی میشی.اصلاح کن، اصلاح کن و اصلاح کننظرت بارها عوض میشه، نظر مدیر محصول بیشتر از تو عوض میشه. بقیه از کدت ایراد میگیرن، خودتم از کدت ایراد میگیری. در نتیجه، مجبوری بارها و بارها کدت رو عوض کنی.ولی نگران نباش، روند یادگیری همینه. بدون اشتباه و خطا بهتر نمیشیم.هرچی بیشتر زمین میخوریم، بلند شدنمون راحت تر میشه.