You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/state-a-components-memory.md
+1-2Lines changed: 1 addition & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -545,14 +545,13 @@ It is a good idea to have multiple state variables if their state is unrelated,
545
545
<DeepDive>
546
546
547
547
#### How does React know which state to return? {/*how-does-react-know-which-state-to-return*/}
548
-
<pdir='rtl>
549
548
شاید متوجه شده باشید که فراخوانی `useState` هیچ اطلاعاتی درباره *کدام* متغیر وضعیت به آن ارجاع داده میشود، دریافت نمیکند. هیچ "شناسه"ای که به `useState` منتقل شود وجود ندارد، پس چگونه میداند کدام یک از متغیرهای استیت را برگرداند؟ آیا بر اساس یک جادویی مانند تجزیه و تحلیل توابع عمل میکند؟ پاسخ نه است.
550
549
551
550
بدلاً از آن، برای فعال کردن دستور زبان مختصر آنها، هوکها **بر اعتماد به ترتیب فراخوانی پایدار در هر بار رندر کامپوننت یکسان تکیه میکنند.** این در عمل به خوبی کار میکند زیرا اگر قانون فوق را رعایت کنید ("تنها در سطح بالایی دستورهای هوک را فراخوانی کنید")، هوکها همیشه به همان ترتیب فراخوانی میشوند. علاوه بر این، یک [افزونه لینتر](https://www.npmjs.com/package/eslint-plugin-react-hooks) اکثر اشتباهات را گرفتار میکند.
552
551
در داخل، React یک آرایه از زوجهای استیت برای هر کامپوننت نگه میدارد. همچنین شاخص زوج فعلی را که قبل از رندر شدن به `0` تنظیم شده است، حفظ میکند. هر بار که `useState` را فراخوانی میکنید، React زوج وضعیت بعدی را به شما ارائه میدهد و شاخص را افزایش میدهد. میتوانید بیشتر در مورد این مکانیزم در [React Hooks: Not Magic, Just Arrays.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) مطالعه کنید.
553
552
554
553
[React Hooks: Not Magic, Just Arrays.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)
555
-
</p>
554
+
556
555
This example **doesn't use React** but it gives you an idea of how `useState` works internally:
Copy file name to clipboardExpand all lines: src/content/learn/thinking-in-react.md
+5-6Lines changed: 5 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -264,8 +264,7 @@ state
264
264
یعنی ما فقط متن جستجو شده و مقدار تکست باکس را به عنوان استیت نگه میداریم
265
265
266
266
<DeepDive>
267
-
268
-
### Props vs State {/*props-vs-state*/}
267
+
#### Props vs State {/*props-vs-state*/}
269
268
270
269
271
270
دو نوع مدل دیتا در ری اکت داریم: وضعیت (state) و (props).
@@ -283,7 +282,7 @@ state
283
282
284
283
285
284
286
-
## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/}
285
+
## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/}
287
286
288
287
بعد از شناسایی دادههای حداقلی مرتبط با برنامهی شما، نیاز دارید تعیین کنید که کدام کامپوننت مسئول تغییر این دادههاست، یا به عبارتی، مالک (owns) این دادهها است. به یاد داشته باشید: ریاکت از جریان دادهی یک طرفه استفاده میکند و دادهها را از کامپوننت والد به کامپوننتهای فرزند در سلسلهمراتب ارسال میکند. ممکن است اولیهاش که کدام کامپوننت باید مالک دادههایی باشد که در اختیار دارد، به وضوح نباشد. اگر تازه با این مفهوم آشنا شدهاید، ممکن است چالش برانگیز باشد، اما با دنبال کردن این
289
288
@@ -486,11 +485,11 @@ function SearchBar({ filterText, inStockOnly }) {
486
485
با این حال، هنوز کدی برای پاسخ به اقدامات کاربر مانند تایپ کردن اضافه نکردهاید. این مرحله آخر شما خواهد بود.
487
486
</p>
488
487
489
-
## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/}
488
+
## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/}
490
489
<p dir="rtl">
491
490
در حال حاضر برنامهی شما با پراپها و استیتها که از بالا به پایین سلسلهمراتب بهخوبی رندر میشود. اما برای تغییر استیت بر اساس ورودی کاربر، شما نیاز به پشتیبانی از جریان داده به سمت دیگر دارید: کامپوننتهای فرم (form components) که در عمق سلسلهمراتب هستند باید استیت را در FilterableProductTable بهروزرسانی دهنده.
492
491
493
-
ریاکت این جریان داده را صریحاً اعلام میکند، اما نیاز به تایپ کردن بیشتری نسبت به ورودی داده دوطرفه دارد. اگر در مثال بالا سعی کنید در ورودی تایپ کنید یا چکباکس را انتخاب کنید، مشاهده خواهید کرد که ریاکت ورودیهای شما را نادیده میگیرد. این عمدی است. با نوشتن <input value={filterText} />، شما value پراپ ورودی را به طور دائمی برابر با استیت filterText قرار دادهاید که از FilterableProductTable به آن منتقل میشود. از آنجایی که استیت filterText هرگز تنظیم نمیشود، ورودی هرگز تغییر نمیکند.
492
+
ریاکت این جریان داده را صریحاً اعلام میکند، اما نیاز به تایپ کردن بیشتری نسبت به ورودی داده دوطرفه دارد. اگر در مثال بالا سعی کنید در ورودی تایپ کنید یا چکباکس را انتخاب کنید، مشاهده خواهید کرد که ریاکت ورودیهای شما را نادیده میگیرد. این عمدی است. با نوشتن `<input value={filterText} />`، شما value پراپ ورودی را به طور دائمی برابر با استیت filterText قرار دادهاید که از FilterableProductTable به آن منتقل میشود. از آنجایی که استیت filterText هرگز تنظیم نمیشود، ورودی هرگز تغییر نمیکند.
494
493
495
494
شما میخواهید طوری عمل کنید که هر زمان کاربر ورودیهای فرم را تغییر دهد، استیت بهروزرسانی شود تا تغییرات نمایان شود. استیت توسط FilterableProductTable مدیریت میشود، بنابراین تنها این کامپوننت میتواند توابع setFilterText و setInStockOnly را فراخوانی کند. برای اجازه دادن به SearchBar برای بهروزرسانی استیت FilterableProductTable، شما باید این توابع را به SearchBar ارسال کنید.
496
495
@@ -672,7 +671,7 @@ td {
672
671
673
672
برای کسب اطلاعات بیشتر در مورد کنترل رویدادها و به روزرسانی استیت متوانید به قسمت [افزودن تعاملات](/learn/adding-interactivity) مراجعه کنید.
674
673
675
-
## Where to go from here {/*where-to-go-from-here*/}
674
+
## Where to go from here {/*where-to-go-from-here*/}
676
675
677
676
این مقدمهای بسیار کوتاه بود برای آشنایی با نحوهی فکر کردن در مورد ساخت کامپوننتها و برنامهها با ریاکت. شما میتوانید همین حالا یک پروژهی ریاکت راهاندازی کنید یا به عمق بیشتری دربارهی تمام دستورالعملها (سینتکس) استفادهشده در این آموزش بپردازید.
0 commit comments