استخدام السياق (Context) في React

من موسوعة حسوب

يُزوِّدنا السياق (Context) بطريقة لتمرير البيانات عبر شجرة المُكوّنات بدون الحاجة لتمرير الخاصيّات props يدويًّا من الأعلى للأسفل في كل مستوى.

تُمرَّر البيانات في تطبيقات React الاعتيادية من المستوى الأعلى للأسفل (أي من المكوّنات الآباء إلى المكوّنات الأبناء) عبر الخاصيّات props، ولكن قد يكون هذا بطيئًا لبعض أنواع الخاصيّات (مثل تفضيلات اللغة وقوالب واجهة المستخدم) والتي تحتاجها العديد من المكوّنات ضمن التطبيق. يُزوِّدنا السياق بطريقة لمشاركة القيم كتلك الموجودة بين المكوّنات بدون الاضطرار لتمرير الخاصيّات عبر كل مستوى من الشجرة.

متى نستخدم السياق

يكون السياق مُصمَّمًا لمشاركة البيانات التي تُعتبر عامّة (global) لشجرة مكوّنات React، مثل المستخدم قيد المصادقة حاليًّا، أو القالب، أو تفضيلات اللغة. على سبيل المثال في الشيفرة التالية نُمرِّر خاصيّة القالب (theme) يدويًّا من أجل تنسيق مكوّن الزر Button:

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  // يجب أن يأخذ مكون شريط الأدوات Toolbar خاصيّة theme إضافية
  // ويمررها إلى ThemedButton
  // قد يصبح هذا عملًا شاقًّا إن احتاج كل زر في التطبيق أن يعرف القالب theme
  // لأنه يجب تمريره عبر كل المكونات
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

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

// يُتيح لنا السياق تمرير القيمة بعمق شجرة المكونات
// بدون الحاجة إلى تمريره إلى كل مكون
// أنشئ السياق لأجل القالب الحالي (مع وضع القيمة light كقيمة افتراضية)
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
	// استخدم Provider لتمرير القالب الحالي إلى الشجرة التالية.
	// يستطيع أي مكون قراءة القالب الحالي بغض النظر عن مدى عمقه في شجرة المكونات
	// في هذا المثال نمرر "dark" كقيمة للقالب الحالي
	
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// لا يجب على المكون الموجود في الوسط أن يمرر القالب للمستويات الأدنى منه
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // استخدام Consumer لقراءة سياق القالب الحالي
  // ستبحث React عن أقرب Provider للقالب في المستوى الأعلى منها وتستخدم قيمته
  // في هذا المثال قيمة القالب الحالي هي "dark"
  
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

قبل أن تستخدم السياق

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

إن أردت فقط تجنّب تمرير بعض الخاصيّات عبر العديد من المستويات، فسيكون استخدام التراكيب حلًّا أبسط من استخدام السياق.

على سبيل المثال افترض وجود مكون للصفحة Page والذي يُمرِّر خاصيّات المستخدم user وحجم الصورة الرمزية avatarSize عبر مستويات عديدة للأسفل بحيث تتمكّن مكونات الرابط Link والصورة الرمزية Avatar الموجودة في مستويات عميقة ومتداخلة أن تقرأها:

<Page user={user} avatarSize={avatarSize} />
// ... والذي يصير ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... والذي يصير ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... والذي يصير ...
<Link href={user.permalink}>
  <Avatar user={user} size={avatarSize} />
</Link>

قد يبدو من الفائض تمرير الخاصيّات user و avatarSize عبر مستويات عديدة للأسفل إن كان يحتاجه في النهاية فقط المكوّن Avatar. من المزعج أيضًا كلّما احتاج المُكوِّن Avatar المزيد من الخاصيّات من المستويات الأعلى فيجب عليك إضافتها في كل المستويات الوسيطة أيضًا. من طرق حل هذه المشكلة بدون السياق هي تمرير المكون Avatar نفسه للأسفل بحيث لا تحتاج المكوّنات الوسيطة أن تعلم حول الخاصيّتين avatarSize أو user:

