چرا کامپوننت های React در حالت توسعه دو بار رندر می‌شوند

mohsen•1 سال قبل

ارسال شده در

کامپوننت‌های React ممکن است به دلیل فعال بودن Strict Mode دو بار رندر شوند. این ویژگی به طور خاص در حالت توسعه (Development Mode) فعال است و هدف آن شناسایی مشکلات و هشدار به توسعه‌دهندگان درباره آن‌ها است.

Strict Mode عملکردهای خاصی را دو بار فراخوانی می‌کند تا به شما کمک کند اشکالات مخفی را شناسایی کنید. به عنوان مثال، اگر از create-react-app برای ایجاد برنامه خود استفاده کرده‌اید، ممکن است به طور پیش‌فرض از <React.StrictMode> در index.js پروژه شما استفاده شده باشد:

      ReactDOM.render(
  <React.StrictMode>
    {app}
  </React.StrictMode>,
  document.getElementById('root')
);

برای غیرفعال کردن Strict Mode، می‌توانید تگ <React.StrictMode> را حذف کنید:

      ReactDOM.render(
  {app},
  document.getElementById('root')
);

همچنین در برخی از فریم‌ورک‌ها مانند Next.js، حالت Strict Mode به طور پیش‌فرض فعال است و شما می‌توانید آن را با تغییرات زیر در فایل پیکربندی next.config.js غیرفعال کنید:

      module.exports = {
  reactStrictMode: false,
}

در نهایت، اگرچه غیرفعال کردن Strict Mode ممکن است مسئله شما را حل کند، اما باید به یاد داشته باشید که این قابلیت برای شناسایی زودهنگام اشکالات و مشکلات در کد شما طراحی شده است. در حالت توسعه، وقوع دو بار رندر فقط در Strict Mode است و در هنگام آماده‌سازی برای تولید (Production Mode) چنین چیزی اتفاق نمی‌افتد. بنابراین، اگرچه غیرفعال کردن آن ممکن است به حل مشکل خاص شما کمک کند، خیلی از توسعه‌دهندگان توصیه می‌کنند که این ویژگی را در هنگام توسعه فعال نگه دارید تا بتوانید به شیوه‌ای بهتر کدهای خود را تست و اشکال‌زدایی کنید.

رای

ارسال نظر

مرتب سازی:

اولین نفری باشید که نظر می دهید!