23: ما هو ال React DOM و كيف يعمل؟ — Transcript

Full transcript

1. 0:00السلام عليكم حياكم الله بالدرس ال 23 من
2. 0:02سلسله دروس رياكت جي اس في الدرس السابق
3. 0:05حاولنا انه نغير قيمه متغير بطريقه
4. 0:07ديناميكيه لما المستخدم بيضغط على زر
5. 0:10وبناء عليه كنا متوقعين انه ها القيمه راح
6. 0:13تتغير بشكل مباشر في اليو اي لكن هذا
7. 0:16الشيء ما حصل وهذا الشيء اللي راح نفسره
8. 0:18لكن بعد ما نفهم اساسا ايش هو الرياكت دوم
9. 0:22وكيف الطريقه اللي بيشتغل فيها اساسا فايش
10. 0:25هو الرياكت دوم واجهه اي موقع رياكت في
11. 0:28البدايه راح تكون عندك بهذا الشكل عباره
12. 0:31عن شعار رياكت وبعض التكست المكتوبه تحته
13. 0:34هذا الشكل فعليا خلف الكواليس في له كود
14. 0:38مكتوب بصيغه معينه بركت جي اس هذا الكود
15. 0:41راح يتم تحويله الى الصيغه اللي بيفهمها
16. 0:43البراوزر او المتصفح اللي هي عباره عن
17. 0:46البيور اتش تي ام ال وسي اس اس وجافا
18. 0:47سكريبت وبالتالي هذا الشكل اللي شايفه
19. 0:50امامك ترى نتيجته النهائيه اللي بيفهمها
20. 0:52المتصفح هو عباره عن ها الاكواد لاحظ كيف
21. 0:55انه عندك بدي وبعدين عندك بداخله ديف
22. 0:57وبداخله اب بداخله هيدر وبداخل هذا الهيدر
23. 1:01مجموعه من الاشياء كذلك الان هذا الترتيب
24. 1:04تبع العناصر اللي بتمثل اليو اي الموجوده
25. 1:07عندك في صفحه الاتش تي ام ال والمتداخل مع
26. 1:09بعضها البعض بحيث انه عنصر البدي يكون هو
27. 1:13الاب بالنسبه لعنصر الروت والروت هو الاب
28. 1:16للاب والاب هو الاب للهيدر والهيدر الاب ل
29. 1:19الاج والبي لانه هي اشياء كلها موجوده
30. 1:21بداخله هذا الترتيب وكانه ترتيب شجره
31. 1:25العائله الموجوده بالنسبه للنت هذا اللي
32. 1:28نحنا بنسميه بالاسم دوم اللي هو اختصار ل
33. 1:32دوكيومنت اوبجكت موديل اللي هو عباره عن
34. 1:35الترتيب الشجري للعناصر اللي بتظهر عندك
35. 1:38في الواجهه قد لا يكون الترتيب الشجري
36. 1:40واضح الك من خلال الكود لكن فعليا هذا
37. 1:42الترتيب ترى هو بينعكس على الشكل التالي
38. 1:45تقدر تعتبر انه في عندك شجره عائله اول شي
39. 1:48بتبدا من البدي البدي هذا عنده ابن هذا
40. 1:50الابن هو عباره عن الروت الروت عنده ابن
41. 1:53هذا الابن هو عباره عن الاب وهكذا بتمشي
42. 1:56بالترتيب الشجري لحتى نعتبر مثلا انه الاب
43. 1:58عنده ثلاث عناصر وهاي الثلاث عناصر هي
44. 2:01فعليا عباره عن الامج والبي تبع البراجراف
45. 2:05والاي تبع الانكور وهكذا الى نهايه اكواد
46. 2:08الاتش تي ام ال كلها ممكن نمثلها بهذا
47. 2:10الترتيب الشجري هذا التركيب الشجري
48. 2:13والترتيب بهذ الطريقه هو اللي نحنا بنسميه
49. 2:16بالدوم او الدوكمنت اوبجكت موديل هذا
50. 2:19دائما موجود متى ما كان عندك اتش تي ام ال
51. 2:21سي اس اس جافا سكريبت بغض النظر عن اي
52. 2:24اطار عمل انت عم تستخدمه او ما عم تستخدمه
53. 2:26اساسا لكن السؤال الان ايش اللي بيصير في
54. 2:28رياكت تحديد
55. 2:30وكيف بتحدث هذا الدوم تلقائيا بنفس الوقت
56. 2:34اللي تضمن فيه عدم التاثير على سرعه
57. 2:37وكفاءه الموقع اللي بتسويه فعليا رياكت من
58. 2:40خلال جزء اساسي ومهم جدا فيها اسمه
59. 2:44الرياكت دوم هو انها بتاخذ هذا الترتيب
60. 2:47الشجري وبتروح بتعمل نسخه مستقله لها خاصه
61. 2:53للرياكشن ليش بتسوي نسخه مستقله لانه
62. 2:57الدخول الى الدوم الاساسي تبع الموقع
63. 2:59والتعديل عليه والتغيير عليه مكلف بعض
64. 3:02الشيء بمعنى انه ممكن يستهلك بعض الموارد
65. 3:05او بعض الوقت وبالتالي عمل نسخه الفيرتوال
66. 3:08دوم راح يسهل على رياكت عمليه التعديل
67. 3:10والمقارنه والبحث والمرور ما بين العناصر
68. 3:13في هذا الترتيب الشجري الان خلينا نرجع
69. 3:15لهذا الموقع مره ثانيه ونشوف تاثير
70. 3:18التغيير وكيف رياكت بتتعامل معه من خلال
71. 3:20الفيرتوال دوم هي الصفحه لو بدنا نشوف
72. 3:23الكود تبعها في رياكت فعليا هذا هو الكود
73. 3:26تبعها ولاحظ كيف عند هذا الانكور تحديدا
74. 3:28مكتوب ليرن رياكت انا الان بدي اغير النص
75. 3:32المكتوب في هذا المكان من ليرن رياكت بحيث
76. 3:35انها تتحول الى رياكت كورس ايش راح تسوي
77. 3:38رياكت بناء على هذا التغيير او التعديل
78. 3:40اللي انا سويته اللي بتسويه رياكت فعليا
79. 3:42انه في كل مره بيكون في عندها نسخه من هذا
80. 3:46الفيرتوال دوم ها النسخه بتكون نسخه
81. 3:49مستقله واللي بتسويه رياكت انها بتروح
82. 3:52وبتقنين مع بعض في كل فتره زمنيه بحيث
83. 3:56انها تتاكد هل صار في تغيير معين في في
84. 3:59جزئيه معينه في هذا الدوم ولا لا ولا تنسى
85. 4:03انه نحن فعليا سوينا تغيير وين هذا
86. 4:05التغيير كان في ملف الاب دوت جي اس
87. 4:08وبالتالي راح تكتشف انه في تغيير في الاب
88. 4:11دوت جي اس وفي اختلاف ما بين هي النسخه
89. 4:13وما بين الفيرتوال دوم الاساسي بناء على
90. 4:16ذلك بتروح رياكت وبتاخذ هذا التغيير
91. 4:19وبتطبخ على الفيرتوال دوم ونتيجه لهذا
92. 4:22التطبيق وقتها بينعكس هذا التغيير على
93. 4:26الدوم الاساسي ونتيجه لذلك را را يشوف
94. 4:30المستخدم هذا التغيير امام عينه بشكل
95. 4:32مباشر لانه اخيرا تغير على الدوم اللي هو
96. 4:35الشيء اللي واصل للمتصفح واللي التحكم فيه
97. 4:39اصلا بغير من اليو اي لكن هون في نقطه جدا
98. 4:42جدا مهمه ترى رياكت لما عدلت هذا الدوم ما
99. 4:45استبدلته بشكل كامل هي فقط بتست ابدل او
100. 4:49بتسوي رير رندر
101. 4:53للكمبوند او التغيير عمليه الاستبدال
102. 4:56الجزئي لهذا الكومبوننت تحديدا هي اللي
103. 4:59تساعد على انك تحدث اليو اي تبع الدوم بس
104. 5:02بنفس الوقت ما تاثر على كفاءه الموقع لانك
105. 5:05ما عم تستبدل هذا الترتيب الشجري او الدوم
106. 5:08بشكل كامل عمليه التعديل المستمر والتغيير
107. 5:12بناء على تغير البيانات الموجوده عندك
108. 5:15وعكسها على اليو اي او اللي هي ممكن
109. 5:17نعتبرها تغير الستيت الموجود عندك هذا
110. 5:20اللي اسمه في رياكت وفي اطر العمل بشكل
111. 5:23عام باسم الريندرينج اللي هو ممكن نعتبره
112. 5:27اعاده صياغه للواجهه ها او جزء منها عشان
113. 5:31تعكس التغيير اللي صار في البيانات
114. 5:33الموجوده عندك او في المتغيرات او اللي هي
115. 5:37الستيت الان قبل ما نختم خلينا نستوعب ليش
116. 5:40المشكله في الدرس السابق صارت معنا وارجع
117. 5:43مره ثانيه على الكود ونناقشها بناء على
118. 5:46معرفتنا
119. 5:50بالرياكشن
120. 5:53دوت جي اس في شيء جدا مهم عم يتم عمل
121. 5:57امبورت له بشكل تلقائي اللي هو عباره عن
122. 5:59الرياكت دوم اللي هو فعليا المكتبه اللي
123. 6:02بتسوي لك الشيء اللي تكلمت عنه الان طيب
124. 6:04خلينا نرجع نناقش المشكله السابقه بالماي
125. 6:07بوتون انا كنت لما عم اضغط هذا البوتون عم
126. 6:09اغير قيمه المتغير اللي اسمه نيم من احمد
127. 6:12الى يعرب وبالتالي المفروض هذا التغيير
128. 6:15ينعكس في هذا المكان لكن راح ارجع اذكرك
129. 6:18الرياكت دوم كيف بيشتغل بيشتغل اساسا بانك
130. 6:21لما تغير شيء معين بروح بيسوي لك رير يندر
131. 6:25للكومبوتر الان هذا فيه مشكلتين المشكله
132. 6:28الاولى انه التغيير لما بيكون لوكل في
133. 6:32رياكت جي اس اساسا هذا ما بيسوي ترجر او
134. 6:35تفعيل لعمليه الر رندر بمعنى اذا كان عندك
135. 6:38متغير انت معرفه لوكالي من داخل
136. 6:41الكومبوننت نفسه وغيرت قيمته من داخل ملف
137. 6:44الكومبوننت نفسه فبها الحاله هذا التغيير
138. 6:47يعتبر لوكل وما راح يسوي لك رير رندر
139. 6:49وبنفس الوقت لنفترض اساسا او جدلا انه راح
140. 6:53يسوي لك رندر لما بيسوي لك رندر فعليا
141. 6:56بيروح بيعمل لك لود لهذا الكومبوننت من
142. 6:58الصفر فهو ما راح يغير الدوم كامل بس راح
143. 7:01يسوي رير رندر لهذا الكومبوننت تحديدا ايش
144. 7:04يعني يسوي رندر لهذا الكومبوننت تحديدا
145. 7:06يعني هذا المتغير يرجع ويتم تعريفه مره
146. 7:10ثانيه من الصفر على انه متغير اسمه نيم
147. 7:13وقيمته تساوي احمد ما راح تكون قيمته
148. 7:15تساوي يعرب ليش لانه المشكله الثانيه بتنص
149. 7:19على انه المتغيرات اللوكال او اللوكال
150. 7:21اربلز ما بتحتفظ بنفس قيمتها لما بصير
151. 7:25رندر لانه الرندر اصلا معناه انه ير ج عها
152. 7:29الى حالتها الاساسيه وقت التعريف ولهذ
153. 7:32السببين التغيير على النيم ما عم يصير له
154. 7:35اي تاثير فعلي ها هي المشكله الحقيقيه
155. 7:38اللي عم تصير وانا عشان احل ها المشكله
156. 7:41انا محتاج لشيء في المقام الاول لما اغيره
157. 7:45يسويلي تريجر لعمليه الريندرينج وبالتالي
158. 7:48تنتبه رياكت انه لازم تسوي رير يندر وبنفس
159. 7:51الوقت لما يصير رير رندر لازم يحتفظ
160. 7:54بقيمته ما بين كل مره بتسوي فيها رياكت
161. 7:58رير رندر للكومبو مو يرجع للقيمه الاساسيه
162. 8:01الموجوده عنده هذا الشيء اللي بتم بركت
163. 8:04باستخدام شيء اسمه اليوز ستيت هوك وهو
164. 8:08اللي راح نتكلم عنه في الدرس الجاي اتمنى
165. 8:10ان شاء الله انه صارت المشكله واضحه
166. 8:12بالنسبه الك وبدرس الجاي راح نشوف كيف
167. 8:14ممكن نحل ها المشكله في رياكت جي اس
168. 8:16نشوفكم ان شاء الله على
169. 8:19خير