Как работать с Context API в React и React Hooks
Введение
В этой статье вы узнаете, как реализовать Context API и React Hook useContext()
в вашем проекте React. Context API — это структура React, которая позволяет вам обмениваться конкретными данными со всех уровней вашего приложения и помогает в решении проблем.
React Hooks — это функции, которые служат модульной заменой методов состояния и жизненного цикла, написанных в функциональных компонентах. Метод useContext()
представляет собой альтернативу детализации по дереву компонентов и создает внутреннее глобальное состояние для передачи данных.
Предпосылки
- Требуется понимание React. Чтобы узнать больше о React, ознакомьтесь с серией статей How To Code in React.
- Общие знания React Hooks рекомендуются, но не обязательны. Чтобы узнать больше о React Hooks, ознакомьтесь с учебным пособием How To Apply React Hooks in Your React Project.
Изучение контекстного API
Чтобы изучить Context API, давайте рассмотрим, как получить доступ к контексту в приложении React. React предлагает метод createContext()
для помощи в передаче данных в качестве реквизита.
В файле ColorContext.js
задайте объект colors
и передайте свойство в качестве аргумента методу createContext()
:
const colors = {
blue: "#03619c",
yellow: "#8c8f03",
red: "#9c0312"
};
export const ColorContext = React.createContext(colors.blue);
Это позволит методу .createContext()
подписаться на свойство colors.blue
в качестве реквизита от одного компонента к другому.
Затем вы можете применить компонент .Provider
к своему контексту в другом файле. Компонент .Provider
позволяет использовать данные в вашем контексте во всем приложении. В файле index.js
импортируйте функцию ColorContext
и добавьте к компоненту .Provider
в операторе return:
[label index.js]
import React from 'react';
import { ColorContext } from "./ColorContext";
function App() {
return (
<ColorContext.Provider value={colors}>
<Home />
</ColorContext.Provider>
);
}
Это оборачивает контекст вашей функции ColorContext
, чтобы раскрасить ваше приложение. Пока ваша функция ColorContext
существует в дереве компонентов, компонент .Provider
будет способствовать ее функциональности во всем. Здесь компонент Home
будет поглощать данные из вашей функции ColorContext
. Дочерние компоненты Home
также будут получать данные из ColorContext
.
Вы также можете применить компонент .Consumer
, чтобы подписаться на изменения контекста. Это доступно как в классе, так и в функциональных компонентах. Компонент .Consumer
доступен только внутри оператора return. В файле index.js
задайте компонент .Consumer
для функции ColorContext
в инструкции return:
[index.js]
return (
<ColorContext.Consumer>
{colors => <div style={colors.blue}>Hello World</div>}
</ColorContext.Consumer>
);
Всякий раз, когда контекст изменяется, компонент .Consumer
будет обновлять и корректировать ваше приложение на основе изменений.
Вы можете присвоить компоненту тип контекста: MyComponent.contextType=ColorContext;
затем вы можете получить доступ к контексту в вашем компоненте: let context=this.context;
и это позволяет вам получить доступ к вашему контексту за пределами JSX. Или вместо этого вы можете указать static contextType=ColorContext;
. Это очень хорошо работает для компонентов на основе классов, поскольку упрощает перенос контекста в ваш компонент. Но в функциональном компоненте это не сработает.
Вы также можете объявить контекст с помощью свойства .contextType
в компоненте класса и присвоить его значение функции ColorContext
. Вы также можете назначить функцию ColorContext
контекстному API static contextType
. Эти методы применяются только внутри компонентов класса. Давайте рассмотрим, как вызывать контекст внутри функционального компонента.
Обработка метода useContext()
Метод useContext()
принимает контекст внутри функционального компонента и работает с компонентами .Provider
и .Consumer
за один вызов. В файле index.js
импортируйте метод useContext()
и функцию ColorContext
и объявите функциональный компонент:
import React, { useContext } from "react";
import ColorContext from './ColorContext';
const MyComponent = () => {
const colors = useContext(ColorContext);
return <div style={{ backgroundColor: colors.blue }}>Hello World</div>;
};
Функциональный компонент MyComponent
устанавливает значение в вашем ColorContext
в качестве аргумента метода useContext()
. Ваш оператор return применяет цвет фона в вашем приложении. Когда срабатывает изменение, метод useContext()
подпишется на обновление с последним значением контекста. По сравнению с Context API метод useContext()
позволяет обмениваться данными и передавать их по всему приложению с помощью меньшего количества строк кода.
Заключение
Context API в React предоставляет вам встроенные функции и компоненты, чтобы избежать детализации вашего дерева компонентов. React Hook useContext()
применяет ту же функциональность в обтекаемом, функциональном теле компонента за один вызов.
Посетите страницу темы React, чтобы узнать о дополнительных проектах и ресурсах.