آموزش مدیریت React State

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

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

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

تصمیم گیری در مورد نحوه و زمان اعلام دولت Deciding How and When to Declare State

• مخاطب و پیش نیازها را هدف قرار دهید Target Audience and Prerequisites

• دستور جلسه Agenda

• تاریخچه مختصری از مدیریت حالت واکنش A Brief History of React State Management

• هشت راه برای کنترل حالت واکنش Eight Ways to Handle React State

• ساختارهای داده جاوا اسکریپت JavaScript Data Structures

• خلاصه Summary

مدیریت محلی و محلی از راه دور Managing Local and Remote State

• معرفی Intro

• نسخه ی نمایشی را تنظیم کنید Set up Demo

• اعلام حالت با useState Declaring State with useState

• قوانین قلاب The Rules of Hooks

• پیاده سازی كننده های رویداد Implementing Event Handlers

• React Developer Tools React Developer Tools

• پیاده سازی حالت مشتق شده و بررسی هنگام رندرهای واکنشی Implementing Derived State and Exploring When React Renders

• واکشی و ذخیره داده ها از طریق useEffect Fetching and Storing Data Via useEffect

• چهار راه برای انجام تماس های API Four Ways to Handle API Calls

• مدیریت خطاها از طریق مرز خطا Handling Errors via Error Boundary

• مدیریت حالت بارگیری Handling Loading State

• پیاده سازی Async/در انتظار استفاده Implementing Async/await in useEffect

• ایجاد قلاب های سفارشی برای مدیریت حالت از راه دور Creating Custom Hooks for Handling Remote State

• مصرف قلاب سفارشی Consuming a Custom Hook

• خلاصه Summary

اجرای مسیریابی Implementing Routing

• معرفی Intro

• پیکربندی React Router's Entry Point Configuring React Router's Entry Point

• ایجاد یک چیدمان برنامه Creating an App Layout

• اعلام مسیرها Declaring Routes

• اعلام متغیرهایی URL Declaring URL Placeholders

• خواندن متغیرهایی URL Reading URL Placeholders

• دست زدن به 404s Handling 404s

• خواندن متغیرهای URL در صفحه جزئیات Reading URL Placeholders on the Detail Page

• پیاده سازی Nav-side سمت مشتری از طریق Link و NavLink Implementing Client-side Nav via Link and NavLink

• واکشی براساس پارامتر URL Fetching Based on a URL Parameter

• دست زدن به 404s در صفحه جزئیات Handling 404s on the Detail Page

• تغییر مسیر از طریق useNavigation Redirecting via useNavigation

• خلاصه Summary

مدیریت حالت اشتراکی ، مشتق شده و تغییرناپذیر Managing Shared, Derived, and Immutable State

• معرفی Intro

• ایجاد اندازه کفش را انتخاب کنید Creating a Shoe Size Select

• اجرای دولت مشتق شده Implementing Derived State

• تصمیم گیری در مورد ذخیره وضعیت Deciding Where to Store State

• دولت بلند کردن Lifting State

• چرا تغییرناپذیری؟ Why Immutability?

• مدیریت تغییر ناپذیری Handling Immutability

• پیاده سازی غیر قابل تغییر دوستانه Implementing Immutable-Friendly Add

• نمایش موارد سبد خرید Displaying Cart Items

• در حال اجرا به روز رسانی دوستانه غیر قابل تغییر Implementing Immutable-Friendly Update

• در حال اجرا حذف غیر قابل تغییر دوستانه Implementing Immutable-Friendly Delete

• حالت استخراج برای هدر سبد خرید Deriving State for Cart Header

• Lazy Starting State و دولت پایدار به localStorage Lazy Initializing State and Persisting State to localStorage

• خلاصه Summary

در حال اجرا اعتبار سنجی فرم Implementing Form Validation

• معرفی Intro

• ایجاد پرداخت Creating Checkout

• متمرکز کردن عوامل کنترل تغییر و رویدادهای مداوم Centralizing Change Handlers And Persisting Events

• تصمیمات اعتبار سنجی Form Validation Decisions

• معرفی فهرست های دولتی Intro to State Enums

• اجرای Enum State در هنگام پرداخت Implementing a State Enum On Checkout

• ذخیره سبد ارسال فرم و تخلیه Saving the Form Submission and Emptying Cart

