نوشته های شایان شادان پور

آموزش استفاده از کامپوننت‌های بازگشتی در React.js

شایان شادان پور — Sun, 02 Jul 2023 12:21:49 +0330

مقدمهیکی از ویژگی‌های قدرتمند React.js قابلیت استفاده از کامپوننت‌های بازگشتی یا Recursive Components است. کامپوننت‌های بازگشتی به شما امکان می‌دهند یک کامپوننت را درون خودش تکرار کنید و در نتیجه، ساختار‌های پیچیده و همچنین ساختارهای سلسله‌مراتبی را به راحتی ایجاد کنید. در این مقاله، ما به طور کامل با مفهوم کامپوننت‌های بازگشتی در React.js آشنا می‌شویم و به بررسی مزایا و معایب استفاده از آن‌ها می‌پردازیم.بخش اول: معرفی کامپوننت‌های بازگشتی کامپوننت‌های بازگشتی در React.js اجازه می‌دهند یک کامپوننت را درون خودش تکرار کند. به عبارت دیگر، یک کامپوننت می‌تواند خودش را به عنوان فرزند درون خود قرار دهد. این امکان به شما کمک می‌کند تا ساختارهای تودرتو و تعاملی را با استفاده از تعداد نامحدودی کامپوننت ساده ایجاد کنید.بخش دوم: نحوه استفاده از کامپوننت‌های بازگشتیبرای استفاده از کامپوننت‌های بازگشتی در React.js، شما به ساختار کامپوننتی مشخصی نیاز دارید. به طور معمول، شما از کامپوننت‌های تابعی (Functional Components) استفاده می‌کنید. در این حالت، می‌توانید از خود کامپوننت را به عنوان فرزند درون خود قرار دهید .در ادامه، یک مثال از کامپوننت بازگشتی با استفاده از کامپوننت‌های تابعی (Functional Components) در React.js برای نمایش ساختار دیدگاه‌ها را ایجاد خواهم کرد:در این مثال، مجموعه دیدگاه‌ها در کامپوننت CommentSection تعریف شده است. هر دیدگاه شامل متن و لیست پاسخ‌ها است. ساختار دیدگاه‌ها در کامپوننت CommentSection به صورت بازگشتی با استفاده از کامپوننت Comment نمایش داده می‌شود.کامپوننت CommentSection یک لیست از دیدگاه‌ها را به عنوان ورودی دریافت می‌کند و برای هر دیدگاه، یک نمونه از کامپوننت Comment را ایجاد می‌کند و متن و لیست پاسخ‌ها را به عنوان پارامترهای ورودی به Comment منتقل می‌کند. این عمل با استفاده از متد map بر روی لیست دیدگاه‌ها صورت می‌گیرد.کامپوننت Comment به عنوان نمایشگر هر دیدگاه عمل می‌کند. اگر دیدگاه دارای پاسخ‌ها باشد، کامپوننت Comment را به عنوان فرزند درون خودش قرار می‌دهد تا ساختار پاسخ‌ها را بازتولید کند. این عمل نیز با استفاده از متد map بر روی لیست پاسخ‌ها انجام می‌شودبخش سوم: مزایا و معایب استفاده از کامپوننت‌های بازگشتیمزایا:ایجاد ساختارهای پیچیده: استفاده از کامپوننت‌های بازگشتی به شما امکان می‌دهد ساختارهای پیچیده را با استفاده از کامپوننت‌های ساده و تکراری ایجاد کنید. این باعث می‌شود که کد شما خوانا‌تر، قابل نگهداری‌تر و گسترش‌پذیرتر شود.تعاملات داینامیک: با استفاده از کامپوننت‌های بازگشتی، می‌توانید تعاملات داینامیک و مبتنی بر وضعیت را پیاده‌سازی کنید. به عنوان مثال، می‌توانید یک لیست سلسله‌مراتبی را بازگشتی نمایش دهید و به راحتی و به صورت داینامیک آیتم‌ها را اضافه یا حذف کنید.معایب:پیچیدگی بیشتر: استفاده از کامپوننت‌های بازگشتی ممکن است پیچیدگی کد را افزایش دهد، به خصوص در ساختارهای پیچیده و با تعداد زیادی کامپوننت بازگشتی. در نتیجه، ممکن است مدیریت و نگهداری کد دشوارتر شود.عملکرد : استفاده بی‌رویه از کامپوننت‌های بازگشتی ممکن است منجر به افزایش تعداد رندرها و در نتیجه کاهش عملکرد کامپوننت‌ها شود. بنابراین، در استفاده از کامپوننت‌های بازگشتی باید بهینه‌سازی‌های لازم را اعمال کنید.لطفا توجه داشته باشید که از منطق درستی برای پیاده سازی استفاده میکنید زیرا ممکن باعث به وجود آمدن حلقه بی نهایت شودنتیجه: کامپوننت‌های بازگشتی در React.js ابزاری قدرتمند هستند که به شما امکان می‌دهند ساختارهای پیچیده و سلسله‌مراتبی را با استفاده از تعداد کمی کامپوننت ساده ایجاد کنید. با این حال، باید در استفاده از آن‌ها به دقت عمل کنید تا پیچیدگی کد را کنترل کنید و بهینه‌سازی‌های لازم را اعمال کنید.

ایجاد یک هوک React برای ویبره دستگاه

شایان شادان پور — Sat, 15 Apr 2023 00:58:21 +0330

