M
MLOG
بارگذاری تنبل در React: افزایش عملکرد با تفکیک کد کامپوننت | MLOG | MLOG}> ); } export default App;

در این مثال، کامپوننت‌های Home، About و Contact به صورت تنبل بارگذاری می‌شوند. هنگامی که کاربر به یک مسیر خاص می‌رود، کامپوننت مربوطه به صورت ناهمزمان بارگذاری خواهد شد. کامپوننت Suspense اطمینان می‌دهد که یک نشانگر بارگذاری در حین دریافت کامپوننت نمایش داده می‌شود.

تکنیک‌ها و ملاحظات پیشرفته

مرزهای خطا (Error Boundaries)

مرزهای خطا کامپوننت‌های React هستند که خطاهای جاوا اسکریپت را در هر کجای درخت کامپوننت فرزند خود می‌گیرند، آن خطاها را ثبت می‌کنند و به جای درخت کامپوننتی که از کار افتاده است، یک رابط کاربری جایگزین نمایش می‌دهند. شما می‌توانید از آنها برای مدیریت زیبای خطاهایی که ممکن است در طول بارگذاری کامپوننت‌های بارگذاری شده به صورت تنبل رخ دهد، استفاده کنید.


import React, { lazy, Suspense } from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // به‌روزرسانی state تا رندر بعدی رابط کاربری جایگزین را نشان دهد.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // شما همچنین می‌توانید خطا را به یک سرویس گزارش خطا ارسال کنید
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // شما می‌توانید هر رابط کاربری جایگزین سفارشی را رندر کنید
      return 
مشکلی پیش آمده است.
;
    }

    return this.props.children; 
  }
}

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    
      در حال بارگذاری...}>
        
      
    
  );
}

export default App;

در این مثال، کامپوننت ErrorBoundary کامپوننت Suspense را در بر می‌گیرد. اگر خطایی در حین بارگذاری یا رندر MyComponent رخ دهد، ErrorBoundary خطا را گرفته و رابط کاربری جایگزین را نمایش می‌دهد.

بهترین شیوه‌ها برای بارگذاری تنبل

نمونه‌ها در صنایع مختلف

مزایای بارگذاری تنبل و تفکیک کد در React در صنایع مختلف گسترش می‌یابد. در اینجا چند نمونه آورده شده است:

فراتر از React.lazy و Suspense

در حالی که React.lazy و Suspense یک راه ساده برای پیاده‌سازی بارگذاری تنبل فراهم می‌کنند، کتابخانه‌ها و تکنیک‌های دیگری نیز وجود دارند که می‌توانند ویژگی‌ها و کنترل پیشرفته‌تری ارائه دهند:

نتیجه‌گیری

بارگذاری تنبل در React با تفکیک کد کامپوننت یک تکنیک قدرتمند برای بهینه‌سازی عملکرد برنامه‌های React شما است. با بارگذاری کامپوننت‌ها بر اساس تقاضا، می‌توانید به طور قابل توجهی زمان بارگذاری اولیه را کاهش دهید، تجربه کاربری را بهبود بخشید و مصرف منابع را کاهش دهید. با بهره‌گیری از React.lazy و Suspense، می‌توانید به راحتی بارگذاری تنبل را در پروژه‌های React خود پیاده‌سازی کرده و برنامه‌های وب سریع‌تر و پاسخگوتری ایجاد کنید. به یاد داشته باشید که مدیریت خطا، نشانگرهای بارگذاری و سایر تکنیک‌های پیشرفته را برای اطمینان از یک تجربه کاربری یکپارچه در نظر بگیرید. به طور مداوم عملکرد برنامه خود را نظارت کرده و استراتژی تفکیک کد خود را برای دستیابی به نتایج بهینه اصلاح کنید.

قدرت بارگذاری تنبل را در آغوش بگیرید و پتانسیل یک برنامه وب سریع‌تر، کارآمدتر و کاربرپسندتر را باز کنید.