آموزش React Performance Playbook

سرفصل ها و درس ها

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

مقدمه ای بر React Performance Optimization Introduction to React Performance Optimization

• چرا بهینه سازی عملکرد مهم است Why Performance Optimization Matters

• اجتناب از تله های عملکرد Avoiding the Pitfalls of Performance

• گلوگاه‌های رایج واکنش را بشناسید Get to Know Common React Bottlenecks

• خلاصه Summary

انجام ممیزی های عملکرد Conducting Performance Audits

• حسابرسی عملکرد چیست؟ What Is a Performance Audit?

• حسابرسی عملکرد گام به گام Performance Audit Step-by-Step

• درک و حسابرسی Web Vitals Understanding and Auditing Web Vitals

• اندازه گیری عملکرد رندر برنامه Measuring App Rendering Performance

• اندازه گیری عملکرد اجرای برنامه Measuring App Execution Performance

• اندازه گیری عملکرد حافظه برنامه Measuring App Memory Performance

• اندازه گیری زمان رندر با <Profiler/> Measuring Render Time with <Profiler />

• نظارت بر عملکرد در طول زمان Monitoring Performance Over Time

• خلاصه Summary

جلوگیری از رندرهای غیر ضروری Preventing Unnecessary Re-renders

• رندرهای هدر رفته چیست؟ What Are Wasted Renders?

• تشخیص علت به روز رسانی کامپوننت ها Diagnosing Why Components Update

• گذراندن وسایل ساده Simplifying Passing of Props

• React Memoization در 3 دقیقه React Memoization in 3 Minutes

• ایجاد توابع پایدار با useCallback Creating Stable Functions with useCallback

• اجتناب از محاسبات گران قیمت با useMemo Avoiding Expensive Calculations with useMemo

• کنترل رندر مجدد کامپوننت با React.memo Controlling Component Re-rendering with React.memo

• خلاصه Summary

بهینه سازی و بازسازی مولفه ها Optimizing and Refactoring Components

• اصول طراحی اجزای ناب Lean Component Design Principles

• هزینه پنهان آشتی DOM The Hidden Cost of DOM Reconciliation

• بهینه سازی درخت خانواده با استفاده از شکاف ها Optimizing the Family Tree Using Slots

• انتخاب یک روش استایل کارآمد Choosing an Efficient Styling Approach

• کاهش رندر مجدد هوک با استفاده از حالت اشتراکی Reducing Hook Re-rendering Using Shared State

• جداسازی به‌روزرسانی‌ها با استفاده از Render Props Isolating Updates Using Render Props

• کنترل وضعیت داخلی با useReducer Controlling Internal State with useReducer

• ساده سازی رابط کاربری پیچیده با مدیریت دولتی Simplify Complex UI with State Management

• بهینه سازی حالت مشتق شده با انتخابگرها و برش Optimizing Derived State with Selectors and Slicing

• کاهش به‌روزرسانی‌های DOM با userRef و اجزای کنترل نشده Reducing DOM Updates with useRef and Uncontrolled Components

• اولویت بندی به روز رسانی های ایالت فوری با تعلیق Prioritizing Urgent State Updates with Suspense

• خلاصه Summary

بهینه سازی دارایی ها و زمان بارگذاری Optimizing Assets and Loading Time

• اصول تحویل برنامه ناب Lean Application Delivery Principles

• ارزیابی بار اولیه برنامه شما Assessing Your App's Initial Load

• بهینه سازی زنجیره ابزار React شما Optimizing Your React Toolchain

• فعال کردن نقشه های منبع در تولید، یا نه Enabling Source Maps in Production, Or Not

• بهینه سازی انتقال با فهرست مرورگرها Optimizing Transpilation with Browserslist

• تشخیص کد استفاده نشده با ابزار Coverage Diagnosing Unused Code with the Coverage Tool

• تشخیص اندازه باندل با تجزیه و تحلیل باندل Diagnosing Bundle Size with Bundle Analysis

• بهینه سازی بسته ها با تقسیم کد و بارگذاری تنبل Optimizing Bundles with Code Splitting and Lazy Loading

• بهینه سازی پیمایش ها با بارگذاری گمانه زنی و نکات اولویت Optimizing Navigations with Speculative Loading and Priority Hints

• خلاصه و نکات مهم Summary and Takeaways