الـ React هي مكتبة تم إنشاؤها لبناء واجهات تفاعلية وجذابة للغاية. تستخدم ما يعرف بالمكونات (Components) لبناء الواجهات وهو ما يتيح إمكانية اعادة استخدام نفس (Component) عديد الاماكن وعديد الصفحات بتغيير بياناته فقط بطريقة ديناميكية . الـ (State) هي الجانب المسؤول عن هذا الامر و هي من الاشياء التي كانت تثير جدلا بين المطورين في مجتمع الـ React لصعوبة ادارتها ، وكما كان لم يدم المشكل طويلا وكان الحل ظهور مكتبة Redux التي حلت معضو المشكلات التي كانت تتعلق بـادارة State .
لكن ومع هذا الـ Redux تعتبر سلاحا ثقيلا معدا لدخول حرب ليس لقتال صغير (لا للعنف 
) فهي ليست مكتبة تستخدم حصرا في React فقط ، بل في اي مشروع Javascript و تحتاج لتعلمها دورة لوحدها .
و مع تطور React وتحديدا النسخة 16.3 تم الاعلان عن Context API يمكن القول هو محاولة من المطورين لتسهيل تمرير البيانات بين المكونات وجعل الامر اكثر بساطة واقل تعقيدا
و الان سنذهب للشرح التفصيلي شاهد هذه الشجرة من المكونات اعلم انها مؤلوفة لك
وكما نعلم جميعا يمكننا انشاء state في اي مكون من المكونات التي نريد و تمرير اي بيانات للمكونات الابناء كما فعلنا فالصورة اسفل
كما ترى في الصورة قمنا بانشاء state تحمل بيانات المستخدم وقمنا بتمرير البيانات عبر props للابناء وهكذا تباعا و الان شاهد الصورة في الاسفل
اعلم انك تفكر فيما افكر كيف سنمرر البيانات لذلك المكون باللون الاحمر في الجهة المقابلة لنقم بحل هذه المشكلة
لقد قمنا برفع الـstate لاعلى مكون وقمنا بتمرير البيانات عبر عدة مكونات لا تحتاج اصلا لتلك المعلومات وهذا فقط لتمريرها لمكون يحتاجها
الامر يزداد تعقيدا كلما زاد حجم التطبيق حتى يصل لمرحلة يصعب صيانته وتتبع الاخطاء فيها ولهذا ظهرت عديد الحلول وهي من سبق وتحدثت عنها منها Redux وهيا ليست موضوعنا و Context API لنرى نفس المثال مع Context API
نعم صديقي فالامر بعيدا عن التعقيد بسيط جدا الان الامر يتم بين موفر Provider ومستهلك Consumer الـ Provider تقوم بوضعه في اعلى المكونات التي تريد تمرير البيانات لها و تذهب الى المون وتقوم باستدعاء الـ Consumer ولهذا لا يوجد افضل من الشرح التطبيقي كيفية نقل معلومات المستخدم باستخدام الـ Context
فنفتح الصفحة src/App.js الموجودة في تطبيقنا الجديد 
ونقوم فقط بالابقاء على الكود الاتي :
import React from 'react';
class App extends React.Component {
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
اول خطورة نقوم بانشاء state و البيانات الخاصة بالمستخدم لنقم باضافة الكود التالي
import React from 'react';
class App extends React.Component {
state = {
user: {
name: "Mohamed",
age: 23,
email: "[email protected]"
}
};
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
ونقوم بعدها بانشاء الـ Context الخاص بمعلومات المستخدم
import React from 'react';
// New
const UserContext = React.createContext();
class App extends React.Component {
state = {
user: {
name: "Mohamed",
age: 23,
email: "[email protected]"
}
};
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
و الان نحتاج للمكون الذي ستمر من خلاله البيانات ولهذا سننشئ مكون اسمه Profile
import React from 'react';
const UserContext = React.createContext();
// New
const Profile = () => (
<div>
</div>
);
class App extends React.Component {
state = {
user: {
name: "Mohamed",
age: 23,
email: "[email protected]"
}
};
render() {
return (
<div className="App">
<UserContext.Provider value={this.state.user}>
<Profile />
</UserContext.Provider>
</div>
);
}
}
export default App;
و نقوم الان بانشاء المكون الذي سيستقبل البيانات من state عبر الـ Context
import React from 'react';
const UserContext = React.createContext();
// New
const UserInfo = () => (
<UserContext.Consumer>
{(user) => (`Username: ${user.name} ||
Age : ${user.age} ||
Email: ${user.email} `)}
</UserContext.Consumer>
);
const Profile = () => (
<div>
<UserInfo /> // new
</div>
);
class App extends React.Component {
state = {
user: {
name: "Mohamed",
age: 23,
email: "[email protected]"
}
};
ملخص
سيتم إخفاء هذا النص
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
قمنا اعلا بانشاء المكون UserInfo الذي سيستقبل البيانات من Provider الموجود في اعلى مكون الذي سنقوم بتعيينه الان وقمنا بجعل UserInfo كـ Consumer عبر </UserContext.Consumer> وقمنا ايضا جعله مكون ابن للمكون Profile و الان سنقوم يتغليف المكون Profile ب <UserContext.Provider value={this.state.user}> واضافة البيانات كخاصية value و الان اضف الكود التالي
import React from 'react';
const UserContext = React.createContext();
const UserInfo = () => (
<UserContext.Consumer>
{(user) => (`Username: ${user.name} ||
Age : ${user.age} ||
Email: ${user.email} `)}
</UserContext.Consumer>
);
const Profile = () => (
<div>
<UserInfo />
</div>
);
class App extends React.Component {
state = {
user: {
name: "Mohamed",
age: 23,
email: "[email protected]"
}
};
render() {
return (
<div className="App">
// New
<UserContext.Provider value={this.state.user}>
<Profile />
</UserContext.Provider>
</div>
);
}
}
export default App;
وهكذا قمنا بتمرير البيانات من state الى المكون الابن لـ Profile بدون استعمال الـ Props ولفهم اكثر هذا رابط المثال مباشر يمكنك تجريبه استودعكم الله
اضغط هنا
