مرحبًا بكم مرة أخرى أيها الأصدقاء!


سنتناول اليوم أساسيات خطاف React المسمى useContext. useContext هي أداة قوية تتخطى useState لإنشاء حالة شبيهة بالعالمية يمكنها تمرير المعلومات إلى المكونات الفرعية والأحفاد دون تمرير الخاصيات مباشرةً.

لكنني أتقدم على نفسي.
إذا لم تكن على دراية بـ useState، فانتقل واقرأ مقالتي السابقة أولاً، ثم عد واستعد لتندهش!


كيفية استخدام "useState": https://dev.to/deborah/how-to-use-state-in-react-2pah

الآن بعد أن أصبحت على دراية بـ "useState"، دعنا نتعمق في "useContext"!

ما هو سياق الاستخدام ؟:

يعد useContext مثاليًا للبيانات التي يجب وضعها على نطاق عالمي (مثل اسم المستخدم الذي سيبقي شخصًا ما مسجلاً للدخول طوال التطبيق بالكامل) ولكنه ليس الاختصار الشامل لـ تمرير الدعائم إلى مكونات الأطفال.
ومع ذلك، فإن useContext يسمح لنا بتمرير البيانات دون تمرير الخاصيات مباشرة، وبالتالي فهو مفيد للغاية عندما نواجه بيانات تحتاج إلى الوصول إليها بواسطة العديد من المكونات الفرعية أو إتاحتها عبر التطبيق بأكمله.

من أجل تشغيل useContext، نحتاج إلى اتخاذ خطوتين: أولاً، نحتاج إلى إنشاء كائن سياق ("createContext")، ثم نحتاج إلى الوصول إلى القيمة عبر موفر باستخدام الخطاف "useContext" .

تم تبسيط الأمثلة التالية لإعطائك فكرة أفضل عن ماهية useContext وكيفية استخدامه، ولكن يجب أن تدرك أن createContext غالبًا ما يتم الإعلان عنه في ملف منفصل خاص به. ومع ذلك، فأنا أشبه "Parent.js" بملف "App.js" النموذجي (مكون في أعلى التسلسل الهرمي للمكونات). Parent.js هو المكان الذي قمت فيه بتحديد جميع متغيرات الحالة الخاصة بي، والوظائف التي تعمل على تحديث متغيرات الحالة هذه، وإحضارها إلى قاعدة البيانات باستخدام useEffect. لقد اخترت الإعلان عن createContext في مكون المستوى الأعلى الخاص بي بدلاً من إنشاء ملف خاص به لتبسيط هذا الشرح حتى تتمكن من فهم المفاهيم الأساسية للسياق بشكل أفضل.

بعد كل ما قيل، لنبدأ من البداية: createContext!

1. أول شيء يتعين علينا القيام به هو الإعلان عن متغير يسمى "السياق" وتصديره والذي سنستخدمه لاحقًا في مكوناتنا الفرعية [نحن نقوم بإنشاء متغير الآن لجعل الكود الخاص بنا أكثر بساطة وحتى نتمكن من وضعه قيمة (بيانات) بداخلها ليتم الوصول إليها لاحقًا]:

export Context = React.createContext();

"السياق" هو ​​كائن سياق تم إنشاؤه عن طريق استدعاء "createContext". يحتوي كائن السياق على مكون يسمى Provider والذي سنكون قادرين الآن على استدعائه ثم تمرير المتغيرات والوظائف التي نريد الاحتفاظ بها على مستوانا "العالمي".

2. باستخدام متغير "السياق"، دعنا ننتقل الآن إلى JSX في بيان الإرجاع. سنستدعي هنا "السياق" ونلفه في علامات فتح (بين قوسين)، ونستدعي أيضًا الموفر كما يلي:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

لإكمال "Context.Provider"، نحتاج أيضًا إلى تقديم قيمة إلى "Provider". هذا هو المكان الذي سنمرر فيه كائنًا يحتوي على جميع المتغيرات والوظائف التي سنستدعيها بـ "السياق" في المكونات الفرعية:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

من المهم جدًا ملاحظة أننا بحاجة إلى وضع جميع المكونات الفرعية التي ستستخدم المتغيرات والوظائف بين العلامات. على سبيل المثال:

return(
    
);

