استخدام الـ Context API في React

الدرس الحادي عشر: استخدام الـ Context API في React

في هذا الدرس، سنتعرف على Context API في React وكيفية استخدامه لتمرير البيانات بين المكونات بدون الحاجة إلى استخدام props بشكل يدوي عبر كل المكونات المتداخلة. سنغطي أيضًا كيفية استخدام useContext للحصول على البيانات من الـ Context في المكونات.

1. ما هو Context API في React؟

Context API هو ميزة في React تتيح لك تمرير البيانات عبر شجرة المكونات بدون الحاجة إلى تمرير هذه البيانات عبر props من مكون إلى آخر بشكل يدوي. يمكن أن يكون هذا مفيدًا عندما تحتاج إلى مشاركة بيانات أو حالة معينة بين العديد من المكونات دون الحاجة لإعادة تمريرها عبر سلسلة من المكونات المتداخلة.

على سبيل المثال، يمكن استخدام الـ Context API لتمرير بيانات مثل معلومات المستخدم (مثل اسم المستخدم أو حالة تسجيل الدخول) إلى العديد من المكونات في التطبيق دون الحاجة إلى تمريرها كـ props عبر كل مكون.

2. كيف يمكن استخدام Context لتمرير البيانات بين المكونات بدون الحاجة لـ props؟

يتكون Context من عدة أجزاء رئيسية هي:

• React.createContext(): لإنشاء Context جديد.
• Provider: مكون يستخدم لتوفير البيانات لجميع المكونات التي تحتاج إلى الوصول إليها في الشجرة.
• Consumer: مكون يستخدم لاستهلاك البيانات من الـ Context (لكن في الإصدارات الحديثة من React، أصبح useContext هو البديل الأفضل لـ Consumer).

خطوات إنشاء واستخدام الـ Context API:

1. إنشاء Context جديد باستخدام React.createContext():

import React from 'react';

// إنشاء الـ Context
const MyContext = React.createContext();

2. استخدام الـ Provider لتمرير البيانات عبر الشجرة:

import React from 'react';
import { MyContext } from './MyContext'; // استيراد الـ Context

function App() {
  return (
    <MyContext.Provider value={{ name: 'John Doe', age: 30 }}>
      <Profile />
    </MyContext.Provider>
  );
}

export default App;

في هذا المثال:

• قمنا بإنشاء MyContext.Provider وأعطيناه value التي تحتوي على البيانات التي نريد تمريرها عبر شجرة المكونات.
• أي مكون داخل MyContext.Provider سيكون قادرًا على الوصول إلى هذه البيانات.

3. استخدام البيانات من الـ Context في مكونات فرعية:

بدون useContext (باستخدام Consumer):

import React from 'react';
import { MyContext } from './MyContext';

function Profile() {
  return (
    <MyContext.Consumer>
      {context => (
        <div>
          <h1>{context.name}</h1>
          <p>Age: {context.age}</p>
        </div>
      )}
    </MyContext.Consumer>
  );
}

export default Profile;

مع useContext (الطريقة الحديثة):

من الأفضل في React 16.8 وما بعده استخدام useContext بدلاً من Consumer لأنه يجعل الكود أكثر نظافة ووضوحًا.

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

function Profile() {
  const context = useContext(MyContext); // الحصول على البيانات من الـ Context

  return (
    <div>
      <h1>{context.name}</h1>
      <p>Age: {context.age}</p>
    </div>
  );
}

export default Profile;

الشرح:

• في المثال الأول، استخدمنا MyContext.Consumer لاستهلاك البيانات من الـ Context. الطريقة الصحيحة هي تمرير دالة داخل الـ Consumer تستقبل البيانات وتعرضها.
• في المثال الثاني، استخدمنا useContext للحصول على البيانات من الـ Context مباشرة في المكون. useContext هو هوك يمكنه استرجاع القيمة من الـ Context الذي تم تحديده بواسطة الـ Provider.

3. كيفية استخدام useContext للحصول على البيانات من الـ Context؟

useContext هو هوك مدمج في React يسمح للمكونات بالوصول إلى الـ Context بسهولة.

مثال عملي باستخدام useContext:

import React, { useContext } from 'react';

// إنشاء الـ Context
const ThemeContext = React.createContext();

// مكون يستخدم الـ Context
function ThemedComponent() {
  const theme = useContext(ThemeContext); // الحصول على البيانات من الـ Context

  return (
    <div style={{ backgroundColor: theme.background, color: theme.text }}>
      <h1>Themed Component</h1>
      <p>This component is styled based on the current theme.</p>
    </div>
  );
}

// المكون الرئيسي - تحديد الـ Context
function App() {
  const theme = {
    background: 'black',
    text: 'white'
  };

  return (
    <ThemeContext.Provider value={theme}>
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

export default App;

في هذا المثال:

• أنشأنا ThemeContext لتخزين بيانات السمة (مثل الخلفية والنص).
• قمنا بتوفير هذه البيانات عبر ThemeContext.Provider في المكون الرئيسي App.
• استخدمنا useContext(ThemeContext) في المكون ThemedComponent للحصول على البيانات المتعلقة بالثيم وتطبيقها على المكونات.

الشرح:

• باستخدام useContext، يمكن للمكونات الوصول إلى البيانات التي تم توفيرها من خلال الـ Provider دون الحاجة إلى تمرير البيانات عبر props.
• يمكن استخدام useContext في أي مكون داخل شجرة المكونات طالما أن هذا المكون موجود داخل Provider.

4. متى يجب استخدام Context API؟

Context API هو أداة قوية، ولكن ينبغي استخدامها بحذر. يتم استخدامها بشكل أساسي في الحالات التي:

• تحتاج فيها إلى مشاركة بيانات بين العديد من المكونات في أجزاء مختلفة من الشجرة.
• تحتاج إلى تخزين حالة عالمية لا تعتمد على الـ state داخل المكونات مثل الإعدادات، اللغة، السمة (theme)، أو حالة المستخدم.
• يمكنك استخدام Context API لتجنب تمرير props عبر العديد من المكونات، مما قد يؤدي إلى الكود المعقد.

5. الختام

Context API في React هو أداة قوية لتمرير البيانات بين المكونات بدون الحاجة إلى تمريرها عبر props بشكل يدوي. باستخدام useContext، يمكن للمكونات الحصول على البيانات بسهولة من الـ Context. مع أن Context API يعد حلاً فعالاً لمشاركة البيانات، إلا أنه يجب استخدامه بحذر، حيث يمكن أن يؤثر على أداء التطبيق إذا تم استخدامه بشكل مفرط.

في هذا الدرس، تعلمنا كيفية:

• إنشاء Context باستخدام React.createContext().
• استخدام Provider لتمرير البيانات عبر الشجرة.
• استخدام useContext للحصول على البيانات في المكونات.