function Page(props) {
  const user = props.user;
  const userLink = (
    <Link href={user.permalink}>
      <Avatar user={user} size={props.avatarSize} />
    </Link>
  );
  return <PageLayout userLink={userLink} />;
}

// لدينا الآن:
<Page user={user} avatarSize={avatarSize} />
// ... والذي يصير ...
<PageLayout userLink={...} />
// ... والذي يصير ...
<NavigationBar userLink={...} />
// ... والذي يصير ...
{props.userLink}

مع هذا التغيير يحتاج فقط المكون Page ذو المستوى الأعلى إلى أن يعرف عن استخدام المكوّنات Link و Avatar للمكوّنات user و avatarSize.

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

لن تكون محدودًا بمكوّن ابن واحد، فبإمكانك تمرير مكونات أبناء متعددة أو حتى امتلاك منافذ منفصلة متعددة للأبناء كما هو موثق هنا:

function Page(props) {
  const user = props.user;
  const content = <Feed user={user} />;
  const topBar = (
    <NavigationBar>
      <Link href={user.permalink}>
        <Avatar user={user} size={props.avatarSize} />
      </Link>
    </NavigationBar>
  );
  return (
    <PageLayout
      topBar={topBar}
      content={content}
    />
  );
}

يكفينا هذا النمط للعديد من الحالات عند الحاجة لفصل مكوّن ابن عن المكونات الآباء له. وبإمكانك أخذ هذا إلى أبعد من ذلك عن طريق خاصيّات التصيير إن كان المكوّن الابن يحتاج إلى التواصل مع المكوّن الأب قبل التصيير.

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

واجهة برمجة التطبيقات (API)

React.createContext

const MyContext = React.createContext(defaultValue);

عند تصيير React لمكون من كائن السياق، فستقرأ قيمة السياق الحالية من أقرب مُزوِّد Provider فوقها في الشجرة.

لا يُستخدَم الوسيط defaultValue إلا في حال لم يُعثَر على مزوّد Provider مُطابِق فوقه في الشجرة. يُفيد هذا من أجل اختبار المُكوّنات على انفراد بدون تغليفها.

ملاحظة: لا يُؤدّي تمرير القيمة undefined كقيمة للمُزوِّد إلى جعل المكون يستخدم defaultValue.

المزود Provider

<MyContext.Provider value={/* قيمة ما */}>

يأتي كل كائن سياق مع مُكوِّن React مزود الذي يسمح للمكون المستهلِك بأن يُشارك في تغييرات السياق.

يقبل خاصيّة للقيمة value لتمريرها إلى المستهلكات المنحدرة عن هذا المُزوِّد. يُمكِن وصل مُزوِّد واحد مع العديد من المستهلكات. يُمكِن مداخلة المُزوِّدات لتجاوز قيم عميقة ضمن شجرة المُكوِّنات.

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

تُحدّد التغييرات عبر مقارنة القيم الجديدة والقديمة باستخدام نفس الخوارزمية التي تستخدمها مثل Object.is.

ملاحظة: يمكن أن تسبّب الطريقة التي يتم بها تحديد التغييرات بعض المشاكل عند تمرير الكائنات كقيمة.

Class.contextType

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* MyContext تنفيذ تأثير جانبي عند الوصل باستعمال قيمة */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* MyContext تصيير شيء اعتمادًا على قيمة */
  }
}
MyClass.contextType = MyContext;

يمكن إسناد الخاصية contextType في أي صنف إلى كائن سياق (Context object) أنشئ بوساطة ()React.createContext. يمكِّنك ذلك من استهلاك أقرب قيمة حالية لنوع ذلك السياق باستعمال this.context. تستطيع الإشارة عبر مرجع إلى هذا في أي تابع من توابع دورة الحياة بما فيها الدالة render.