لاحظ أننا لا نحتاج إلى تمرير أي خاصيات مباشرة إلى المكونات الفرعية (كما نفعل مع 'useState') طالما أننا نضع الخاصيات داخل 'value'.

الآن بعد أن استخدمنا createContext وقمنا بتمرير جميع العناصر العامة لدينا إلى "Context.Provider"، نحن مستعدون للانتقال إلى المكونات الفرعية ومعرفة كيفية استخدام "Context".

3. دعنا ننتقل إلى المكون الفرعي الموجود (من أجل هذا المثال) في الملف "Child.js". كما هي الحياة مع البرمجة: إذا كنت تريد استخدام شيء ما، فأنت بحاجة إلى استيراده. دعنا نمضي قدمًا ونحصل على "السياق" من حيث أعلنا عنه في "Parent.js" حتى نتمكن من استخدامه في هذا المكون الفرعي ("Child.js"):

import Context from ‘./Parent.js’;

4. الآن بعد أن أصبح لدينا إمكانية الوصول إلى "السياق" في المكون الفرعي، نحتاج الآن إلى استيراد "useContext" إلى الملف حتى نتمكن من تمرير "السياق" إليه (المزيد حول ذلك قريبًا):

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

5. عظيم! الآن دعونا نستخدم "useContext". نحتاج أولاً إلى الإعلان عن متغير لاستخدام "useContext" معه. سنفعل ذلك داخل المكوّن بطريقة مشابهة للطريقة التي نعلن بها useState:

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

في هذا الكود نستخدم الأقواس المتعرجة {} للدلالة على مهمة التدمير. هذه طريقة رائعة للقول إننا قادرون على استدعاء متغيرات ووظائف متعددة مخزنة في السياق. نقوم أيضًا بتمرير "السياق" إلى "useContext" حتى نتمكن من الوصول إلى القيم المحددة في context.Provider (التي أعلنا عنها في "Parent.js").



6. صدق أو لا تصدق، أنت جاهز تمامًا! يمكنك الآن استخدام قيم السياق في التعليمات البرمجية الخاصة بك تمامًا كما تستخدم الحالة عادةً. على سبيل المثال:

const expId = example.id;

أو

setExample(newExample);

دعونا نلخص:

تهانينا! لديك الآن جميع الأدوات اللازمة للبدء في استخدام createContext وuseContext. أنت تدرك أن useContext يسمح لك بإنشاء شيء من "الحالة العامة" التي يمكنها تمرير المتغيرات والوظائف إلى المكونات دون تمرير الدعائم مباشرة عبر المكونات الفرعية.

لقد بحثنا أيضًا في الخطوات الست المطلوبة لتشغيل السياق في تطبيقاتك. أنت الآن جاهز لبدء البرمجة باستخدام createContext وuseContext، ولكن إذا كنت بحاجة إلى دليل البدء السريع، فإليك ما يلي:

في المكون الأصلي الخاص بك، قم بتعريف وتصدير متغير يسمى "Context" باستخدام "createContext":

export const Context = React.createContext();

في JSX الخاص بالمكون الأصلي، قم بتغليف جميع المكونات الفرعية التي تحتاج إلى الوصول إلى السياق في context.Proivder، وقم بتمرير أي متغيرات/وظائف داخل الكائن:

   //Child components

في المكون الفرعي الخاص بك، قم باستيراد "useContext":

import React, { useContext } from ‘react’;

قم أيضًا باستيراد "السياق" من المكون الأصلي:

import Context from “./Parent.js’;

ثم استخدم useContext وقم بتمرير متغير "السياق" الخاص بك:

const { example, handleExample } = useContext(Context);

أخيرًا، استخدم السياق الذي يمكنك الوصول إليه الآن (في الأمثلة أعلاه، سيكون هذا هو "example" و"handleExample") مهما كنت بحاجة إلى ذلك في المكون الفرعي.

أحسنت! وحتى المرة القادمة، برمجة سعيدة!

ملاحظة أخيرة، إذا كنت ترغب في التعمق أكثر في هذا الموضوع، فإليك موارد التوثيق الرسمية التي أشرت إليها أيضًا أثناء تعلم useContext وكتابة هذه المدونة:

التوثيق الرسمي:
https://react.dev/reference/react/createContext

الوثائق الرسمية القديمة، لا تزال مفيدة إلى حد ما لفهم سياق الاستخدام:https://legacy.reactjs.org/docs/context.html