آموزش مفاهیم پیشرفته React: رندر مجدد، عملکرد و بهینه‌سازی - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• این دوره برای چه کسانی است؟ Who is this course for?

• کد منبع Source code

وضعیت به عنوان یک عکس فوری: درک عمیق State as a Snapshot: Deep Understand

• واقعیت در مورد وضعیت The fact about state

• وضعیت به عنوان یک عکس فوری - مفهوم State as a snapshot - concept

• درک عکس فوری Understand snapshot

• مثال عکس فوری Snapshot example

• مثال عکس فوری بیشتر More snapshot example

• تنظیم وضعیت جدید با استفاده از کال‌بک Set new state using callback

• شی وضعیت تو در تو Nested state object

• چگونه وضعیت را جهش دهیم؟ How to mutate state?

• هوک useImmer useImmer hook

باز رندر: درک عمیق Re-render: Deep Understand

• مقدمه ای بر باز رندر Introduction to re-render

• کامپوننت سنگین HeavyComponent

• مروری بر چرخه حیات Lifecyle overview

• قانون اول برای رفع عملکرد: جداسازی وضعیت First rule to fix performance: Isolate State

• تصور غلط در مورد پراپ‌ها Misconception about props

• قانون دوم برای رفع عملکرد: رندر به عنوان پراپ Second rule to fix performance: Render as Props

• ElementBeforeReRender در مقابل ElementAfterReRender ElementBeforeReRender vs ElementAfterReRender

• بازسازی برای رندر به عنوان فرزند Refactor to render as children

• خلاصه Summarize

مموی‌سازی: افزایش بهینه‌سازی عملکرد Memoization: Enhance Performance Optimization

• مقدمه ای بر مموی‌سازی Introduction to memoization

• جلوگیری از رندر مجدد غیر ضروری با استفاده از memo Prevent unnecessary re-render using memo

• شکستن memo - چرا memo کار نمی کند؟ Break memo - Why memo not work?

• useCallback - تابع memo useCallback - memo function

• useMemo - نتیجه memo useMemo - memo result

• memo با useCallback و useMemo memo with useCallback & useMemo

الگوریتم های تطبیق و تمایز Reconciliation & Diffing Algorithms

• مروری بر بخش Section Overview

• هوم. چه خبره؟؟ Hmm. What's going on??

• چگونه React تصمیم می گیرد کامپوننت را unmount کند؟ How does React decide to unmount component?

• تفاوت بین رندر مجدد و mount/unmount The difference between re-render and mount/unmount

• اجبار کامپوننت به mount/unmount Force component mount/unmount

• درک عمیق پراپ "key" Deep understand the "key" props

• اجبار کامپوننت به unmount با پراپ "key" Force component unmount with "key" props

• الگوی ضد طراحی The anti-pattern

کامپوننت مرتبه بالاتر (HOC) Higher Order Component (HOC)

• HOC چیست؟ What's HOC?

• درک کامپوننت مرتبه بالاتر Understand higher order component

• پیاده سازی withFetchData HOC Implement withFetchData HOC

• پیاده سازی withTheme HOC Implement withTheme HOC

• اضافه کردن منطق اضافی به HOC Add additional logic to HOC

React Context Deep Dive: از Context نترسید React Context Deep Dive: Don't Scare Context

• مروری بر بخش Section Overview

• مروری بر برنامه App overview

• وضعیت و ارسال پراپ‌ها به پایین State & pass props down

• Context می تواند عملکرد را اصلاح کند Context can fix performance

• بهینه سازی رندر مجدد برای context Optimize re-render for context

Ref: دسترسی به عنصر DOM Ref: Access to DOM Element

• مقدمه Introduction

• توضیح دقیق ref Explain the ref in detail

• اطلاعات بیشتر در مورد ref - تجربی More about ref - experimental

• رایج ترین مورد استفاده Most common use case

• ارسال ref به کامپوننت فرزند Pass ref to children component

• useImperativeHandle useImperativeHandle

شرایط مسابقه در فرانت‌اند Race Condition on Front End

• به این بخش خوش آمدید Welcome to this section

• نمایش شرط مسابقه Race condition demo

• راه حل رفع شرط مسابقه The way to fix race condition