ملاحظة: تستطيع الاشتراك في سياق وحيد باستعمال الواجهة البرمجية هذه. إن احتجت إلى قراءة المزيد من أكثر من سياق واحد، اطلع على القسم "استهلاك سياقات متعددة".

إن كنت تستخدم صياغة حقول الصنف العامة (public class fields syntax) التجريبية، تستطيع استعمال حقل صنف ساكن (static class field) لتهيئة نوع السياق contextType الخاص بك.

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* value صيّر شيئًا بناءً على القيمة */
  }
}

المستهلك Consumer

<MyContext.Consumer>
  {value => /* تصيير شيء ما اعتمادًا على قيمة السياق */}
</MyContext.Consumer>

وهو مُكوِّن React الذي يُشارِك بتغييرات السياق داخل دوال المكونات.

يتطلّب دالة كابن له. تستقبل الدالة قيمة السياق الحاليّة وتُعيد عقدة React. تكون قيمة الوسيط value المُمرَّرة إلى الدالة مساوية للخاصيّة value لأقرب مُزوِّد لهذا السياق في المستويات الأعلى من الشجرة. إن لم يُوجَد مُزوِّد لهذا السياق في المستوى الأعلى، ستكون قيمة الوسيط value مساوية للقيمة defaultValue التي مرّرناها للتابع createContext()‎.

ملاحظة: للمزيد من المعلومات حول النمط "دالة كابن" انظر إلى صفحة خاصيّة التصيير.

كل المستهلكات Consumers المنحدرة عن المُزوِّد ستُعيد التصيير عندما تتغير قيمة الخاصيّة value للمُزوّد. لا يخضع الانتشار من المُزوّد إلى المستهلكات المنحدرة عنه إلى التابع shouldComponentUpdate، لذا يُحدَّث المستهلك حتى ولو كان المكوّن الأب غير خاضع للتحديث.

تُحدَّد التغييرات عن طريق مقارنة القيم الجديدة والقديمة باستخدام نفس الخوارزمية مثل Object.is.

ملاحظة: قد تُسبِّب طريقة التغييرات المُحدَّدة بعض المشاكل عند تمرير الكائنات في الوسيط value: سنتحدّث عن المزيد في قسم المحاذير.

Context.Consumer

<MyContext.Consumer>
  {value => /* صيّر شيئًا بناء على قيمة السياق */}
</MyContext.Consumer>

يتغير مكون React الذي يشترك بسياق، وهذا يمكِّنك من الاشتراك بسياق ضمن مكون دالة.

تتطلب الخاصية Consumer دالةً على أنَّها ابنٌ، إذ تستقبل هذه الدالة قيمة السياق الحالي وتعيد عقدة React. الوسيط value المُمرَّر إلى الدالة سيكون مساويًّا إلى قيمة الخاصية value لأقرب مزود (Provider) لهذا السياق في الشجرة أعلاه. إن لم يكن هنالك مزود (Provider) لهذا السياق أعلاه، فسيكون الوسيط value مساويًا إلى القيمة defaultValue التي مُرِّرت إلى ()createContext.

ملاحظة: للمزيد من المعلومات حول النمط "دالة على أنَّها ابنٌ"، اطلع على توثيق خاصيات التصيير.

Context.displayName

يقبل كائن السياق خاصية نصية displayName. تستخدم أداة React DevTools قيمة هذه الخاصية لتحديد ما سيتم عرضه في السياق.

على سبيل المثال، قيمة المكون المعروضة في المثال التالي ستكون MyDisplayName في DevTools:

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

<MyContext.Provider> // "MyDisplayName.Provider" in DevTools
<MyContext.Consumer> // "MyDisplayName.Consumer" in DevTools

أمثلة

السياق الديناميكي

theme-context.js

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

export const ThemeContext = React.createContext(
  themes.dark // القيمة الافتراضية
);

themed-button.js

import {ThemeContext} from './theme-context';

