بهترین شیوه های React JS - مبتدی تا متخصص

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

مقدمه Introduction

• خوب است بدانید Good to know

اشتباهات رایجی که باید از آنها اجتناب کنید Common Mistakes to Avoid

• useState Async است useState is Async

• حالت پیش فرض Default state

• اثر استفاده غیر ضروری Unnecessary useEffect

• جهش اشیاء حالت Mutating state objects

• حفاری پایه Prop drilling

• تامین کننده جهنم پیچیده Provider wrapping hell

• عجله به React.memo Rushing into React.memo

• همگام سازی حالت ها از طریق useEffect Syncing states via useEffect

• رندر مشروط Conditional rendering

• استفاده غیر ضروری دیگر Another unnecessary useEffect

بهترین شیوه های رایج Common Best Practices

• معرفی حالت غیر ممکن Introducing impossible state

• اجزای کپسوله کننده Encapsulating components

• بهینه سازی یک رندر هدر رفته دیگر Optimizing another wasted re-render

• معرفی حالت غیرممکن شماره 2 Introducing impossible state #2

• یک راهنمایی a ref tip

• گروه بندی ایالت ها Grouping states

• تنظیم مجدد حالت State reset

• حالت زائد Redundant state

• ذخیره سازی Caching

• رندر مشروط Conditional rendering

• بهبود رندر شرطی Improving conditional rendering

• کنترل کننده کارریینگ Currying handler

• Enums Enums

• الگوی کارخانه در React Factory pattern in React

• اگر بیانیه ها را پاک کنید Clean if statements

• عادی سازی حالات Normalizing states

• یک نکته فرم a Form tip

• React Portals React Portals

• ارجاعات ارسالی Forwarding Refs

• مرزهای خطا Error Boundaries

• کلیدها توضیح داده شده است Keys Explained

• شنوندگان رویداد را جذب کنید Capture Event Listeners

• API زمینه بهینه Optimized Context API

نکات React Hooks React Hooks Tips

• واکشی داخل useEffect Fetching inside useEffect

• شرایط مسابقه در useEffect Race conditions in useEffect

• یک رندر هدر رفته دیگر Another wasted re-render

• ایجاد قلاب های سفارشی Creating custom hooks

• استفاده از callback مانند userRef عمل می کند Making useCallback act like useRef

• useEffect و حلقه های بی نهایت useEffect and infinite loops

• استفاده صحیح از useCallback Using useCallback properly

• یک قلاب سفارشی مفید a Useful custom hook

• افزایش خوانایی با قلاب های سفارشی Increasing readability with custom hooks

• توابع برچسب گذاری شده با useEffect Labeled functions with useEffect

• جدا کردن منطق تجاری از رابط کاربری Separating business logic from UI

• یک اشتباه useEffect a useEffect mistake

• اثر استفاده غیر ضروری Unnecessary useEffect

• به روز رسانی متمرکز دولت Centralized state updates

• استفاده از الگوی کاهش دهنده useReducer pattern

• useLayoutEffect useLayoutEffect

• useId useId

• استفاده از ImperativeHandle useImperativeHandle

• useDeferredValue useDeferredValue

• استفاده از انتقال useTransition

• روتر واکنش Async Async React Router

نکات تایپ اسکریپت Typescript Tips

• جزئی Partial

• بررسی جامع بودن Exhaustiveness checking

• کلید keyof

• ضبط کنید Record

• شرایط Conditionals

• راضی می کند Satisfies

• اجازه دهید در مقابل const let vs const

• نقشه برداری Mapping

• تغییر نام کلیدها Renaming Keys

• اتحادیه ها در مقابل تقاطع ها Unions vs Intersections

• تقاطع با لفظ رشته ای Intersecting with string literals

• نوع typeof

• ژنریک ها Generics

• برگه تقلب ژنریک Generics cheat sheet

• یک مطالعه موردی a Case-study

• هر در مقابل ناشناخته any vs unknown

• حذف کنید Omit

• عملگر باطل Nullish operator

• انتخاب کنید Pick

• نوع بازگشت ReturnType

• انواع دسترسی به فهرست Index Access types

• انواع اتحادیه های نقشه برداری شده Mapped union types

• مورد نیاز Required

• اتحادیه های تبعیض آمیز Discriminated Unions

• به عنوان قاعده as const

• تنظیمات tsconfig tsconfig settings

• نکته دیگر tsconfig Another tsconfig tip

• NonNullable NonNullable

چند نکته در مورد React with Typescript Some Tips on React with Typescript

• لوازم فقط خواندنی Readonly props

• Children.toArray Children.toArray

• استفاده قبلی usePrevious

• پیش بارگذاری تصاویر Preloading Images

• Render Props Render Props

• تایپ Props Typing Props

• انواع در مقابل رابط ها Types vs interfaces

• اضافه بار عملکرد Function overloads

• اجزای مرتبه بالاتر قسمت 1 Higher Order components Part 1

• اجزای مرتبه بالاتر قسمت 2 Higher Order components Part 2

• Render Props Render Props

• قلاب های سفارشی Custom Hooks

• محدود کردن ترکیب پروپ Limiting Prop Composition

• نیاز به ترکیب پایه Requiring prop Composition

• تایپ های مختصر Concise typings

• PropsWithChildren PropsWithChildren

• ReactNode ReactNode

نکات استایل Styling Tips

• محاسبه نام کلاس ها Calculating classnames

• لوازم صریح در مقابل نام کلاس ها Explicit props vs classnames

• اجزای توسعه پذیر Extensible components

ساختار پروژه مقیاس پذیر Scalable Project Structure

• معماری عمومی General Architecture

• اجزای مسیر Route Components

• محصور کردن اجزاء و منطق Encapsulating Components and Logics