Контекст позволяет передавать данные через дерево компонентов без необходимости передавать пропсы на промежуточных уровнях.
\nВ типичном React-приложении данные передаются сверху вниз (от родителя к дочернему компоненту) с помощью пропсов. Однако, этот способ может быть чересчур громоздким для некоторых типов пропсов (например, выбранный язык, UI-тема), которые необходимо передавать во многие компоненты в приложении. Контекст предоставляет способ делиться такими данными между компонентами без необходимости явно передавать пропсы через каждый уровень дерева.
\nКонтекст разработан для передачи данных, которые можно назвать «глобальными» для всего дерева React-компонентов (например, текущий аутентифицированный пользователь, UI-тема или выбранный язык). В примере ниже мы вручную передаём проп theme, чтобы стилизовать компонент Button:
class App extends React.Component {\n render() {\n return <Toolbar theme=\"dark\" />;\n }\n}\n\nfunction Toolbar(props) {\n // Компонент Toolbar должен передать проп \"theme\" ниже, // фактически не используя его. Учитывая, что у вас в приложении // могут быть десятки компонентов, использующих UI-тему, // вам придётся передавать проп \"theme\" через все компоненты. // И в какой-то момент это станет большой проблемой. 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// Контекст позволяет передавать значение глубоко// в дерево компонентов без явной передачи пропсов// на каждом уровне. Создадим контекст для текущей// UI-темы (со значением \"light\" по умолчанию).const ThemeContext = React.createContext('light');\nclass App extends React.Component {\n render() {\n // Компонент Provider используется для передачи текущей // UI-темы вниз по дереву. Любой компонент может использовать // этот контекст и не важно, как глубоко он находится. // В этом примере мы передаём \"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 найдёт (выше по дереву) ближайший Provider-компонент, // предоставляющий этот контекст, и использует его значение. // В этом примере значение UI-темы будет \"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 знает о том, что компоненты Link и Avatar используют user и avatarSize.
Этот способ может сделать ваш код чище во многих случаях, уменьшая количество пропсов, которые вы должны передавать через ваше приложение, и давая больше контроля корневым компонентам. Однако, это решение не является верным в каждом случае. Перемещая больше сложной логики вверх по дереву, вы перегружаете вышестоящие компоненты.
\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Однако, иногда одни и те же данные должны быть доступны во многих компонентах на разных уровнях дерева и вложенности. Контекст позволяет распространить эти данные и их изменения на все компоненты ниже по дереву. Управление текущим языком, UI темой или кешем данных — это пример тех случаев, когда реализация с помощью контекста будет проще использования альтернативных подходов.
\nReact.createContext const MyContext = React.createContext(defaultValue);Создаёт объект Context. Когда React рендерит компонент, который подписан на этот объект, React получит текущее значение контекста из ближайшего подходящего Provider выше в дереве компонентов.
Аргумент defaultValue используется только в том случае, если для компонента нет подходящего Provider выше в дереве. Это может быть полезно для тестирования компонентов в изоляции без необходимости оборачивать их. Обратите внимание: если передать undefined как значение Provider, компоненты, использующие этот контекст, не будут использовать defaultValue.
Context.Provider <MyContext.Provider value={/* некоторое значение */}>Каждый объект Context используется вместе с Provider компонентом, который позволяет дочерним компонентам, использующим этот контекст, подписаться на его изменения.
Принимает проп value, который будет передан во все компоненты, использующие этот контекст и являющиеся потомками этого компонента Provider. Один Provider может быть связан с несколькими компонентами, потребляющими контекст. Так же компоненты Provider могут быть вложены друг в друга, переопределяя значение контекста глубже в дереве.
Все потребители, которые являются потомками Provider, будут повторно рендериться, как только проп value у Provider изменится. Потребитель (включая .contextType и useContext) перерендерится при изменении контекста, даже если его родитель, не использующий данный контекст, блокирует повторные рендеры с помощью shouldComponentUpdate.
Изменения определяются с помощью сравнения нового и старого значения, используя алгоритм, аналогичный Object.is.
\n\nПримечание
\nСпособ, по которому определяются изменения, может вызвать проблемы при передаче объекта в
\nvalue: смотрите Предостережения.
Class.contextType class MyClass extends React.Component {\n componentDidMount() {\n let value = this.context;\n /* выполнить побочный эффект на этапе монтирования, используя значение 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 /* отрендерить что-то, используя значение MyContext */\n }\n}\nMyClass.contextType = MyContext;В свойство класса contextType может быть назначен объект контекста, созданный с помощью React.createContext(). Это позволяет вам использовать ближайшее и актуальное значение указанного контекста при помощи this.context. В этом случае вы получаете доступ к контексту, как во всех методах жизненного цикла, так и в рендер методе.
\n\nПримечание
\nВы можете подписаться только на один контекст, используя этот API. В случае, если вам необходимо использовать больше одного, смотрите Использование нескольких контекстов.
\nЕсли вы используете экспериментальный синтаксис публичных полей класса, вы можете использовать static поле класса, чтобы инициализировать ваш
\ncontextType.
class MyClass extends React.Component {\n static contextType = MyContext;\n render() {\n let value = this.context;\n /* отрендерить что-то, используя значение MyContext */\n }\n}Context.Consumer <MyContext.Consumer>\n {value => /* отрендерить что-то, используя значение контекста */}\n</MyContext.Consumer>Consumer — это React-компонент, который подписывается на изменения контекста. В свою очередь, это позволяет вам подписаться на контекст в функциональном компоненте.
Consumer принимает функцию в качестве дочернего компонента. Эта функция принимает текущее значение контекста и возвращает React-компонент. Передаваемый аргумент value будет равен ближайшему (вверх по дереву) значению этого контекста, а именно пропу value компонента Provider. Если такого компонента Provider не существует, аргумент value будет равен значению defaultValue, которое было передано в createContext().
\n\nПримечание
\nПодробнее про паттерн «функция как дочерний компонент» можно узнать на странице Рендер-пропсы.
\n
Context.displayName Объекту Context можно задать строковое свойство displayName. React DevTools использует это свойство при отображении контекста.
К примеру, следующий компонент будет отображаться под именем MyDisplayName в DevTools:
\nconst MyContext = React.createContext(/* некоторое значение */);\nMyContext.displayName = 'MyDisplayName';\n<MyContext.Provider> // \"MyDisplayName.Provider\" в DevTools\n<MyContext.Consumer> // \"MyDisplayName.Consumer\" в DevToolsБолее сложный пример динамических значений для UI темы:
\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 // значение по умолчанию);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// Промежуточный компонент, который использует 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 // ThemedButton внутри ThemeProvider использует // значение светлой UI-темы из состояния, в то время как // ThemedButton, который находится вне ThemeProvider, // использует тёмную UI-тему из значения по умолчанию 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);Довольно часто необходимо изменить контекст из компонента, который находится где-то глубоко в дереве компонентов. В этом случае вы можете добавить в контекст функцию, которая позволит потребителям изменить значение этого контекста:
\ntheme-context.js\n
// Убедитесь, что форма значения по умолчанию,\n// передаваемого в createContext, совпадает с формой объекта,\n// которую ожидают потребители контекста.\nexport const ThemeContext = React.createContext({\n theme: themes.dark, toggleTheme: () => {},});theme-toggler-button.js\n
import {ThemeContext} from './theme-context';\n\nfunction ThemeTogglerButton() {\n // ThemeTogglerButton получает из контекста // не только значение UI-темы, но и функцию toggleTheme. 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 // Состояние хранит функцию для обновления контекста, // которая будет также передана в Provider-компонент. this.state = {\n theme: themes.light,\n toggleTheme: this.toggleTheme, };\n }\n\n render() {\n // Всё состояние передаётся в качестве значения контекста 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);Чтобы последующие рендеры (связанные с контекстом) были быстрыми, React делает каждого потребителя контекста отдельным компонентом в дереве.
\n// Контекст UI-темы, со светлым значением по умолчанию\nconst ThemeContext = React.createContext('light');\n\n// Контекст активного пользователя\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, который предоставляет начальные значения контекстов\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// Компонент, который может использовать несколько контекстов\nfunction Content() {\n return (\n <ThemeContext.Consumer> {theme => ( <UserContext.Consumer> {user => ( <ProfilePage user={user} theme={theme} /> )} </UserContext.Consumer> )} </ThemeContext.Consumer> );\n}Если два или более значений контекста часто используются вместе, возможно, вам стоит рассмотреть создание отдельного компонента, который будет передавать оба значения дочерним компонентам с помощью паттерна «рендер-пропс».
\nКонтекст использует сравнение по ссылкам, чтобы определить, когда запускать последующий рендер. Из-за этого существуют некоторые подводные камни, например, случайные повторные рендеры потребителей, при перерендере родителя 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}Один из вариантов решения этой проблемы — хранение этого объекта в состоянии родительского компонента:
\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":"Контекст","next":null,"prev":null},"fields":{"path":"content/docs/context.md","slug":"docs/context.html"}}},"pageContext":{"slug":"docs/context.html"}},"staticQueryHashes":[]}Примечание
\nВ прошлом React имел только экспериментальный API контекста. Старый API будет поддерживаться во всех 16.x релизах, но использующие его приложения должны перейти на новую версию. Устаревший API будет удалён в будущем крупном релизе React. Вы можете прочитать документацию устаревшего контекста здесь.
\n