• Enums دولت در مقابل ماشینهای حالت متناهی State Enums vs. Finite State Machines

• در حال اجرای اعتبار سنجی فرم "در حین پرواز" Implementing "On-the-fly" Form Validation

• پیگیری لمس برای تأیید اعتبار فوری Tracking Touch for Instant Validation

• خلاصه Summary

اداره دولت از طریق Refs Managing State via Refs

• معرفی Intro

• چه موقع Ref. را در نظر بگیرید When to Consider a Ref

• پیاده سازی ورودی های کنترل نشده Implementing Uncontrolled Inputs

• ورودی های کنترل شده در مقابل ورودی های کنترل نشده Controlled vs. Uncontrolled Inputs

• اجتناب از تنظیم وضعیت اجزای پیاده نشده Avoiding Setting State on Unmounted Components

• ذخیره یک مقدار قبلی Storing a Previous Value

• خلاصه Summary

مدیریت حالت پیچیده با useReducer Managing Complex State with useReducer

• معرفی Intro

• چرا از Reducer استفاده می کنیم؟ Why useReducer?

• استخراج مدیریت دولت به UseReducer Extracting State Management to UseReducer

• مدیریت انواع اقدام غیرمنتظره Handling Unexpected Action Types

• دست زدن به کاهش دهنده ها Handling Add In Reducers

• مدیریت به روزرسانی ها در کاهش دهنده ها Handling Updates In Reducers

• مصرف گیرنده ها Consuming Reducers

• اعزام اقدامات Dispatching Actions

• useState در مقابل useReducer useState vs. useReducer

• خلاصه Summary

به اشتراک گذاری حالت و توابع از طریق زمینه Sharing State and Functions via Context

• معرفی Intro

• چرا متن Why Context?

• اعلام متن Declaring a Context

• اعلام ارائه دهنده زمینه Declaring a Context Provider

• مصرف یک متن Consuming a Context

• ایجاد یک کامپوننت ارائه دهنده Creating a Provider Component

• بسته بندی برنامه در یک ارائه دهنده زمینه Wrapping the App in a Context Provider

• ایجاد یک استفاده مجدد قابل استفاده Creating a Reusable useContext Hook

• مصرف متن از طریق قلاب سفارشی Consuming Context via a Custom Hook

• نیاز به ارائه دهنده متن Requiring a Context Provider

• خلاصه Summary

مدیریت حالت در اجزای کلاس Managing State in Class Components

• معرفی Intro

• اجزای کلاس در مقابل اجزای عملکرد Class Components vs Function Components

• به اشتراک گذاری منطق و مصرف قلاب - گزینه 1: عبور از Props Sharing Logic and Consuming Hooks - Option 1: Pass via Props

• اعلام دولت Declaring State

• دولت مشتق شده Deriving State

• حالت تنظیم Setting State

• تخریب و استخراج دولت در Render Destructuring and Deriving State in Render

• اتصال به این مورد از طریق توابع پیکان در قسمتهای کلاس Binding to This via Arrow Functions in Class Fields

• به اشتراک گذاری منطق و مصرف قلاب - گزینه 2: بسته بندی سفارشی Sharing Logic and Consuming Hooks - Option 2: Custom Wrapper

• اشتراک منطق و مصرف قلاب - گزینه 3: ارائه رندر Sharing Logic and Consuming Hooks - Option 3: Render Prop

• مصرف Render Prop Consuming a Render Prop

• به اشتراک گذاری منطق و مصرف قلاب - گزینه 4: عملکرد در دوران کودکی Sharing Logic and Consuming Hooks - Option 4: Function as Child

• مصرف یک متن واحد از طریقtextType Consuming a Single Context via contextType

• مصرف چندین زمینه Consuming Multiple Contexts

• خلاصه Summary

اداره کشور از طریق کتابخانه های شخص ثالث Managing State via Third Party Libraries

• معرفی Intro

• نحوه اجرای نسخه های نمایشی How to Run the Demos

• دولت محلی Local State

• دولت جهانی Global State

• حالت سرور Server State

• حالت تغییرناپذیر Immutable State

• حالت دولت Form State

• خلاصه: نحوه اداره وضعیت Summary: How to Handle State

• تمرینات پیشنهادی Recommended Exercises