DOM نمای درختی زنده مرورگر از سند HTML است. دستکاری مستقیم آن به دلیل reflowها/repaintها پرهزینه است.
React DOM مجازی (VDOM) را بهعنوان یک نمایش سبک در حافظه از DOM معرفی میکند. در زمان تغییر وضعیت:
useState باعث رندر مجدد میشود → تفاوت VDOM → بهروزرسانیهای حداقل DOM
این مدل عملکرد را بهبود میبخشد و رابطهای کاربری اعلانی را ممکن میسازد.
معناشناسی باید ساختار را هدایت کند، حتی در داخل کامپوننتها. من نقشها و نیتها را به تگهای مناسب (<nav>، <main>، <section>، <article>) نگاشت میکنم.
مثال:
function BlogPost({ title, content }) {
return (
<article>
<h2>{title}</h2>
<section>{content}</section>
</article>
);
}
از سوپ div اجتناب میکنم و کامپوننتها را بهعنوان بستهبندیهای معنایی در نظر میگیرم و تا حد ممکن از تگهای HTML5 استفاده میکنم. این کار دسترسیپذیری و سئو را بهبود میبخشد.
data-*، aria-*) و پراپهای React چگونه فکر میکنید؟React ویژگیهای استاندارد HTML و ویژگیهای خاص (aria-*، data-*) را بهعنوان پراپهایی که به گره DOM منتقل میشوند در نظر میگیرد.
<button aria-label="Close" data-testid="close-btn">
X
</button>
data-*: برای تست، تحلیل یا هوکهای رفتاری.aria-*: برای دسترسیپذیری (پشتیبانی از صفحهخوان).رویکرد:
<nav>، <ul>، <li> و نقشهای ARIA در صورت نیاز.function NavItem({ label, children }) {
return (
<li>
{label}
{children && <ul>{children.map(...)}</ul>}
</li>
);
}
نگرانیها (مثل ارائه در مقابل منطق) را جدا میکنم و ناوبری کیبورد و دسترسیپذیری را تضمین میکنم.
من از کامپوننتهای کنترلشده برای وضعیت قابل پیشبینی استفاده میکنم:
const [email, setEmail] = useState("");
<input value={email} onChange={(e) => setEmail(e.target.value)} />;
برای اعتبارسنجی:
<form onSubmit={handleSubmit(onSubmit)} />
مسیر رندر بحرانی تحت تأثیر قرار میگیرد:
من با موارد زیر بهینهسازی میکنم:
در React:
<button onClick={handleClick}>Click me</button>
مزایا:
در جاوااسکریپت خام:
React چرخه عمر و عملکرد را ساده میکند.
من HTML را برای کار بدون جاوااسکریپت ابتدا میسازم، سپس با React بهبود میدهم.
مثال:
استفاده از:
<noscript><button type="submit">Search</button>
بهبود شامل افزودن فیلترها، انیمیشنها و غیره پس از هیدراتاسیون است.
HTML در SSR رندر اولیه است که به مرورگر تحویل داده میشود:
مدلم:
<head> برای متا، عنوان، پیشبارگذاری (از طریق react-helmet یا @vitejs/plugin-react).window، localStorage در سرور).<meta>، <link>) در یک برنامه تکصفحهای (SPA) چیست؟من متادیتا را بهعنوان بخشی از زمینه مسیر پویا در نظر میگیرم. برای SPAها:
react-helmet یا @tanstack/router برای تنظیم اعلانی <title>، <meta> و غیره.<Helmet>
<title>Product Page</title>
<meta name="description" content="Details about product" />
</Helmet>
برای PWAها، همچنین <link rel="manifest">، آیکونها و نکات پیشبارگذاری را مدیریت میکنم.