واجهة برمجة تطبيقات سياق React هي أداة إدارة حالة تُستخدم لمشاركة البيانات عبر مكونات React. تعرف على كيفية استخدام Context API لتتبع المستخدمين المصادق عليهم في المكونات الوظيفية.

ما هي واجهة برمجة تطبيقات سياق React؟

React هي مكتبة قائمة على المكونات. تطبيقاته تشمل مكونات مختلفة التي تعمل معًا. في بعض الحالات ، يحتاج التطبيق الخاص بك إلى مشاركة البيانات عبر هذه المكونات.

على سبيل المثال ، قد ترغب في مشاركة اسم المستخدم الخاص بالمستخدم الحالي من ملف تسجيل الدخول مكون لمكونات أخرى في التطبيق الخاص بك. سياق يسهل مشاركة اسم المستخدم من خلال التخلص من الحاجة إلى تمرير البيانات عبر كل مكون في شجرة المكونات.

متى يجب عليك استخدام واجهة برمجة تطبيقات سياق React؟

قبل استخدام سياق React ، أولاً ، ضع في اعتبارك نوع البيانات التي تعمل معها. السياق أكثر ملاءمة للبيانات الثابتة. ستؤدي البيانات التي تتغير باستمرار إلى عمليات إعادة تصيير كثيرة جدًا ، ونتيجة لذلك ، تقلل الأداء. يجب أن تكون البيانات عالمية أو على الأقل مستخدمة من قبل العديد من المكونات ، على سبيل المثال ، البيانات مثل لغة المستخدم والموضوعات والمصادقة.

استخدام السياق لتتبع حالة مصادقة المستخدم

إذا كان تطبيقك يستخدم المصادقة ، فسيتعين على العديد من مكوناته معرفة حالة مصادقة المستخدم الحالية. يعد تمرير حالة المصادقة إلى كل مكون أمرًا زائدًا عن الحاجة ويؤدي إلى دعم الحفر ، لذا فإن استخدام السياق يعد خيارًا جيدًا.

createContext ()

لبدء استخدام واجهة برمجة تطبيقات السياق ، عليك أولاً إنشاءها باستخدام بناء الجملة هذا.

سياق const = React.createContext (defaultValue) ؛

القيمة الافتراضية غير ضرورية وعادة ما تستخدم لأغراض الاختبار.

مزود

يحتوي كل سياق على موفر يتلقى قيمة تستهلكها المكونات التي يلتف عليها. يسمح لهذه المكونات بالاشتراك في تغييرات السياق.

useContext

useContext () هو رد فعل هوك يسمح للمكونات باستهلاك السياق. ما عليك سوى أن تمر في السياق.

سياق constValue = useContext (سياق)

لنقم الآن بإنشاء سياق المصادقة لتتبع حالة المصادقة.

ابدأ بإنشاء ملف جديد ، AuthContext.js ، وأضف ما يلي.

استيراد {createContext} من "رد فعل" ؛
const AuthContext = createContext () ،
تصدير AuthContext الافتراضي ؛

بعد ذلك ، قم بإنشاء AuthProvider.js وإضافة وظيفة الموفر.

استيراد {useState، useEffect} من 'رد فعل'؛
استيراد {getUser} من "./auth.js"
استيراد AuthContext من "./AuthContext"
تصدير const AuthProvider = ({children}) => {
 const [user، setUser] = useState (خالية) ؛
 useEffect (() => {
 const currentUser = getUser ()
 setUser (currentUser)
 }, []);
إرجاع (
{الأطفال}
 );
 };

هنا ، تقوم باسترداد المستخدم الحالي من مزيف getUser () وظيفة. في تطبيق حقيقي ، ستكون هذه هي الخدمة الخلفية الخاصة بك.

قم بتخزين المستخدم في الحالة الحالية لتتبع أي تغييرات ، ثم قم بتمرير المستخدم إلى الموفر في خاصية القيمة.

AuthProvider.js يستقبل أيضًا الأطفال مع إمكانية الوصول إلى السياق.

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

قم بإنشاء ملف جديد useAuthContext.js وأضف ما يلي.

استيراد AuthContext من "./AuthContext" ؛
const useAuthContext.js = () => {
 مستخدم const = useContext (AuthContext) ؛
 إذا (المستخدم غير محدد) {
 رمي خطأ جديد ("لا يمكن استخدام useAuthContext إلا داخل AuthProvider") ؛
 }
 مستخدم عائد
};

الآن إذا كان رمز خارج المكالمات الموفر AuthContext، سيتعامل تطبيقك مع الخطأ بأمان.

الخطوة الأخيرة هي التفاف المكونات باستخدام السياق مع AuthProvider.js.

استيراد {AuthProvider} من "./AuthContext" ؛
ReactDOM.render (




,
 rootElement
);

فيما يلي مثال على كيفية استخدام السياق لحماية الصفحة من المستخدمين غير المصادق عليهم.

استيراد useAuthContext من "./useAuthContext" ؛
استيراد {تنقل} من "رد فعل جهاز التوجيه-dom" ؛
ملف تعريف const = () => {
 const {user} = useAuthContext () ،
 إذا (! مستخدم) {
 إرجاع ;
 }
 إرجاع (
 <>
حساب تعريفي

 );
};

هذا المكون يعرض بشروط صفحة ملف التعريف اعتمادًا على حالة مصادقة المستخدم. يتحقق مما إذا كان المستخدم موجودًا وإذا لم يكن موجودًا ، يعيد توجيهه إلى صفحة تسجيل الدخول. خلاف ذلك ، فإنه يعرض صفحة الملف الشخصي.

عندما لا تستخدم واجهة برمجة تطبيقات سياق React

في هذه المقالة ، تعلمت كيفية استخدام السياق لتتبع مستخدم مصادق عليه عبر المكونات. على الرغم من أنك قد تميل إلى استخدام السياق لجميع حالات استخدام مشاركة البيانات الخاصة بك ، فلا يجب عليك ذلك لأنه يقلل من قابلية صيانة الكود والأداء. في كل مرة تتغير قيمة السياق كل مكون يستهلك حالة يعيد تصيير. إذا تم استخدام البيانات فقط من قبل عدد قليل من المكونات ، فاختر الدعائم.

كيفية استخدام الدعائم في ReactJS

اقرأ التالي

نبذة عن الكاتب