81 : Retrieving The Todos From Local Storage — Transcript

Full transcript

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