YT YouTube2Text

YouTube2Text → Transcripts → 48 : Using (useContext) to Fix The Prop Drilling Issue

48 : Using (useContext) to Fix The Prop Drilling Issue — Transcript

by أكاديمية ترميز · 3,650 words · 504 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00السلام عليكم حياكم الله بالدرس ال 48 من
0:02سلسله دروس رياكت جي اس بالدرس السابق
0:05شفنا ايش هي المشكله الخاصه بالبرو
0:07دريلينج وبهذا الدرس راح نشوف طريقه حلها
0:10عن طريق استخدام احد الهوكس اللي بتوفر
0:13لنا اياها رياكت اللي هو عباره عن اليوز
0:16كونتكست هوك المشكله اللي انتهينا عندها
0:18في الدرس السابق هو انك انت محتاج انك
0:21تاخذ البروبس من كل كمبوننت وترسلها
0:24للثاني والثاني ياخذها ويرسلها للثالث
0:27لحتى توصل الى نهايه التري اللي هي فعلا
0:30بدها تستفيد من ها البروبس من خلال الفالو
0:32او الاون تينج او على حسب الحاله وهذا
0:35الشيء متعب كل ما صارت التري عندك اطول
0:38وبالتالي عشان نحل هذا الشيء نحن بنستخدم
0:40اليوز هوك كونتكست فكره اليوز هوك كونتكست
0:45الاساسيه انه انت بتعرف متغير هذا المتغير
0:49بدك توفره لبرنت معين وكل الابناء المندرج
0:55تحته سواء كانوا ابناء مباشرين او حتى
0:58اللي ممكن نعتبرهم احفاد اللي هم ابناء
1:00الابناء الى اخره وبالتالي انت بترسل هذا
1:03الكونتكس مره واحده بعدين بتقرر في اي ابن
1:08من الابناء الموجودين عندك في التري بدك
1:10تستخدم هذا الكونتكس وكانه عم يصير له باس
1:14ضمنيا لكل الابناء بس بدون ما تضطر انك
1:17تكتب الاكواد اللي بتسوي لك هذا الشيء هذا
1:20مجرد تعريف سريع عن الكونتكس طيب كيف
1:22منسوي الكونتكس عششان تسوي الكونتكت انت
1:25في عندك ثلاث خطوات رئيسيه الخطوه الاولى
1:29هو ان انك تبني هذا الكونتكت بروفايدر
1:33البروفايدر بتقدر تعتبره مثلا مزود الخدمه
1:36هو الكونتكت او الجهه اللي راح تتبنى هذا
1:40المتغير او المتغيرات اللي بدك تسوي لها
1:42باس على كل التري فهي هي النقطه الاولى
1:45النقطه الثانيه بعد ما سويت هذا
1:47البروفايدر اللي بيزود لك الخدمه بدك تحدد
1:50مين بده يستفيد من ها الخدمه مين بده
1:52يلتقط هذا المتغير من الابناء ويستفيد منه
1:56ويعرضه عنده او حتى يتعامل معه وبالتالي
1:59الخطوه الثانيه هو انك تحدد الكنسر الخطوه
2:02الثالثه هو انك تسوي باس للفال عشان يقدر
2:06الكنسر يستفيد منها فهي بتقدر تقسمها كذلك
2:09الى خطوتين انك تسوي باس للفال بعدين
2:11تستفيد من ها الفاليو من خلال الكسوم ففي
2:14عننا بروفايدر اللي بيوفر لنا المتغير في
2:18عننا كونسيومر اللي بيستفيد من هذا
2:20المتغير او من البروبس اللي بيتم ارسالها
2:23وفي عننا الفالو نفسها اللي راح يتم عمل
2:26انجكت او اقحام لها بداخل هذا الكونتكت او
2:30التري تبع الكومبوننت عشان يصير الكلام
2:33واضح خلينا نبدا بالجزء التطبيقي اول خطوه
2:35بنسويها هو انه بسوي كرييت للكونكس كيف
2:39بنسوي كريت للكونكت عن طريق استدعاء داله
2:43موجوده في رياكت اسمها اساسا كريت كونتكست
2:47وعشان اسوي هذا الكونتكس من الشائع انك
2:49تفصله الى فايل خاص فيه وبالتالي انا راح
2:53اجي اسوي مجلد جديد هذا المجلد راح يكون
2:56مخصص لكل كونتكست لانه انت غالبا في
3:00المشروع الحقيقي بون عندك اكثر من كونتكست
3:03او مجموعه من المعلومات اللي بدك تشاركها
3:05وبالتالي راح اسمي هذا المجلد باسم
3:07كونتكست وبعدين بداخله راح اسوي ملف جديد
3:11راح احدد راح ابني فيه ال كونتكست هذا
3:14المجلد الجديد عشان تسميه من الشياع انك
3:16تسميه باسم المعلومه او المتغيرات او
3:19الاوبجكت اللي بيفر لك اه هذا الكونتكس
3:22والمعلومات الموجوده عندي هي كلها عباره
3:24عن الانبوت وكيف هذا الانبوت راح يتعامل
3:27مع الاستيت تبع اللون فورم وبالتالي انا
3:29راح اسميه باسم مثلا لون فورم انبوت
3:34كونتكست بهذا الشكل طبعا هو في نهايه
3:36الامر عباره عن ملف جافا سكريبت لكنه ما
3:38راح يكون كومبونت راح يكون ملف يحتوي على
3:41التالي اول شيء مثل ما ذكرت لك عشان توفر
3:45الكونتكت انت بتست دعي فانكشن موجوده في
3:49رياكت اسمها كريت كونتكست اي شيء موجود في
3:52رياكت انت ما بتقدر تستدعيه مباشره بهذا
3:54الشكل وتقول له كريت كونتكست مباشره انت
3:57لازم تسوي له امبورت من رياكت كيف بتسوي
4:00له امبورت من رياكت تكتب امبورت وبعدين
4:02بتفتح الكيرلي براكتس وبعدين بتقول له
4:05كريت كونتكست بهذا الشكل بعدين بتقول له
4:09فرام وبتحدد المكتبه اللي هي مكتبه رياكت
4:12فانا الان صار عندي الكريت كونتكست اللي
4:14هي بتمثل لي الفانكشن اللي انا ممكن اصنع
4:16منها كونتكست طيب اللي راح اجي اسويه اني
4:19راح اعرف متغير هذا المتغير راح اسميه
4:22باسم لون انبوت كونتكست مو شرط يكون نفس
4:26اسم الفايل الموجود عندك هون ممكن تسميه
4:28بالاسم اللي بدك اه بس هذا هو المتغير
4:30اللي راح يمثل لي الزبده اللي هو عباره عن
4:33الكونتكس تبعي اللي انا بدي استخدمه حتى
4:35لو التفاصيل لسه ملخبطه عندك عند الحد
4:37الحالي لا تحكم عليها لحتى تكتمل الصوره
4:40بشكل كامل بس عشان انبهك يعني الان هذا
4:42المتغير ايش يساوي يساوي استدعاء ها
4:45الداله اللي اسمها كريت كونتكست وبالتالي
4:47راح يجي يقول له كريت كونتكست وبعدين بتست
4:50دعي ها الفانكشن لانه هي فانكشن فلازم
4:52تفتح لها قوسين عشان تستدعيها كرامر هون
4:55لازم تحدد ايش القيمه الابتدائيه للمت ير
5:00او لاوبك او للاري على حسب النوع اللي بدك
5:03اياه للشيء اللي بدك تسوي لله باس فانا
5:06عشان اعرف القيمه الابتدائيه خليني ارجع
5:08اتذكر ايش الاشياء اللي انا محتاج اني
5:10اوفرها لكل الابناء في التري عندي عندي
5:14اللون فورم ايش عم يسوي لي عم يرسل لي
5:16الانبوت نيم عم يرسل لي الهاندل تينج
5:19كومبونت عم يرسل لي الفالو كومبونت فهو عم
5:22يرسل لي ثلاث شغلات وبالتالي ها الثلاث
5:24شغلات ممكن احطها كلها بداخل اوبجكت واحد
5:28هو اللي بيحدد لي ها الثلاث شغلات اللي
5:29راح يتم ارسالها وبالتالي راح ارجع مره
5:32ثانيه عند اللون فورم انبوت كونتكست وراح
5:35اقول له الشيء اللي راح ابدا فيه هو عباره
5:38عن اوبجكت هذا الاوبجكت يحتوي على ثلاث
5:40شغلات راح اسمي الشيء الاول هو الليبل
5:43تايتل اللي هو فعليا بيمثل لي هذا الانبوت
5:47نيم بس انا سميته باللب تايتل وهذا راح
5:49يكون مبدئيا عباره عن سترنج فاضي وراح
5:52يكون عندي كذلك شيء اسمه الهاندل تينج
5:56اللي هي عباره عن الفنكشن اللي لازم يتم
5:58استدعائها في كل مره بصير في تينج على
6:00الانبوت وهي راح تكون في البدايه نل
6:03واخيرا في عندي الفالو اللي راح يتم
6:05ارسالها ل الكومبوننت هي راح اسميها باسم
6:08الانبوت فو بهذا الشكل واللي راح تكون
6:11كذلك نول فهي مجرد القيم الابتدائيه
6:14الموجوده هون انا عرفت هذا المتغير هذا
6:17المتغير هو اللي راح يمثل لي البروفايدر
6:20تبع الكونتكس وعشان استفيد منه لازم اصدره
6:25برا هذا الفايل لانه حاليا لا يمكن الوصول
6:28اله من الملفات الخارجيه كيف بصدره عن
6:31طريق اني اجي يقول له مثلا اكسبورت لهذا
6:35اللون انبوت كونتكست بهذا الشكل عن طريق
6:38اني اجي يقول له قبل التعريف الم موجود
6:41هون بنفس الطريقه اللي كنا نسويها بالنسبه
6:43للكومبوتر بهذا الشكل فلو سويت سيف الان
6:47هذا راح يتم تصديره كنتيجه نهائيه من هذا
6:50الملف اللي اسمه لون فورم انبوت كونتكست
6:52انا لسه عرفت هذا الكونتكس لسه ما اكملت
6:55بناء البروفايدر بشكل كامل ايش الخطوه
6:58التاليه الخطوه التاليه اني اجيب هذا
7:00الكونتكس واستخدمه كبرو فايدر للابناء
7:04الموجودين عندي بداخل اللون فورم وبالتالي
7:06راح اجي عند بدايه هذا الملف وقول له
7:09امبورت وطبعا هون بحكم اني انا خليتها
7:12اكسبورت ما كتبت اكسبورت ديفولت فلازم لما
7:16اجي اسوي امبورت لهي الجزئيه اسويلها ما
7:18بين الكيرلي براكتس وبالتالي راح ارجع مثل
7:22ما كانت ويجي يقول له انه الاكسبورت راح
7:24يكون لهذا اللون انبوت كونتكست فراح يجي
7:27يقول له امبورت للشيء اللي اسمه لون انبوت
7:31كونتكست من وين من مجلد الكونتكت وتحديدا
7:35من الملف اللي اسمه لون فورم انبوت
7:37كونتكست انا الان بس سويتله امبورت لسه ما
7:39استخدمته كبرو فايدر اللي راح اسويه الان
7:43انا عندي هذا اللون فورم وخلينا نبدا مع
7:45هذا الانبوت تحديدا تبع النيم انا ما بدي
7:48ارسل ها البيانات كلها مباشره الى الماي
7:51كومبونت وبعدين يجي ياخذها الماي كومبونت
7:53ويروح يرسلي اياها الى الماي انبوت لا
7:55فانا راح اشيل كل البيانات اللي ارسلتها
7:58بهذا الشكل واجي يقول له شوف ترى هذا
8:01الكومبوننت راح يكون بداخل بروفايدر يحيط
8:06فيه يضمه الى داخله ويوفر له الاشياء اللي
8:10بيحتاجها وبالتالي بيجي بقول له بفتح قوس
8:13كاني عم اكتب كومبونت عادي وبيعتمد على
8:16اسم الكونتكس كانه الكونتكس هو عباره عن
8:19كومبونت لكنه في نهايه الامر ما هو
8:21كومبونت مرئي نفس اللي نحن بنعرفه فراح
8:23اكتب اسم الكونتكس اللي هو عباره عن اللون
8:27انبوت كونتكست طبعا انا سميته هون بالاس
8:30والمفروض انه هو كونتكست واحد لذلك خليني
8:33اصحح التسميه بس من باب اني امشي على
8:35الممارسات الصحيحه راح امسح الاس من هون
8:37وكذلك في التعريف راح اشيل ها الاس وكذلك
8:40في الاستخدام هون بالكمبوند ها الاس فبتحب
8:44بتت كونتكست وبقول له دوت بروفايدر بستدعي
8:48منه من داخله شيء اسمه بروفايدر اللي هو
8:51عباره عن مزود خدمه الكونتكت بعدين راح
8:54اسكر قوس الافتتاح وهون راح سكر لي هذا
8:57البروفايدر بس المفروض انا ما اسكره هون
9:00انا لازم اقوله انه هذا اللون انبوت
9:02كونتكس بروفايدر راح يحيط لي بهذا
9:05الكومبوننت بهذا الشكل وبالتالي اي شيء
9:08موجود بداخل البروفايدر راح يتعرف عليه
9:11الماي كومبونت طيب ايش الشيء الموجود
9:13بداخل البروفايدر حاليا ما في شيء موجود
9:16بداخل البروفايدر بس بقدر اقوللك انه نحنا
9:19هيك خلصنا الخطوه الاولى اللي هي انك تعرف
9:23او تبني هذا البروفايدر وتوفره لهذا الماي
9:26كومبونت الان خلينا نوفر القيمه قبل ما
9:29نبني الكسر اللي هي راح تكون الخطوه
9:31الثالثه طيب كيف بوفر القيمه في عندك
9:34اتربيوت لهذا الكومبوننت اللي دائما بيكون
9:37هو عباره عن البروفايدر ها الاتربيوت
9:40اسمها فو ها الفالو بتقدر تعبيها بالشيء
9:44اللي بدك اياه اللي راح يتم ارساله الى
9:48هذا الكومبوننت والى اي ابن مضمن بداخل
9:52التري تبع هذا الكومبوننت بمعنى اخر راح
9:55يتم ارساله لهذا الابن ولكل الاحفاد
9:58المندرين تحت هذا الابن فبت جي بداخلها
10:01بتحدد ايش الاشياء اللي بدك ترسلها طبعا
10:03لازم تفتح الكيرلي براكت اذا بدك تحط
10:05متغيرات او تكتب كود جافا سكريبت فهي
10:07الكيري براكتس تبع ايش مره ثانيه تبع الجي
10:09اس اكس ما هي تبع الاوبجكت بعدين بداخلها
10:12ممكن اقوله انا بدي يكون عندي اوبجيكت
10:14فهذا الاوبجكت راح يكون ايوكي اللي هو
10:16تايتل مثلا وهذا التايتل راح يكون مثلا
10:18هلو ورلد بهذا الشكل ايش معنى هذا الكلام
10:22معنى هذا الكلام انه الفالو اللي تم
10:24ارسالها في التايتل اي شيء بداخل الماي
10:28كومبونت هذا تحديدا وما يندرج تحته راح
10:33يكون قادر على الوصول الى هاي الهلو ورد
10:36لو سويت سيف الان ورجعت مره ثانيه لاحظ
10:38انه ما في عندي اي فرق مبدئيا طيب انا
10:41المفروض الان اني احاول استفيد من هاي
10:43الفالو انا سويت البروفايدر كونت ها
10:45الفالو والان ارسلتها بحيث انه اي شيء
10:49مندرج تحت الكومبوننت او الماي كومبونت
10:52والابناء الخاصه فيه فراح يكون قادر على
10:54الوصول الى التايتل فخليني اروح مباشره مو
10:57الى الماي كومبونت حتى الى الشيء اللي هو
11:01يندرج تحته اللي هو الماي انبوت راح اروح
11:04على الماي انبوت راح اروح على الماي انبوت
11:06ومن الماي انبوت هون بدي احاول اوصل لهذا
11:09التايتل اللي تم ارساله في البروفايدر
11:11وعشان اقدر اوصل له انا محتاج اني اعرف
11:15كونسيومر موجود عندي في الماي انبوت او
11:18الجزئيه اللي راح تستفيد من هذا الكونتكس
11:21طيب كيف انا بقدر اعرف الجزئيه اللي راح
11:24تستفيد من هذا الكونتكس نحنا عشان نبني
11:27الكونتكت رحنا استخدمنا داله موجوده في
11:30رياكت اسمها كريت كونتكست الان عشان
11:33نستخدم هذا الكونتكت ونوصل الى قيمه لازم
11:36استخدم داله اسمها يوز كونتكست من رياكت
11:40وبالتالي في المكان اللي بدي استخدم منه
11:42هذا الكونتكس وبروح بسوي امبورت هالمره مو
11:45لكر كونتكست وانما ليوز كونتكست فراح يجي
11:48يقول لله امبورت وبعدين بفتح قوسين وبقول
11:51لله تحديدا بدي اليوز كونتكست من رياكت
11:55اليوز كونتكست هي عباره عن هوك بنفس
11:58الطريقه هذا الهوك هو عباره عن فانكشن
12:00الهوكس في نهايه الامر في رياكت هي عباره
12:03عن مجموعه من الفيتشرز الاضافيه اللي بم
12:05توفيرها الك على شكل فانكشن احدها اليوز
12:09ستيت احدها اليوز كونتكست احدها الكريت
12:11كونتكست وراح نتعرف على هوكس اخرى مع مرور
12:14الوقت على حسب الاحتياج الان ها اليوز
12:16كونتكست هي الفنكشن اللي راح تساعدني عشان
12:19اوصل الى هذا اللون فورم انبوت كونتكست
12:22وبالتالي اللي بسويه اني ممكن اجي عند ها
12:25الفانكشن قبل الريتن واعرف متغير فراح
12:28اقول له كونست بعدين راح اسميه مثلا ماي
12:32كونتكست على سبيل المثال يساوي استدعاء ها
12:36الداله اللي اسمها يوز كونتكست فانا بروح
12:38وبستدعيك هذا الهوك اللي اسمه يوز كونتكست
12:41هذا الهوك المفروض انه يرجعلي القيم اللي
12:44انا محتاجها وبالتالي تصير محفوظه في هذا
12:47الاوبجكت تحديدا لكن لما بيكون في عندك
12:51مشروع كبير بيكون عندك اصلا عدد كبير من
12:54الكونتكس على حسب الاحتياج وبالتالي كيف
12:58بدها تعرف ال اللي اسمها يوز كونتكست اي
13:00كونتكست هو اللي قصدك عليه يعني انا ممكن
13:03يكون عندي لون فورم انبوت كونتكست وعندي
13:05شيء ثاني مثلا سميته يوزر بروفايل كونتكست
13:09عشان يوفر لي بيانات المستخدم وعندي شيء
13:11ثالث سميته ثيم كونتكست عشان يوفر لي ايش
13:15الثيم اللي اختاره المستخدم الى اخره
13:17وبالتالي لازم تحدد من خلال ها الداله ايش
13:20هو الكونتكس اللي قصدك عليه اللي بدك
13:21تستخدمه فلا يكفي اني اسوي امبورت للوز
13:24كونتكست هوك وانما كذلك لازم اسوي امبورت
13:27للكونكس نفسه اللي انا بنيته عشان احدد
13:29رياكت اي كونتكست هو اللي قصدي عليه فلذلك
13:32راح اجي اقول لله امبورت لون انبوت
13:36كونتكست فم كونتكست لون فور انبوت كونجي
13:40اس الان انا لازم استخدم هذا الكونتكس
13:42كايش كرامت لهي الفنكشن اللي اسمها يوز
13:45كونتكست عشان تعرف رياكت اي كونتكست هو
13:48اللي قصدي عليه فلو جيت الان وقلت له خذ
13:51لي هذا اللون انبوت كونتكست وهو يحطلي
13:53اياه ك بارامتر بعدين راح تجيني الفالو
13:56النهائيه في الماي كونتكست اللي راح اسويه
13:58اني راح جي يقوله كونول دوت لو بعدين راح
14:01اكتب ذا كونتكست وين هذا الملف اللي اسمه
14:05مايجي اس فراح يكون اسمه ماي انبوت دوت جي
14:10اس وبعدين راح اسوي كونسول لو مره ثانيه
14:13للماي كونتكست اللي انا استخرجته خليني
14:16اسوي سيف واشوف ايش النتيجه راح ارجع مره
14:18ثانيه خليني افتح الكونسول على اليسار راح
14:20اسوي ريفريش عشان اتاكد انه ما في اخطاء
14:22لاحظ ايش عم يقوللك اول
14:26شيجي اس رجعلي هذا اوجت اللي هو عباره عن
14:30الاوبجكت اللي فيه التايتل هلو ورد طبعا
14:33هو بستدعي لك اياها مرتين لسبب معين في
14:36بيئه الفلمنت ما راح اذكره حاليا بعدين اج
14:39مره ثانيه وكتبلي ذا كونتكست فم ماي انبوت
14:42از بعدين حطلي اوبجكت غريب وبيحتوي على
14:46نلز يعني كانه اوبجكت فاضي واجا مره ثالثه
14:49وسوال لي هذا الشيء اول شي السؤال الاساسي
14:52بغض النظر عن التكرارات الموجوده هون ليش
14:55سو لي ثلاث مرات سو لي ا ثلاث مرات لان
14:59انه هذا الماي انبوت دوت جي اس الكومبوننت
15:02اللي هون انا ما عم استخدمه مره واحده في
15:05اللون فورم وانما عم استخدمه ثلاث مرات
15:08مره للنيم مره للفون نمبر مره
15:12للايجار يستخدم هذا الكونتكس وصحيح اني في
15:15كل مره هو عباره عن كومبونت واحد من نفس
15:19الكومبوننت عم اقول لله روح جيب لي اللون
15:21انبوت كونتكست من استدعاء الداله اللي
15:24اسمها يوز كونتكست عشان تحفظلي اياهم في
15:26هذا المتغير لكن المره الوحيده اص اللي
15:29وفرت المتغيرات اللي بيحتاجها هذا الانبوت
15:32هي في الحاله تبع النيم والدليل لو رحت
15:35على اللون فورم لاحظ انا المره الوحيده
15:37اللي سويت فيها احاطه لهذا العنصر
15:41بالبروفا ايدر اللي هي بسميها الرابينج
15:43لاني حطيته بداخل البروفايدر فصار عنده
15:46امكانيه للوصول الى هذا الفالو اوبجكت ترى
15:48هي فقط في حاله الانبوت الاول لكن الماي
15:51كومبونت الثاني ما سويت له والماي كومبونت
15:53الثالث ما سويت له فلذلك الكومبوننت الاول
15:57هو اللي كان قادر على الوصول الى الكونت
15:59فالمفروض حتى الكومبوننت الثاني اني اغطيه
16:01بنفس الطريقه او اسوي له رابين او احاطه
16:03بهذا اللون انبوت كونتكست بروفايدر لكن
16:06اللي بيهمني الان لاحظ كيف تم ارسال
16:08الفالو من وين من اللون فورم الى الابن
16:11تبعه اللي هو الماي كومبونت بس الماي
16:13كومبونت ترى كل ها المتغيرات تبع البروبس
16:16ما عاد يحتاجها يعني انا ممكن اشيلها بس
16:18راح اخليها شوي بس وصلت حتى الى الحفيد
16:21مباشره اللي هي عباره عن التايتل الموجود
16:24في هذا الاوبجكت بدون ما احتاج ارسلها الى
16:26الابن والابن يروح يرسلها الىى الحفيد
16:28مباش مباشره ظهرت في التري على حسب المكان
16:30اللي بدك تستخدمها فيه وبالتالي هذا
16:32الاوبجكت خلاص الان بقدر اشكله بالطريقه
16:34اللي بدي اياها واحدد الاشياء اللي بدي
16:35ارسلها مثل ما حطيت تايتل ممكن اقول له
16:38مثلا نيم وهون بالنيم راح احط ترميز
16:42اكاديمي على سبيل المثال واسوي سيف وارجع
16:45مره ثانيه راح تلاحظ بالمره الثانيه انه
16:47طبع لي هذا الاوبجكت بكل البيانات
16:49الموجوده عندي ممتاز فالان انا اللي بقدر
16:52اسويه اني بدل ما ارسل التايتل وارسل
16:54النيم اقول له لا ارسل له المعلومات اللي
16:56هو مهتم فيها اللي هي عباره عن الو
16:59والهاند تينج فراح اجي يقوله انه الفالو
17:02راح تكون عباره عن الشيء الموجود عندي وين
17:06في اللون انبوت وبالتالي ها راح تكون لون
17:09انبوت دوت نيم والهاند تينج راح يكون
17:13عباره عن الفانكشن اللي اسمها هاندل نيم
17:16انبوت تينج طبعا هون لازم ما تكون يساوي
17:19هذا جيسون وبتالي لازم تكون كولون فالان
17:21هذول القيمتين راح يتم ارسالهم على انها
17:24فو وعلى انها هاندل تينج فانا بقدر الان
17:26اروح من الماي انبوت مباش شره بدون ما
17:29احتاج الوسيط اللي هو الماي كومبونت عشان
17:31يرسل لي المعلومات واجي اقول له انه
17:34الفالو ما راح اخذها من البروبس هالمره لا
17:37صار في عندي كانه متغير جلوبال بيوفر لي
17:40الاشياء اللي انا بحتاجها فكل البروبس
17:43الموجوده بالماي انبوت انا راح اشيلها
17:45وراح اجي يقول له هذا الماي انبوت راح
17:47يستخدم اللون انبوت كونتكست عشان يوصل
17:49للقيم اللي هو بيحتاجها بدل ما ارسلهم في
17:51البروبس وبالتالي اول شيء بالنسبه للفال
17:54هون راح اقول له روح لي على الماي كونتكست
17:57وهو اللي يستخرج لي من منه الفاليو طبعا
17:59هون الافضل اني ما اسميها باسم الي
18:01كونتكست وانما اكون محدد اكثر عشان توضح
18:03لي الشيء اللي بتسوي لي اياه فان راح
18:05اسميه باسم انبوت كونتكست بهذا الشكل
18:08وبعدين راح اقول له روح لي على الانبوت
18:12كونتكست وهو اللي استخرج لي منه الفالو
18:15طبعا انا مو قصدي هون وانما قصدي في هذا
18:19المكان ولما يصير في اي تغيير روح استدعي
18:21لي الفانكشن اللي اسمها هاندل تينج اللي
18:23هي جايتني من وين ما بدر استدعها بهذا
18:25الشكل مباشره لانه هي جايتني من البوت
18:27كونتكست فراح اقول له استدعي لي الانبوت
18:30كونتكست دوت هاندلينج بهذا الشكل طبعا لو
18:33سويت سيف الان ورجعت مره ثانيه طبيعي انه
18:35يطلع لك خطا لانه عم يقوللك الانبوت نيم
18:37not ديفاين وعم يقوللي كمان ان الانبوت
18:40كونتكست not ديفاين لاني عم استخدمه في
18:42اماكن اخرى بس الان خليني احل مشكله
18:44الانبوت نيم لذلك بنفس الطريقه اللي انا
18:47ارسلت فيها المتغيرات اللي بحتاجها في
18:49الكونتكس راح يجي من اللون فورم ققول لله
18:52مو بس وفرلي الفالو وال هاندل تينج وانما
18:54كذلك وفر لي شيء راح اسميه مثلا باللب
18:58تايتل على سبيل المثال وهذا راح يكون نيم
19:01وبعدين ها القيمه اللي راح يتم رميها
19:03خلينا نسميه او تمريرها من خلال التري
19:06اللي هي تبع الكومبوننت راح اروح لما اوصل
19:08عند الماي انبوت استفيد منها فراح اقول له
19:10بنفس الطريقه روح الى الانبوت كونتكست
19:14واستخرج لي منها الليبل تايتل خليني نتاكد
19:18اني سميتها ليبل تايتل بالفعل طبعا هون ها
19:20لازم ما تكون ماي كونتكست وانما انبوت
19:23كونتكست راح اشيل الكونسول لوج من هون
19:25وراح اسوي سيف وارجع مره ثانيه اشوف
19:27النتيجه خليني اجرب الان لو رحت عند
19:29الانبوت تبع النيم اول شيء ما طلع لي
19:31النيم هون لو كتبت عليه كذلك خليني نشوف
19:34هل هذا عم يحدث الستيت اساسا لو رحت على
19:37الكومبوننت لاحظ انه فعلا النيم تحدث بس
19:40خليني اشوف ليش الليبل ما طلع النيم تبعه
19:43لو رجعت مره ثانيه لاحظ اني كتبتها بطريقه
19:45خاطئه هي عباره عن ليبل تايتل بهذا الشكل
19:49لو رجعت لاحظ انه فعلا طلع لي النيم
19:51هالمره بالنسبه ل الانبوت الثانيه ما راح
19:53تشتغل معك بطريقه صحيحه حتى لو غيرت
19:56القيمه راح تلاحظ انه القيمه ما عم تتغير
19:58اصلا في الفون نمبر انبوت وهذا بسبب اني
20:01ما احطها بالكونكت بنفس الطريقه ووفرت لها
20:04البيانات اللي بتحتاجها فان ممكن ارجع مره
20:06ثاني عند اللون فورم وبنفس الطريقه اللي
20:08انا سويت فيها هذا الكونتكس اسويله نسخ
20:11وبالنسبه لل كومبونت الثاني اجي اسويله
20:13لصق واخليه يحيط بهذا الماي كومبونت ويوفر
20:17له الاشياء اللي بده اياها فهون راح يوفر
20:19له اللون انبوت دوت فون نمبر والهاند تينج
20:23راح تكون الهاندل فون نمبر انبوت تينج
20:27واليب تايتل راح يكون ع عاره عن الفون
20:30نمبر بهذا الشكل وبنفس الطريقه راح اخذ
20:33هذا البروفايدر تبع الليبل انبوت كونتكست
20:36واسويه بالنسبه للايدج بنفس الطريقه
20:39وبالتالي راح اخليه يحيط بهذا الكومبوننت
20:41عشان تصير الفالو اللي عم رسلها كبرو
20:45متاحه في هذا المكان طبعا اسم الفالو هون
20:47ترى مهم جدا ما بتقدر هون تتحكم بالاسم
20:50اللي بدك اياه ها ما هي كستم بروبرتي انت
20:52بتعرفها هي معرفه اصلا في هذا البروفايدر
20:54طيب ممتاز هون لازم اعدلها بنفس الطريقه
20:57اخليها ايج وبالنسبه للاندل تينج راح تكون
21:00هاندل ايج انبوت تينج والقيمه اللي راح
21:04يقرا منها هي عباره عن الايج لو سويت سيف
21:06الان ورجعت مره ثانيه لاحظ انه ارسل لي
21:09البيانات بطريقه صحيحه بالنسبه لليبل فون
21:11نمبر وكذلك الايج ولو عدلت على الايج مثلا
21:14راح تلاحظ انه فعليا عم يعدل لك على
21:16الستيت الموجوده عندك هون لو عدلت على
21:18الفون نمبر عم يعدلك على الستيت الموجوده
21:20هون بنفس الطريقه وبالتالي ممتاز ايش
21:23الفائده اللي استفدتها الفائده اللي
21:25استفدتها الان انه ها الببس اللي عم رسلها
21:28المايك كومبونت ترى انا بقدر اشيلها
21:30واتخلى عنها خلص ماني محتاج اني ارسل له
21:32بيانات بس عشان يكون وسيط ويروح يرسل لي
21:35اياها الى الماي انبوت فراح امسحها من كل
21:38الماي كومبونت اللي حطيتها بهذا الشكل
21:40وبعد ما مسحتها الان راح اروح على الماي
21:44كومبونت هذا وراح اشيل ها البروبس كلها
21:46خلاص انا ما عاد اعتمد على البروبس وانما
21:48عم معتمد على طريقه اخرى اللي هي عباره عن
21:50طريقه الكسوم ولاحظ انه ترى هذا الماي
21:54كومبونت اللي هو كان عباره عن وسيط عشان
21:56يوصل لي ها القييم انا مو بس مسحت البروبس
21:59انا حتى الماي كونتكست ترى هون ما بقرب
22:02عليه ماني محتاج استخدمه نعم هو عم يصير
22:04له باس ضمنيا لكني ماني محتاج اني استخدمه
22:08اساسا وراح اروح على الماي انبوت كذلك
22:10ولاحظ ان الماي انبوت كذلك تخلى عن
22:12البروبس لانه صار عم يوصل للمتغيرات اللي
22:14بيحتاجها من خلال اليوز كونتكست ولو سويت
22:17سيف الان راح تلاقي انه كل شيء شغال معك
22:19تمام بس الكود صار مرتب بطريقه افضل
22:22متناسبه بشكل اكبر مع طبيعه الاستركشر
22:26اللي انا سويته بحكم انه عندي ابن وهذا
22:29الابن بيحتوي على ابن فعندي ري ليفلز وفي
22:32نهايه الامر وفرت الكونتكس لكل المستويات
22:35بدون ما احتاج اني اسوي لهم باس عده مرات
22:37من خلال كتابه الكود عده مرات فهي هي
22:40الفكره الاساسيه من الكونتكت وهي حاله
22:42الاستخدام اللي وضحت لك اياها هي احد
22:44حالات الاستخدام اللي ممكن تستخدمها فيها
22:46وفي حالات استخدام اخرى منها اللي راح
22:49نتعرف عليها في الدرس الجاي لكن ملاحظه
22:51مهمه بشكل سريع قد يبدو الك انه الكونتكس
22:55بحل المشكله بنسبه 100% فتقول لنفسك خلص
22:58ليش ما استخدم الكونتكس دائما وابدا وما
23:01استخدم البروبس ابدا وهذا الشيء خاطئ لانه
23:04الكونتكس تر له سلبيات بشكل سريع انه مثلا
23:08راح يروح يحدث لك كل الكومبوننت اللي
23:10بالري بسبب انه عم يصير له باس لكل
23:13الكومبوننت اللي بال تري بمجرد ما تتغير
23:16قيمه معينه فلذلك الاصل انك ما تلجا
23:19للكونكس الا لما تحتاجه ولا اذا ما احتجته
23:22فممكن تعتمد على خيارات اخرى اللي على
23:24راسها ممكن يكون البروبس واحيانا حتى لو
23:27البروبس سبب لك مشاكل في طرق اخرى ممكن
23:29تتفاداها فيها احدها هو الكونتكت اللي
23:33اتمنى وصلتك فكرته في هذا الدرس بعرف ان
23:35موضوع الكونتكس شوي بيلخبط لكن مره ثانيه
23:38اذا جيت وطبقت بنفسك راح تبين معك
23:40المواضيع بشكل افضل اتمنى ان شاء الله انه
23:42كان الشرح واضح ونشوفكم ان شاء الله بدرس
23:44الجاي

About this transcript

This page contains the full transcript of 48 : Using (useContext) to Fix The Prop Drilling Issue by أكاديمية ترميز, generated from the public captions YouTube serves with the video. The transcript has 3,650 words across 504 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.