ویبره دادن می تواند یک راه مفید برای ارائه بازخورد لمسی به کاربران در برنامه های وب باشد. در این مقاله ، به بررسی اینکه چگونه یک هوک React برای ویبره دادن با استفاده از API vibrate در Typescript ایجاد کنیم، می پردازیم.API vibrate بخشی از API لرزش های وب است که به برنامه های وب امکان لرزش دادن دستگاه توسط کدی که در آن اجرا می شوند را می دهد. این API راهی ساده برای لرزش دادن دستگاه به مدت زمان مشخص یا با یک الگو خاص ارائه می دهد.برای استفاده از API vibrate، می توانید تابع navigator.vibrate را با یک آرگومان واحد فراخوانی کنید که الگوی لرزش را مشخص می کند. الگوی لرزش می تواند یک عدد واحد باشد که مدت زمان لرزش را به میلی ثانیه مشخص می کند، یا آرایه ای از اعداد که مدت زمان های لرزش و توقف های آنها را مشخص می کندبه عنوان مثال، برای لرزش دستگاه به مدت 200 میلی ثانیه، می توانید navigator.vibrate(200) را فراخوانی کنید. برای لرزش دستگاه با الگوی دو لرزش کوتاه و یک وقفه بلند و سپس سه لرزش کوتاه، می توانید navigator.vibrate([50، 50، 100، 50، 50، 50]) را فراخوانی کنیدحال، ما می‌خواهیم یک هوک سفارشی بنویسیم که به راحتی بتوانیم با استفاده از آن برای بازخورد لرزشی از API vibrate استفاده کنیم.ایجاد هوک سفارشیtype VibrationPattern = number | number[];این کد یک نوع داده‌ی TypeScript به نام VibrationPattern تعریف می‌کند که می‌تواند شامل یک عدد یا یک آرایه از اعداد باشد. ما این نوع داده را برای ذخیره الگوی اثر لرزشی که به hook ما ارسال می‌شود، استفاده می‌کنیم.Hook useVibration:const useVibration = (pattern: VibrationPattern): (() => void) => {}این کد یک hook سفارشی برای React تعریف می‌کند که به آن useVibration می‌گویند. این hook یک الگوی اثر لرزشی به عنوان ورودی دریافت می‌کند و یک تابع را به عنوان خروجی برمی‌گرداند.isSupported State : const [isSupported, setIsSupported] = useState(false);این کد یک state به نام isSupported را تعریف می‌کند که مشخص می‌کند آیا دستگاه کاربر از API navigator.vibrate پشتیبانی می‌کند یا خیر. این وضعیت با استفاده از useState ایجاد شده است و مقدار اولیه آن false قرار داده شده است.قبل از هرچیز، نیاز است که چک کنیم که دستگاه کاربر پشتیبانی از ویبره دارد یا خیر. برای این منظور، چک می کنیم که در navigator آیا vibrate وجود دارد یا خیر useEffect(() => { setIsSupported(!!navigator.vibrate) }, []); این کد یک افکت را با استفاده از useEffect تعریف می‌کند که هنگامی که component بارگذاری می‌شود، اجرا می‌شود. در این حالت، از navigator.vibrate استفاده می‌کنیم تا بررسی کنیم که آیا دستگاه کاربر از این API پشتیبانی می‌کند یا خیر. سپس، با استفاده از setIsSupported، مقدار وضعیت isSupported را به true یا false تغییر می‌دهیم.vibrate functionconst vibrate = () => { if (isSupported) { try { navigator.vibrate(pattern); } catch (error) { console.error("Vibration failed: ", error); } } else { console.error("Vibration not supported on this device."); } };این کد تابع vibrate را تعریف می‌کند که الگوی اثر لرزش را با استفاده از API navigator.vibrate اجرا می‌کند. در ابتدا، این تابع بررسی می‌کند که آیا دستگاه کاربری از navigator.vibrate پشتیبانی می‌کند یا خیر. اگر پشتیبانی شود، سعی می‌کند الگوی اثر لرزش را با استفاده از navigator.vibrate اجرا کند. در غیر این صورت، یک خطای مناسب نمایش داده می‌شودکد کامل :import {useEffect, useState} from 'react' type VibrationPattern = number | number[]; const useVibration = (pattern: VibrationPattern): (() => void) => { const [isSupported, setIsSupported] = useState(false); useEffect(() => { setIsSupported(!!navigator.vibrate); }, []); const vibrate = () => { if (isSupported) { try { navigator.vibrate(pattern); } catch (error) { console.error('Vibration failed: ', error); } } else { console.error('Vibration not supported on this device.'); } }; return vibrate; };نحوه استفاده :برای استفاده از این Hook، ابتدا آن را در فایل خودتان import کنید. سپس به آن ورودی الگوی لرزش را ارسال کنید. به عنوان مثال، فرض کنید می‌خواهید دستگاه کاربر هنگام برخورد با خطاهایی که در برنامه شما رخ می‌دهند، لرزش داشته باشد. برای این منظور، می‌توانید از Hook useVibration به شکل زیر استفاده کنید:import { useState } from 'react'; import useVibration from './useVibration'; const MyComponent = () => { const [errorMessage, setErrorMessage] = useState(''); const vibrate = useVibration(1000); const handleClick = () => { try { // some code that may throw an error } catch (error) { setErrorMessage(error.message); vibrate(); } } return (

{errorMessage &&

{errorMessage}

}

) }سخن پایانی : به این هوک میشه ویژگی های زیادی اضافه کرد در کل هدف این آموش آشنایی با vibrate API است امیدوارم که این توضیحات به شما کمک کافی را برای درک کد و اصول بهینه سازی و نگهداری کافی را داشته باشد. در صورتی که سوال دیگری داشتید، با من در ارتباط باشید.