\n\nThese docs are old and won’t be updated. Go to react.dev for the new React docs.
\nThese new documentation pages teach modern React and include live examples:
\n\n
Контекст забезпечує спосіб передавати дані через дерево компонентів без необхідності передавати пропси вручну на кожному рівні.
\nУ типовому додатку React дані передаються зверху вниз (від батьківської до дочірньої компоненти) через пропси, але це може бути громіздким для певних типів реквізитів (наприклад, налаштування локалі, тема інтерфейсу користувача), які потрібні багатьом компонентам програми. Контекст надає спосіб обмінюватися значеннями, подібними до цих, між компонентами без необхідності явно передавати властивість через кожен рівень дерева.
\nКонтекст призначений для обміну даними, які можна вважати «глобальними» для дерева компонентів React, таких як поточний автентифікований користувач, тема чи бажана мова. Наприклад, у наведеному нижче коді ми вручну прокидаємо проп theme, щоб стилізувати компонент Button:
class App extends React.Component {\n render() {\n return <Toolbar theme=\"dark\" />;\n }\n}\n\nfunction Toolbar(props) {\n // Компонент Toolbar має приймати додатковий проп \"theme\" // та передавати його в ThemedButton. Це може стати проблемою // якщо кожна окрема кнопка в додатку повинна знати тему // оскільки його потрібно було б пропустити через усі компоненти. 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}Використовуючи контекст, ми можемо уникнути проходження атрибутів через проміжні елементи:
\n// Контекст дозволяє передати значення глибоко в дерево компонентів// без явного проходження через кожен компонент.// Створення контексту для поточної теми (з \"light\" за замовчуванням).const ThemeContext = React.createContext('light');\nclass App extends React.Component {\n render() {\n // Використовуйте компонент Provider для передачі поточної теми в дерево нижче. // Будь-який компонент може прочитати його, незалежно від того, наскільки він глибокий. // У цьому прикладі ми передаємо \"dark\" як поточне значення. return (\n <ThemeContext.Provider value=\"dark\"> <Toolbar />\n </ThemeContext.Provider>\n );\n }\n}\n\n// Компонент посередині не обов’язково// передавати тему явно.function Toolbar() {\n return (\n <div>\n <ThemedButton />\n </div>\n );\n}\n\nclass ThemedButton extends React.Component {\n // Призначте contextType для читання контексту поточної теми. // React знайде найближчий постачальник теми вище та використає його значення. // У цьому прикладі поточна тема \"dark\". static contextType = ThemeContext;\n render() {\n return <Button theme={this.context} />; }\n}Контекст в основному використовується, коли деякі дані повинні бути доступні багатьом компонентам на різних рівнях вкладеності. Застосовуйте його економно, оскільки це ускладнює повторне використання компонентів.
\nЯкщо ви тільки хочете уникнути проходження деяких реквізитів через багато рівнів, композиція компонентів часто є простішим рішенням, ніж контекст.
\nНаприклад, розглянемо компонент Page, який передає властивість 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>Може здатися зайвим передавати властивості user і avatarSize через багато рівнів, якщо зрештою вони дійсно потрібні лише компоненту Avatar. Також дратує те, що щоразу, коли компонент Avatar потребує додаткових реквізитів зверху, ви також повинні додавати їх на всіх проміжних рівнях.
Один із способів вирішити цю проблему без контексту — це передавати сам компонент Avatar щоб проміжним компонентам не потрібно було знати про властивості user або avatarSize:
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.
Ця інверсія керування може зробити ваш код чистішим у багатьох випадках, зменшивши кількість реквізитів, які потрібно пропустити через вашу програму, і надавши більше контролю кореневим компонентам. Однак це не завжди правильний вибір: переміщення більшої складності вище в дереві робить компоненти вищого рівня складнішими та змушує компоненти нижчого рівня бути більш гнучкими, ніж вам хочеться.
\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}Ціого паттерну достатньо для багатьох випадків, коли потрібно відділити дочірній компонент від найближчих батьків. Ви можете піти ще далі за допомогою рендер-пропси якщо дочірня компонента потребує взаємодії з батьківською перед рендерингом.
\nОднак іноді ті самі дані повинні бути доступні багатьом компонентам у дереві та на різних рівнях вкладеності. Контекст дозволяє вам “транслювати” такі дані та зміни до них усім компонентам нижче. Поширені приклади, коли використання контексту може бути простішим, ніж альтернативи, включають керування поточною мовою, темою або кеш-пам’яттю даних.
\nReact.createContext const MyContext = React.createContext(defaultValue);Створює об’єкт Context. Коли React відтворює компонент, який підписується на цей об’єкт Context, він читатиме поточне значення контексту з найближчого відповідного Provider над ним у дереві.
Аргумент defaultValue використовується тільки, коли компонент не має відповідного провайдера над ним у дереві. Це може бути корисним для тестування компонентів ізольовано без їх упаковки. Примітка: передача undefined як значення провайдера не призводить до використання споживаючими компонентами defaultValue.
Context.Provider <MyContext.Provider value={/* some value */}>Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.
\nThe Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree.
All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes. The propagation from Provider to its descendant consumers (including .contextType and useContext) is not subject to the shouldComponentUpdate method, so the consumer is updated even when an ancestor component skips an update.
Changes are determined by comparing the new and old values using the same algorithm as Object.is.
\n\nNote
\nThe way changes are determined can cause some issues when passing objects as
\nvalue: see Caveats.
Class.contextType class MyClass extends React.Component {\n componentDidMount() {\n let value = this.context;\n /* perform a side-effect at mount using the value of MyContext */\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 /* render something based on the value of MyContext */\n }\n}\nMyClass.contextType = MyContext;The contextType property on a class can be assigned a Context object created by React.createContext(). Using this property lets you consume the nearest current value of that Context type using this.context. You can reference this in any of the lifecycle methods including the render function.
\n\nNote:
\nYou can only subscribe to a single context using this API. If you need to read more than one see Consuming Multiple Contexts.
\nIf you are using the experimental public class fields syntax, you can use a static class field to initialize your
\ncontextType.
class MyClass extends React.Component {\n static contextType = MyContext;\n render() {\n let value = this.context;\n /* render something based on the value */\n }\n}Context.Consumer <MyContext.Consumer>\n {value => /* render something based on the context value */}\n</MyContext.Consumer>A React component that subscribes to context changes. Using this component lets you subscribe to a context within a function component.
\nRequires a function as a child. The function receives the current context value and returns a React node. The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the value argument will be equal to the defaultValue that was passed to createContext().
\n\nNote
\nFor more information about the ‘function as a child’ pattern, see render props.
\n
Context.displayName Context object accepts a displayName string property. React DevTools uses this string to determine what to display for the context.
For example, the following component will appear as MyDisplayName in the DevTools:
\nconst MyContext = React.createContext(/* some value */);\nMyContext.displayName = 'MyDisplayName';\n<MyContext.Provider> // \"MyDisplayName.Provider\" in DevTools\n<MyContext.Consumer> // \"MyDisplayName.Consumer\" in DevToolsA more complex example with dynamic values for the 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\nconst root = ReactDOM.createRoot(\n document.getElementById('root')\n);\nroot.render(<App />);It is often necessary to update the context from a component that is nested somewhere deeply in the component tree. In this case you can pass a function down through the context to allow consumers to update the 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\nconst root = ReactDOM.createRoot(\n document.getElementById('root')\n);\nroot.render(<App />);To keep context re-rendering fast, React needs to make each context consumer a separate node in the tree.
\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}If two or more context values are often used together, you might want to consider creating your own render prop component that provides both.
\nBecause context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider’s parent re-renders. For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for value:
class App extends React.Component {\n render() {\n return (\n <MyContext.Provider value={{something: 'something'}}> <Toolbar />\n </MyContext.Provider>\n );\n }\n}To get around this, lift the value into the parent’s 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 <MyContext.Provider value={this.state.value}> <Toolbar />\n </MyContext.Provider>\n );\n }\n}\n","frontmatter":{"title":"Контекст","next":null,"prev":null},"fields":{"path":"content/docs/context.md","slug":"docs/context.html"}}},"pageContext":{"slug":"docs/context.html"}},"staticQueryHashes":[]}Note
\nReact previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in a future major React version. Read the legacy context docs here.
\n