Context راهی را برای انتقال داده در درخت کامپوننت بدون نیاز به انتقال دستیه props به تمام سطح های پایینی فراهم می‌کند.
\nدر یک اپلیکیشن معمولی ری‌اکت, داده از طریق props از بالا به پایین (والدین به فرزند) منتقل می‌شود, اما این کار برای انواع خاصی از props ها (برای مثال: locale preference, تم رابط کاربری) که مورد نیاز بسیاری از کامپوننت ها در یک اپلیکیشن است می‌تواند سنگین باشد. Context راهی را برای به اشتراک گذاری مقادیری مانند این بین کامپوننت‌ها بدون نیاز به انتقال prop صریحا‍ً از هر سطح درخت فراهم می‌کند.
\nContext برای به اشتراک گذاری داده ای طراحی شده است که می‌تواند برای درختی از ری‌اکت کامپوننت ها عمومی تلقی شود٬ مانند کاربر تایید شده‌ی فعلی٬ زمینه٬ یا زبان ترجیحی. برای مثال٬ ما در کد زیر یک prop به نام “theme” را به صورت دستی برای style دادن به کامپوننت Button انتقال می‌دهیم:
\nclass App extends React.Component {\n render() {\n return <Toolbar theme=\"dark\" />;\n }\n}\n\nfunction Toolbar(props) {\n // The Toolbar component must take an extra \"theme\" prop // and pass it to the ThemedButton. This can become painful // if every single button in the app needs to know the theme // because it would have to be passed through all components. return (\n <div>\n <ThemedButton theme={props.theme} /> </div>\n );\n}\n\nclass ThemedButton extends React.Component {\n render() {\n return <Button theme={this.props.theme} />;\n }\n}با استفاده از context, می‌توانیم از انتقال props از بین المنت‌های میانی دوری کنیم:
\n// Context lets us pass a value deep into the component tree// without explicitly threading it through every component.// Create a context for the current theme (with \"light\" as the default).const ThemeContext = React.createContext('light');\nclass App extends React.Component {\n render() {\n // Use a Provider to pass the current theme to the tree below. // Any component can read it, no matter how deep it is. // In this example, we're passing \"dark\" as the current value. return (\n <ThemeContext.Provider value=\"dark\"> <Toolbar />\n </ThemeContext.Provider>\n );\n }\n}\n\n// A component in the middle doesn't have to// pass the theme down explicitly anymore.function Toolbar() {\n return (\n <div>\n <ThemedButton />\n </div>\n );\n}\n\nclass ThemedButton extends React.Component {\n // Assign a contextType to read the current theme context. // React will find the closest theme Provider above and use its value. // In this example, the current theme is \"dark\". static contextType = ThemeContext;\n render() {\n return <Button theme={this.context} />; }\n}در درجه اول Context زمانی استفاده می‌شود که برخی از داده‌ها باید توسط بسیاری از کامپوننت‌ها در سطح‌های مختلف تودرتویی در دسترس قرار بگیرند. از آنجایی که استفاده مجدد کامپوننت را سخت‌تر می‌کند٬ از آن کم استفاده کنید.
\nاگر فقط می‌خواهید که از انتقال برخی از داده‌ها بین بسیاری از سطح‌ها اجتناب کنید, اغلب composition کامپوننت راه‌حلی ساده‌تر از context می‌باشد.
\nبرای مثال٬ یک کامپوننت به نام Page را در نظر بگیرید که یک prop به نام user و avatarSize را چندین سطح به پایین منتقل می‌کند به طوری که کامپوننت‌های عمیقا تودرتو شده‌ی Link و Avatar بتوانند آن را بخوانند:
<Page user={user} avatarSize={avatarSize} />\n// ... که رندر می‌کند ...\n<PageLayout user={user} avatarSize={avatarSize} />\n// ... که رندر می‌کند ...\n<NavigationBar user={user} avatarSize={avatarSize} />\n// ... که رندر می‌کند ...\n<Link href={user.permalink}>\n <Avatar user={user} size={avatarSize} />\n</Link>انتقال propهای user و avatarSize به پایین از بین بسیاری از سطح‌ها ممکن است زائد به نظر بیاید اگر در نهایت فقط کامپوننت Avatar است که به آن نیاز دارد. این نیز آزاردهنده است که هر زمانی که کامپوننت Avatar به تعداد بیشتری props از بالا احتیاج داشته باشد٬ شما باید آنها را در تمامی سطح‌های میانی هم اضافه کنید.
یک راه حل برای این مسئله بدون context این است که خود کامپوننت Avatar را به پایین انتقال دهیم به طوری که کامپوننت‌های میانی نیازی به دانستن درمورد propهای user یا avatar نداشته باشند:
function Page(props) {\n const user = props.user;\n const userLink = (\n <Link href={user.permalink}>\n <Avatar user={user} size={props.avatarSize} />\n </Link>\n );\n return <PageLayout userLink={userLink} />;\n}\n\n// اکنون, داریم:\n<Page user={user} avatarSize={avatarSize} />\n// ... که رندر می‌کند ...\n<PageLayout userLink={...} />\n// ... که رندر می‌کند ...\n<NavigationBar userLink={...} />\n// ... که رندر می‌کند ...\n{props.userLink}با این تغییر٬ فقط بالاترین کامپوننت یعنی Page باید در مورد استفاده user و avatarsize توسط کامپوننت‌های Link و Avatar بداند.
این وارونگی کنترل در بسیاری از موارد می‌تواند کد شما را از طریق کاهش تعداد propهایی که باید در اپلیکیشن خود انتقال دهید تمیزتر کند و کنترل بیشتری به کامپوننت‌های پایه می‌دهد.\nبا این حال٬ این کار در هر موردی تصمیم درست نیست: انتقال پیچیدگی بیشتر به بالا در درخت باعث پیچیده‌تر شدن کامپوننت‌های سطح-بالا می‌شود و ممکن است کامپوننت‌های سطح-پایین را مجبور به انعطاف‌پذیری بیشتر از آنچه که می‌خواهید کند.
\nشما برای یک کامپوننت محدود به یک فرزند نیستید. شما می‌توانید چندین فرزند٬ یا حتی چندین “slots” جداگانه برای فرزندان٬ همانطور که در اینجا مستند شده است\nانتقال دهید:
\nfunction Page(props) {\n const user = props.user;\n const content = <Feed user={user} />;\n const topBar = (\n <NavigationBar>\n <Link href={user.permalink}>\n <Avatar user={user} size={props.avatarSize} />\n </Link>\n </NavigationBar>\n );\n return (\n <PageLayout\n topBar={topBar}\n content={content}\n />\n );\n}این الگو در بسیاری از مواردی که باید یک فرزند را از والدین نزدیک آن جدا کرد کافی است. در صورتی که فرزند قبل از رندر شدن نیاز به برقراری ارتباط با والدین را داشته باشد٬ شما می‌توانید این قضیه را با render-props ادامه دهید.
\nبا این حال٬ گاهی‌اوقات یک داده‌ی یکسان باید توسط کامپوننت‌های زیادی در درخت٬ و سطح‌های تودرتوی مختلفی در دسترس قرار گیرد. Context اجازه پخش کردن همچین داده‌ای٬ و اجازه تغییر آن به تمام کامپوننت‌های زیرین را به شما می‌دهد. مثال‌های رایجی که استفاده از context در آنها ممکن است آسان‌تر از راه‌های جایگزین آن باشد شامل مدیریت locale فعلی٬ زمینه, یا داده حافظه نهان می‌باشد.
\nReact.createContext const MyContext = React.createContext(defaultValue);کد بالا یک شیٔ context ایجاد می‌کند. وقتی ری‌اکت یک کامپوننتی را رندر می‌کند که به این شیء context ارجاع می‌کند (subscribes)٬ مقدار context حاضر را از نزدیکترین Provider مرتبط بالایی در درخت خواهد خواند.
آرگومان defaultValue فقط زمانی استفاده می‌شود که یک کامپوننت در بالاتر از خود در درخت یک Provider مطابق نداشته باشد. این مورد می‌تواند برای تست کردن کامپوننت‌ها در انزوا بدون wrap کردن آنها مفید باشد. توجه داشته باشید: انتقال undefined به عنوان مقدار Provider باعث نمی‌شود که کامپوننت‌هایی که از آن استفاده می‌کنند از defaultValue استفاده کنند.
Context.Provider <MyContext.Provider value={/* یک مقداری */}>هر شئ context ای با یک کامپوننت ری‌اکتی Provider همراه می‌شود که به کامپوننت‌های مصرف‌کننده آن این اجازه را می‌دهد که تغییرات context را به اشتراک بگذارند.
\nکامپوننت Provider یک prop به نام value را می‌پذیرد که به کامپوننت‌های مصرف‌کننده آن که نوادگان این Provider می‌باشند٬ انتقال یابد. Provider می‌تواند به چندین مصرف‌کننده متصل شود. Providerها می‌توانند به شکلی تودرتو شوند تا valueهایی را که در عمق درخت وجود دارند باطل کنند..
هرزمانی که prop value مربوط به Provider تغییر کند تمام مصرف‌کننده‌هایی که نوادگان یک Provider هستند دوباره رندر می‌شوند. Propagation از Provider تا نوادگان مصرف‌کننده آن (شامل .contextType و useContext) مشمول متد shouldComponentUpdate نیستند٬ بنابراین حتی زمانی که جد کامپوننت یک به روزرسانی را رد می‌کند٬ مصرف‌کننده آن به روزرسانی می‌شود.
تغییرات بوسیله مقایسه value های جدید و قدیم با استفاده از همان الگوریتم Object.is مشخص می‌شوند.
\n\nیادداشت
\nنحوه تعیین تغییرات هنگام انتقال اشیاء به عنوان
\nvalueمی‌تواند مشکل‌ساز شود: هشدارها را ببینید.
Class.contextType class MyClass extends React.Component {\n componentDidMount() {\n let value = this.context;\n /* با استفاده از مقدار MyContext یک اثرجانبی هنگام mount ایجاد کنید */\n }\n componentDidUpdate() {\n let value = this.context;\n /* ... */\n }\n componentWillUnmount() {\n let value = this.context;\n /* ... */\n }\n render() {\n let value = this.context;\n /* چیزی را بر اساس مقدار MyContext رندر کنید */\n }\n}\nMyClass.contextType = MyContext;یک شیئ Context که با React.createContext() ایجاد شده است می‌تواند به ویژگی contextType در یک کلاس اختصاص یابد. این کار به شما اجازه می‌دهد که از نزدیکترین مقدار فعلی contextType با استفاده از this.context استفاده کنید. شما می‌توانید از این قضیه در تمام متدهای چرخه‌حیات از جمله تابع رندر استفاده کنید.
\n\nیادداشت:
\nشما با استفاده از این API فقط می توانید در یک context واحد مشترک شوید. در صورت نیاز به خواندن بیش از یک مورد ، به مصرف چندین Context مراجعه کنید .
\nاگر از syntax تجربی فیلدهای کلاس عمومی استفاده می کنید٬ می توانید از یک فیلد کلاس استاتیک برای مقداردهی اولیه
\ncontextTypeخود استفاده کنید.
class MyClass extends React.Component {\n static contextType = MyContext;\n render() {\n let value = this.context;\n /* چیزی را بر اساس مقدار آن رندر کنید */\n }\n}Context.Consumer <MyContext.Consumer>\n {value => /* چیزی را بر اساس مقدار context رندر کنید */}\n</MyContext.Consumer>یک کامپوننت ری‌اکت که تغییرات context را به اشتراک می‌گذارد. این کار به شما اجازه می‌دهد که یک context را داخل کامپوننت تابع به اشتراک بگذارید.
\nنیاز به یک کامپوننت به عنوان فرزند دارد. این تابع مقدار context فعلی را دریافت می‌کند و یک نود ری‌اکت برمی‌گرداند. آرگومان value ای که به تابع داده شده است با prop value نزدیکترین Provider بالاتر از آن در درخت برای این context برابر خواهد بود. اگر در بالاتر هیچ Provider ای برای این context وجود نداشت٬ آرگومان value با defaultValue ای که به createContext() داده شد٬ برابر خواهد بود.
\n\nیادداشت
\nبرای اطلاعات بیشتر در مورد الگوی ‘تابع به عنوان فرزند’٬ render props را ببینید.
\n
Context.displayName شیئ context یک ویژگی از نوع رشته با نام displayName می‌پذیرد. DevTools ری‌اکت از این رشته استفاده می‌کند تا مشخص کند که چه چیزی را برای عنوان context نمایش دهد.
به عنوان مثال٬ کامپوننت زیر در DevTools به صورت MyDisplayName ظاهر می‌شود:
\nconst MyContext = React.createContext(/* یک مقداری */);\nMyContext.displayName = 'MyDisplayName';\n<MyContext.Provider> // \"MyDisplayName.Provider\" in DevTools\n<MyContext.Consumer> // \"MyDisplayName.Consumer\" in DevToolsیک مثال پیچیده‌تر با مقادیر پویا برای theme:
\ntheme-context.js\n
export const themes = {\n light: {\n foreground: '#000000',\n background: '#eeeeee',\n },\n dark: {\n foreground: '#ffffff',\n background: '#222222',\n },\n};\n\nexport const ThemeContext = React.createContext( themes.dark // default value);themed-button.js\n
import {ThemeContext} from './theme-context';\n\nclass ThemedButton extends React.Component {\n render() {\n let props = this.props;\n let theme = this.context; return (\n <button\n {...props}\n style={{backgroundColor: theme.background}}\n />\n );\n }\n}\nThemedButton.contextType = ThemeContext;\nexport default ThemedButton;app.js\n
import {ThemeContext, themes} from './theme-context';\nimport ThemedButton from './themed-button';\n\n// An intermediate component that uses the ThemedButton\nfunction Toolbar(props) {\n return (\n <ThemedButton onClick={props.changeTheme}>\n Change Theme\n </ThemedButton>\n );\n}\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n theme: themes.light,\n };\n\n this.toggleTheme = () => {\n this.setState(state => ({\n theme:\n state.theme === themes.dark\n ? themes.light\n : themes.dark,\n }));\n };\n }\n\n render() {\n // The ThemedButton button inside the ThemeProvider // uses the theme from state while the one outside uses // the default dark theme return (\n <Page>\n <ThemeContext.Provider value={this.state.theme}> <Toolbar changeTheme={this.toggleTheme} /> </ThemeContext.Provider> <Section>\n <ThemedButton /> </Section>\n </Page>\n );\n }\n}\n\nReactDOM.render(<App />, document.root);اغلب به روزرسانی context از کامپوننت‌ای که در جایی عمیق در درخت واقع شده لازم است. در این مورد شما می‌توانید یک تابع را از طریق context به پایین منتقل کنید تا به مصرف‌کنندگان آن اجازه به روزرسانی context را بدهید:
\ntheme-context.js\n
// Make sure the shape of the default value passed to\n// createContext matches the shape that the consumers expect!\nexport const ThemeContext = React.createContext({\n theme: themes.dark, toggleTheme: () => {},});theme-toggler-button.js\n
import {ThemeContext} from './theme-context';\n\nfunction ThemeTogglerButton() {\n // The Theme Toggler Button receives not only the theme // but also a toggleTheme function from the context return (\n <ThemeContext.Consumer>\n {({theme, toggleTheme}) => ( <button\n onClick={toggleTheme}\n style={{backgroundColor: theme.background}}>\n Toggle Theme\n </button>\n )}\n </ThemeContext.Consumer>\n );\n}\n\nexport default ThemeTogglerButton;app.js\n
import {ThemeContext, themes} from './theme-context';\nimport ThemeTogglerButton from './theme-toggler-button';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n\n this.toggleTheme = () => {\n this.setState(state => ({\n theme:\n state.theme === themes.dark\n ? themes.light\n : themes.dark,\n }));\n };\n\n // State also contains the updater function so it will // be passed down into the context provider this.state = {\n theme: themes.light,\n toggleTheme: this.toggleTheme, };\n }\n\n render() {\n // The entire state is passed to the provider return (\n <ThemeContext.Provider value={this.state}> <Content />\n </ThemeContext.Provider>\n );\n }\n}\n\nfunction Content() {\n return (\n <div>\n <ThemeTogglerButton />\n </div>\n );\n}\n\nReactDOM.render(<App />, document.root);برای اینکه رندرشدن های مجدد را سریع نگه داریم٬ ری‌اکت باید هر مصرف‌کننده context را به یک نود جداگانه در درخت تبدیل کند.
\n// Theme context, default to light theme\nconst ThemeContext = React.createContext('light');\n\n// Signed-in user context\nconst UserContext = React.createContext({\n name: 'Guest',\n});\n\nclass App extends React.Component {\n render() {\n const {signedInUser, theme} = this.props;\n\n // App component that provides initial context values\n return (\n <ThemeContext.Provider value={theme}> <UserContext.Provider value={signedInUser}> <Layout />\n </UserContext.Provider> </ThemeContext.Provider> );\n }\n}\n\nfunction Layout() {\n return (\n <div>\n <Sidebar />\n <Content />\n </div>\n );\n}\n\n// A component may consume multiple contexts\nfunction Content() {\n return (\n <ThemeContext.Consumer> {theme => ( <UserContext.Consumer> {user => ( <ProfilePage user={user} theme={theme} /> )} </UserContext.Consumer> )} </ThemeContext.Consumer> );\n}اگر دو یا چند مقدار از context زیاد با هم استفاده شدند، بهتر است در نظر داشته باشید که کامپوننت render propای خودتان ایجاد کنید که شامل هر دوی آنها شود.
\nبه دلیل اینکه context از هویت مرجع برای مشخص کردن اینکه چه زمانی باید رندر دوباره صورت بگیرد استفاده می‌کند٬ به دلیل برخی خطاها ممکن است هنگامی که والدین Provider دوباره رندر می‌شوند٬ در مصرف‌کنندگان آن موجب رندر ناخواسته شود. برای مثال٬ هر زمانی که Provider دوباره به خاطر ایجاد یک شیئ جدید که همیشه برای value ایجاد می‌شود٬ رندر می‌شود کد زیر تمام مصرف‌کنندگان را دوباره رندر می‌کند:
class App extends React.Component {\n render() {\n return (\n <MyContext.Provider value={{something: 'something'}}> <Toolbar />\n </MyContext.Provider>\n );\n }\n}برای پی بردن به این موضوع٬ مقدار را به state والدین ببرید:
\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: {something: 'something'}, };\n }\n\n render() {\n return (\n <Provider value={this.state.value}> <Toolbar />\n </Provider>\n );\n }\n}\n","frontmatter":{"title":"Context","next":null,"prev":null},"fields":{"path":"content/docs/context.md","slug":"docs/context.html"}}},"pageContext":{"slug":"docs/context.html"}},"staticQueryHashes":[]}یادداشت
\nری‌اکت قبلا با یک API context آزمایشی منتشر شد. API قدیمی در تمام نسخه های ۱۶.x پشتیبانی خواهد شد٬ اما اپلیکیشن‌هایی که از آن استفاده می‌کنند باید به نسخه جدید ارتقاء دهند. API موروثی در نسخه اصلی React در آینده حذف می شود. اسناد context موروثی را اینجا بخوانید.
\n