Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DONE] Improve Concurrent Mode API Ref #243

Merged
merged 3 commits into from
Apr 23, 2020
Merged

[DONE] Improve Concurrent Mode API Ref #243

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d380440
improve concurrent mode --api --ref ..
3imed-jaberi Apr 22, 2020
0d4384a
go with fallback --
3imed-jaberi Apr 22, 2020
c3ada93
tachkil --better
3imed-jaberi Apr 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 13 additions & 12 deletions content/docs/concurrent-mode-reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,18 @@ prev: concurrent-mode-adoption.html
<div class="scary">

>تحذير:
>تصف هذه الصفحة **الميزات التجريبية التي [ليست متوفرة بعد](/docs/concurrent-mode-approach.html) في إصدار ثابت**. لا تعتمد على تصميمات React التجريبية في تطبيقات الإنتاج. قد تتغير هذه الميزات بشكل كبير ودون سابق إنذار قبل أن تصبح جزءًا من React.
>
>تصف هذه الصفحة **الميزات التجريبية التي [ليست متوفرة بعد](/docs/concurrent-mode-approach.html) في الإصدار المستقر**. لا تعتمد على البناءات React التجريبية في تطبيقات الإنتاج. قد تتغير هذه الميزات بشكل كبير ودون سابق إنذار قبل أن تصبح جزءًا من React.
>
>تستهدف هذه المستندات إلى المُتَبنّين المبكرين والأشخاص الفضوليين. **إذا كنت جديدًا في React، فلا تقلق بشأن هذه الميزات** -- لست بحاجة إلى تعلمها الآن.

</div>

هذه الصفحة هي مرجع واجهة برمجة التطبيقات لـ React [الوضع المتزامن](/docs/concurrent-mode-intro.html). إذا كنت تبحث عن مقدمة موجهة بدلاً من ذلك، فتحقق من [أنماط واجهة المستخدم المتزامنة](/docs/concurrent-mode-patterns.html).

**ملاحظة: هذه هي معاينة المجتمع وليست الإصدار النهائي المستقر. من المحتمل أن تكون هناك تغييرات مستقبلية على واجهات برمجة التطبيقات تلك. استخدام على مسؤوليتك الخاصة!**
**ملاحظة: هذه عينة توفر نظرة عامة للمجتمع وليست الإصدار النهائي المستقر. من المحتمل أن تكون هناك تغييرات مستقبلية على واجهات برمجة التطبيقات تلك. استخدم على مسؤوليتك الخاصة!**
3imed-jaberi marked this conversation as resolved.
Show resolved Hide resolved