function ThemedButton(props) {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button
          {...props}
          style={{backgroundColor: theme.background}}
        />

      )}
    </ThemeContext.Consumer>
  );
}

export default ThemedButton;

app.js

import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button';

// مكون وسيط يستخدم ThemedButton
function Toolbar(props) {
  return (
    <ThemedButton onClick={props.changeTheme}>
      تغيير القالب
    </ThemedButton>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: themes.light,
    };

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };
  }

  render() {
	// يستخدم الزر ThemedButton بداخل المزود ThemeProvider
	// القالب من الحالة بينما يستخدم الموجود بالخارج القالب الافتراضي dark
    return (
      <Page>
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar changeTheme={this.toggleTheme} />
        </ThemeContext.Provider>
        <Section>
          <ThemedButton />
        </Section>
      </Page>
    );
  }
}

ReactDOM.render(<App />, document.root);

تحديث السياق من المكونات المتداخلة

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

theme-context.js

// التأكد من أنّ القيمة الافتراضية الممررة
// إلى createContext تطابق الشكل الذي يتوقعه المستخدم
export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});

theme-toggler-button.js

import {ThemeContext} from './theme-context';

function ThemeTogglerButton() {
  // لا يستقبل زر تغيير القالب قيمة القالب فقط وإنما الدالة toggleTheme من السياق أيضا
  return (
    <ThemeContext.Consumer>
      {({theme, toggleTheme}) => (
        <button
          onClick={toggleTheme}
          style={{backgroundColor: theme.background}}>
          إطفاء أو تشغيل القالب
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

export default ThemeTogglerButton;

app.js

import {ThemeContext, themes} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };

	// تحتوي الحالة أيضًا على دالة التحديث بحيث تمرر
	// إلى الأسفل إلى مزود السياق
    this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme,
    };
  }

  render() {
	// تمرر كامل الحالة إلى المزود
    return (
      <ThemeContext.Provider value={this.state}>
        <Content />
      </ThemeContext.Provider>
    );
  }
}

function Content() {
  return (
    <div>
      <ThemeTogglerButton />
    </div>
  );
}

ReactDOM.render(<App />, document.root);

استهلاك سياقات متعددة

لإبقاء قدرة السياق على إعادة التصيير بشكل سريع، تحتاج React إلى جعل كل مستهلك سياق على شكل عقدة منفصل في الشجرة:

// سياق القالب، بشكل افتراضي قيمته light
const ThemeContext = React.createContext('light');

// سياق المستخدم قيد تسجيل الدخول
const UserContext = React.createContext({
  name: 'Guest',
});

class App extends React.Component {
  render() {
    const {signedInUser, theme} = this.props;

	// مكون التطبيق الذي يزودنا بقيم مبدئية للسياق
    return (
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Layout />
        </UserContext.Provider>
      </ThemeContext.Provider>
    );
  }
}

function Layout() {
  return (
    <div>
      <Sidebar />
      <Content />
    </div>
  );
}

// قد يستهلك المكون العديد من السياقات
function Content() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

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

الوصول إلى السياق في توابع دورة الحياة

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

class Button extends React.Component {
  componentDidMount() {
	// قيمة ThemeContext هي this.props.theme
  }

  componentDidUpdate(prevProps, prevState) {
	// قيمة ThemeContext السابقة هي prevProps.theme
	// قيمة ThemeContext الجديدة هي this.props.theme
  }

  render() {
    const {theme, children} = this.props;
    return (
      <button className={theme || 'light'}>
        {children}
      </button>
    );
  }
}

export default props => (
  <ThemeContext.Consumer>
    {theme => <Button {...props} theme={theme} />}
  </ThemeContext.Consumer>
);

استهلاك السياق باستخدام المكونات ذات الترتيب الأعلى

