Skip to content

Commit

Permalink
Merge pull request #243 from 3imed-jaberi/fix-concurrent-mode-api-ref
Browse files Browse the repository at this point in the history
[DONE] Improve Concurrent Mode API Ref
  • Loading branch information
asantarissy committed Apr 23, 2020
2 parents e93ee39 + c3ada93 commit f3a6163
Showing 1 changed file with 13 additions and 12 deletions.
25 changes: 13 additions & 12 deletions content/docs/concurrent-mode-reference.md
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).

**ملاحظة: هذه هي معاينة المجتمع وليست الإصدار النهائي المستقر. من المحتمل أن تكون هناك تغييرات مستقبلية على واجهات برمجة التطبيقات تلك. استخدام على مسؤوليتك الخاصة!**
**ملاحظة: هذه عينة توفر نظرة عامة للمجتمع وليست الإصدار النهائي المستقر. من المحتمل أن تكون هناك تغييرات مستقبلية على واجهات برمجة التطبيقات تلك. استخدم على مسؤوليتك الخاصة!**

- [تمكين الوضع المتزامن](#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

0 comments on commit f3a6163

Please sign in to comment.