- [تمكين الوضع المتزامن](#concurrent-mode)
- [تفعيل الوضع المتزامن](#concurrent-mode)
- [`createRoot`](#createroot)
- [`createBlockingRoot`](#createblockingroot)
- [Suspense](#suspense)
Expand All @@ -34,15 +35,15 @@ prev: concurrent-mode-adoption.html
- [`useTransition`](#usetransition)
- [`useDeferredValue`](#usedeferredvalue)

## تمكين الوضع المتزامن {#concurrent-mode}
## تفعيل الوضع المتزامن {#concurrent-mode}

### `createRoot` {#createroot}

```js
ReactDOM.createRoot(rootNode).render(<App />);
```

تستبدل `ReactDOM.render(<App />, rootNode)` وتُمَكّن الوضع المتزامن.
إستبدل `ReactDOM.render(<App />, rootNode)` وتُفعِّل الوضع المتزامن.

لمزيد من المعلومات حول الوضع المتزامن، راجع [مستندات الوضع المتزامن.](/docs/concurrent-mode-intro.html)

Expand All @@ -52,9 +53,9 @@ ReactDOM.createRoot(rootNode).render(<App />);
ReactDOM.createBlockingRoot(rootNode).render(<App />)
```

يستبدل `ReactDOM.render(<App />, rootNode)` و يُمَكّن [الوضع الإعتراضي](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode).
استبدل `ReactDOM.render(<App />, rootNode)` وتُفعل [الوضع الإعتراضي](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode).

إختيار الوضع المتزامن إلى إدخال تغييرات دلالية في طريقة عمل React. هذا يعني أنه لا يمكنك استخدام الوضع المتزامن في جُزء من المكونات. وبسبب هذا، قد لا تتمكن بعض التطبيقات من الإنتقال مباشرة إلى استعمال الوضع المتزامن.
يؤدي إختيار الوضع المتزامن إلى إدخال تغييرات دلالية في كيفية عمل React. هذا يعني أنه لا يمكنك استخدام الوضع المتزامن في عدد قليل من المكونات. وبسبب هذا ، قد لا تتمكن بعض التطبيقات من الإنتقال مباشرة إلى الوضع المتزامن.

يحتوي الوضع الإعتراضي (blocking mode) فقط على مجموعة فرعية صغيرة من ميزات الوضع المتزامن ويقصد به كخطوة ترحيل وسيطة للتطبيقات التي لا تستطيع الترحيل مباشرة.

Expand All @@ -69,13 +70,13 @@ ReactDOM.createBlockingRoot(rootNode).render(<App />)
</Suspense>
```

`Suspense` يتيح لمكوناتك "الانتظار" لشيء ما قبل أن تتمكن من التصيير، مع إظهار احتياطي أثناء الانتظار.
`Suspense` يتيح لمكوناتك "الانتظار" لشيء ما قبل أن تتمكن من التصيير، مع إظهار احتياطي (fallback) أثناء الانتظار.

في هذا المثال، ينتظر `ProfileDetails` اتصال API غير متزامن لجلب بعض البيانات. أثناء انتظار ` ProfileDetails` و `ProfilePhoto`، سنعرض الخيار `جاري التحميل ...` بدلاً من ذلك. من المهم ملاحظة أنه حتى يتم تحميل جميع الأطفال داخل `<Suspense>`، سنستمر في إظهار الاحتياط.
في هذا المثال، ينتظر `ProfileDetails` اتصال API غير متزامن لجلب بعض البيانات. أثناء انتظار ` ProfileDetails` و `ProfilePhoto`، سنعرض الخيار `Loading...` بدلاً من ذلك. من المهم ملاحظة أنه حتى يتم تحميل جميع الأطفال داخل `<Suspense>`، سنستمر في إظهار الاحتياط.

`Suspense` يأخذ اثنين props:
* **fallback** يأخذ مؤشر تحميل. يظهر العرض الاحتياطي حتى الانتهاء من تصيير كافة مكون `Suspense`.
* **unstable_avoidThisFallback** يأخذ قيم منطقية. يخبر React ما إذا كان "تخطي" الكشف عن هذه الحدود أثناء التحميل الأولي. من المحتمل أن تتم إزالة واجهة برمجة التطبيقات هذه في إصدار مستقبلي.
* **unstable_avoidThisFallback** يأخذ قيم منطقية (boolean). بحيث يخبر React ما إذا كان "تخطي (skip)" الكشف عن هذه الحدود أثناء التحميل الأولي. من المحتمل أن تتم إزالة واجهة برمجة التطبيقات هذه في إصدار مستقبلي.

### `<SuspenseList>` {#suspenselist}

Expand All @@ -99,14 +100,14 @@ ReactDOM.createBlockingRoot(rootNode).render(<App />)
عندما تحتاج مكونات متعددة إلى جلب البيانات، قد تصل هذه البيانات بترتيب غير متوقع. ومع ذلك، إذا قمت بلف هذه العناصر في `SuspenseList`، فلن تظهر React عنصرًا في القائمة حتى يتم عرض العناصر السابقة (هذا السلوك قابل للتعديل).

`SuspenseList` يأخذ اثنين props:
* **revealOrder (forwards, backwards, together)** يحدد الترتيب الذي فيه `SuspenseList` يجب الكشف عن الأطفال.
* **revealOrder (forwards, backwards, together)** يحدد الترتيب الذي فيه أطفال `SuspenseList` التي يجب الكشف عنهم.
* `together` تكشف *الكل* عندما يكونون على استعداد بدلاً من واحدة تِلوَ الأخرى.
* **tail (collapsed, hidden)** يملي كيف يتم عرض العناصر التي تم تحميلها فى `SuspenseList`.
* بشكل افتراضي, `SuspenseList` سيظهر جميع الاحتياطيات في القائمة.
* `collapsed` يظهر فقط الاحتياطية التالية في القائمة.
* `hidden` لا تظهر أي عناصر غير محمل.

لاحظ أن `SuspenseList` تعمل فقط على أقرب مكونات `Suspense` و مكونات `SuspenseList` تحتها. لا يبحث عن حدود أعمق من مستوى واحد. ومع ذلك، فمن الممكن تداخل مكونات `SuspenseList` متعددة في بعضها البعض لبناء شبكات.
لاحظ أن `SuspenseList` تعمل فقط على أقرب مكونات `Suspense` و مكونات `SuspenseList` تحتها. لا يبحث عن حدود أعمق من مستوى واحد. ومع ذلك، فمن الممكن تداخل مكونات `SuspenseList` متعددة في بعضها البعض لبناء شبكات (grids).

### `useTransition` {#usetransition}

Expand Down