تُستهلَك بعض أنواع السياقات عن طريق العديد من المكوِّنات (مثل القالب أو تفضيلات اللغة). قد يكون من البديهي تغليف كل اعتمادية بعنصر <Context.Consumer>. قد تُساعدنا المكوّنات ذات الترتيب الأعلى هنا.

على سبيل المثال قد يستهلك مكوّن الزر سياق القالب كما يلي:

const ThemeContext = React.createContext('light');

function ThemedButton(props) {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme} {...props} />}
    </ThemeContext.Consumer>
  );
}

قد يكون هذا صحيحًا بالنسبة لبعض المكوّنات، ولكن ماذا لو أردنا استخدام سياق القالب في الكثير من الأماكن؟ يمكننا إنشاء مكوّن ذو ترتيب أعلى يُدعى withTheme:

const ThemeContext = React.createContext('light');

// تأخذ هذه الدالة مكون
export function withTheme(Component) {
  // وتعيد مكون آخر
  return function ThemedComponent(props) {
	// وتصير المكون المغلف بقالب السياق
	// لاحظ أننا مررنا أية خاصيات إضافية أيضًا
    return (
      <ThemeContext.Consumer>
        {theme => <Component {...props} theme={theme} />}
      </ThemeContext.Consumer>
    );
  };
}

يستطيع الآن أي مكوّن يعتمد على سياق القالب الاشتراك بسهولة إليه باستخدام الدالة withTheme التي أنشأناها:

function Button({theme, ...rest}) {
  return <button className={theme} {...rest} />;
}

const ThemedButton = withTheme(Button);

تمرير المراجع لمستهلكات السياق

من مشاكل API خاصيّة التصيير هي عدم تمرير المراجع بشكل تلقائي للعناصر المُغلَّفة. وللالتفاف على هذه المشكلة استخدم React.forwardRef.

fancy-button.js

lass FancyButton extends React.Component {
  focus() {
    // ...
  }

  // ...
}

// استخدم السياق لتمرير القالب الحالي إلى FancyButton
// استخدم forwardRef لتمرير المراجع إلى FancyButton أيضًا
export default React.forwardRef((props, ref) => (
  <ThemeContext.Consumer>
    {theme => (
      <FancyButton {...props} theme={theme} ref={ref} />
    )}
  </ThemeContext.Consumer>
));

app.js

import FancyButton from './fancy-button';

const ref = React.createRef();

// سيشير مرجعنا إلى المكون FancyButton
// وليس إلى ThemeContext.Consumer الذي يغلفه
// يعني هذا أنه يمكننا استدعاء توابع FancyButton مثل ref.current.focus()
<FancyButton ref={ref} onClick={handleClick}>
  اضغط هنا
</FancyButton>;

محاذير

بما أنّ السياق يستخدم هوية المرجع لتحديد وقت إعادة التصيير، فهنالك بعض الأشياء التي قد تُطلِق تصييرات غير مقصودة في المستهلكات consumers عندما يُعيد المُزوِّد provider الأب التصيير. على سبيل المثال ستُعيد الشيفرة التالية تصيير جميع المستهلكات في كل مرة يُعيد فيها المُزوّد التصيير، وذلك بسبب إنشاء كائن جديد دومًا للخاصيّة value:

class App extends React.Component {
  render() {
    return (
      <Provider value={{something: 'something'}}>
        <Toolbar />
      </Provider>
    );
  }
}

ولكي تلتف على هذا احتفظ بقيمة value في حالة الأب:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

واجهة برمجة التطبيقات القديمة

ملاحظة: كانت تأتي React سابقًا مع واجهة برمجة تطبيقات (API) تجريبية للسياق. ستبقى هذه الواجهة مدعومة في جميع الإصدارات ‎16.x‎، ولكن يجب على التطبيقات التي تستخدمها أن تنتقل للإصدار الجديد. ستُزال هذه الواجهة القديمة في إصدار React المستقبلي الرئيسي. اقرأ توثيق السياق القديم من هنا.

انظر أيضًا

 مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=React/context&oldid=29811»