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
*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
7
+
تمكنك *الخطافات* (Hooks) من استخدام مزايا مختلفة من React في مكوناتك. يمكنك إما استخدام الخطافات المدمجة (المبنية مسبقا)، أو استخدامها لبناء الخطاف الخاص بك. ستريك هذه الصفحة جميع الخطافات المبنية مسبقًا في React.
8
+
8
9
9
10
</Intro>
10
11
11
12
---
12
13
13
-
## State Hooks {/*state-hooks*/}
14
+
## خطافات الحالة (State) {/*state-hooks*/}
15
+
16
+
تسمح *الحالة* للمكون ["بتذكر" معلومات مثل إدخالات المستخدم](/learn/state-a-components-memory). على سبيل المثال، يمكن لمكوّن النموذج Form استخدام الحالة لتخزين قيمة الإدخال، بينما يمكن لمكون معرض الصور استخدام الحالة لتخزين رقم الصورة المختارة.
14
17
15
-
*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
18
+
لإضافة حالة إلى مكون، استخدم أحد هذه الخطافات:
16
19
17
-
To add state to a component, use one of these Hooks:
20
+
*[`useState`](/reference/react/useState) يعيّن .متغير حالة يمكنك تحديثه مباشرة
18
21
19
-
*[`useState`](/reference/react/useState) declares a state variable that you can update directly.
20
-
*[`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
22
+
*[`useReducer`](/reference/react/useReducer) يعيّن متغير حالة مع منطق التحديث داخل [دالة reducer.](/learn/extracting-state-logic-into-a-reducer)
21
23
22
24
```js
23
25
functionImageGallery() {
@@ -27,11 +29,12 @@ function ImageGallery() {
27
29
28
30
---
29
31
30
-
## Context Hooks {/*context-hooks*/}
32
+
## خطافات السياق (Context) {/*context-hooks*/}
31
33
32
-
*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
34
+
يسمح *السياق* للمكون [بتلقي المعلومات من الآباء البعيدين دون تمريرها كدعامات (props)](/learn/passing-props-to-a-component). على سبيل المثال، يمكن لمكوِّن المستوى الأعلى لتطبيقك أن يمرر سمة واجهة المستخدم الحالية إلى جميع المكونات أدناه، بغض النظر عن مدى عمقها.
33
35
34
-
* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
36
+
37
+
* [`useContext`](/reference/react/useContext) يقرأ ويحدّث في السياق.
35
38
36
39
```js
37
40
functionButton() {
@@ -41,12 +44,14 @@ function Button() {
41
44
42
45
---
43
46
44
-
## Ref Hooks {/*ref-hooks*/}
47
+
## خطافات المرجع {/*ref-hooks*/}
48
+
49
+
تسمح *المراجع* للمكون [بحمل بعض المعلومات التي لا تُستخدم للعرض](/learn/referencing-values-with-refs) ، مثل عنصر DOM أو معرّف المهلة (timeout ID).
50
+
على عكس الحالة ، لا يؤدي تحديث المرجع إلى إعادة تصيير المكون الخاص بك. المرجع Ref هي "فتحة هروب" من طريقة React. تكون مفيدة عندما تحتاج إلى العمل مع أنظمة غير React، مثل واجهات برمجة تطبيقات المتصفح المضمنة (BOM).
45
51
46
-
*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
47
52
48
-
* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
49
-
* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
53
+
* [`useRef`](/reference/react/useRef) يعيّن المرجع، يمكنك الاحتفاظ بأي قيمة فيه، ولكن غالبًا ما يتم استخدامه لاحتواء عنصر DOM
54
+
* [`useImperativeHandle`](/reference/react/useImperativeHandle) يتيح لك تخصيص المرجع الذي يعرضه المكون الخاص بك. نادرًا ما يُستخدم هذا الخطاف.
50
55
51
56
```js
52
57
functionForm() {
@@ -56,11 +61,12 @@ function Form() {
56
61
57
62
---
58
63
59
-
## Effect Hooks {/*effect-hooks*/}
64
+
## خطافات التأثير (Effect) {/*effect-hooks*/}
60
65
61
-
*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
66
+
تسمح التأثيرات للمكون [بالاتصال والمزامنة مع الأنظمة الخارجية](/learn/synchronizing-with-effects). يتضمن ذلك التعامل مع الشبكة، ومتصفح DOM، والرسوم المتحركة، وعناصر واجهة المستخدم المكتوبة باستخدام مكتبة واجهة مستخدم مختلفة، وأكواد أخرى غير React.
62
67
63
-
* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
@@ -72,23 +78,25 @@ function ChatRoom({ roomId }) {
72
78
// ...
73
79
```
74
80
75
-
Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
81
+
التأثيرات هي "فتحة هروب" من أسلوب React. لا تَستخدِم التأثيرات لتنظيم تدفق البيانات لتطبيقك. إذا كنت لا تتفاعل مع نظام خارجي، [فقد لا تحتاج إلى تأثير](/learn/you-might-not-need-an-effect).
82
+
76
83
77
-
There are two rarely used variations of `useEffect`with differences in timing:
84
+
هناك نوعان نادران من أشكال الاستخدام للتأثير `useEffect`مع اختلافات في توقيت الاستخدام:
78
85
79
-
* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
80
-
* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
86
+
* [`useLayoutEffect`](/reference/react/useLayoutEffect) ينطلق قبل أن يعيد المتصفح اظهار الشاشة. يمكنك قياس التخطيط هنا.
87
+
* [`useInsertionEffect`](/reference/react/useInsertionEffect) ينطلق قبل أن تُجري React تغييرات على DOM. يمكن للمكتبات إدراج CSS الديناميكي هنا.
81
88
82
89
---
83
90
84
-
## Performance Hooks {/*performance-hooks*/}
91
+
## خطاطيف الأداء {/*performance-hooks*/}
92
+
93
+
من الطرق الشائعة لتحسين أداء إعادة العرض تخطي العمل غير الضروري. على سبيل المثال، يمكنك إخبار React بإعادة استخدام نتيجة عملية حسابية مخزنة أو تخطي إعادة التصيير إذا لم تتغير البيانات منذ التصيير السابق.
85
94
86
-
A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
95
+
لتخطي العمليات الحسابية وإعادة التصيير غير الضرورية ، استخدم أحد هذه الخطافات:
87
96
88
-
To skip calculations and unnecessary re-rendering, use one of these Hooks:
89
97
90
-
- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
91
-
- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
98
+
- [`useMemo`](/reference/react/useMemo) يتيح لك تخزين نتيجة عملية حسابية مكلفة.
99
+
- [`useCallback`](/reference/react/useCallback) يتيح لك تخزين تعريف وظيفة function قبل تمريره إلى مكون محسَّن.
Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
108
+
في بعض الأحيان، لا يمكنك تخطي إعادة العرض لأن الشاشة تحتاج بالفعل إلى التحديث. في تلك الحالة، يمكنك تحسين الأداء عن طريق فصل التحديثات الحاظرة لمعالجة الكود (blocking) التي يجب أن تكون متزامنة (مثل الكتابة في أحد المدخلات) عن التحديثات غير الحاظرة (non-blocking) التي لا تحتاج إلى حظر واجهة المستخدم (مثل تحديث مخطط).
101
109
102
-
To prioritize rendering, use one of these Hooks:
110
+
لتحديد أولوية العرض، استخدم أحد هذه الخطافات:
103
111
104
-
- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
105
-
- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
112
+
- [`useTransition`](/reference/react/useTransition) يتيح لك اعتبار الحالة غير حاظرة والسماح للتحديثات الأخرى بالتداخل معها.
113
+
- [`useDeferredValue`](/reference/react/useDeferredValue) يتيح لك تأجيل تحديث جزء غير مهم من واجهة المستخدم والسماح للأجزاء الأخرى بالتحديث أولاً.
106
114
107
115
---
108
116
109
-
## Other Hooks {/*other-hooks*/}
117
+
## خطافات أخرى {/*other-hooks*/}
110
118
111
-
These Hooks are mostly useful to library authors and aren't commonly used in the application code.
119
+
هذه الخطافات مفيدة في الغالب لمؤلفي المكتبات ولا يتم استخدامها بشكل شائع في كود التطبيق.
112
120
113
-
- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
114
-
- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
115
-
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
121
+
- [`useDebugValue`](/reference/react/useDebugValue) يتيح لك تخصيص التسمية التي تعرضها أدوات مطوري React لخطافك المخصص.
122
+
- [`useId`](/reference/react/useId) يتيح للمكون ربط معرف فريد بنفسه (unique ID). تستخدم عادة مع واجهات برمجة إمكانية الوصول API.
123
+
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) يتيح للمكون الاشتراك في مُوَزّع خارجي.
116
124
117
125
---
118
126
119
-
## Your own Hooks {/*your-own-hooks*/}
127
+
## الخطافات الخاصة بك {/*your-own-hooks*/}
120
128
121
-
You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
129
+
يمكنك أيضًا [تعريف الخطافات المخصصة](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) الخاصة بك كدوال JavaScript.
0 commit comments