В этой статье предполагается, что у вас есть базовые знания в области управления состоянием и бурения винтов.
Допустим, у вас есть приложение с несколькими компонентами, которым требуется доступ к одним и тем же данным, однако данные управляются родительским компонентом, расположенным на несколько уровней выше в дереве компонентов. Вместо того, чтобы «просверливать» данные через несколько уровней компонентов, вы можете использовать контекстный API React для предоставления данных любому компоненту в дереве, который в них нуждается.
Вот пример того, как вы можете использовать контекст для управления и обмена данными между компонентами в приложении React:
Файл MyContext.js
//MyContext.js
import React, { createContext, useState } from 'react';
// Create a new context object
export const MyContext = createContext();
// Define a component that provides the context
export const MyContextProvider = ({ children }) => {
// Define a state variable for the user data object
const [userData, setUserData] = useState({ name: 'John Doe', age: 30 });
// Define a function for updating the user data object
const updateUser = (name, age) => {
setUserData({ name, age });
};
// Define the context value object with the user data object and update function
const contextValue = {
userData,
updateUser,
};
// Return the context provider component with the context value and any child components
return (
<MyContext.Provider value={contextValue}>{children}</MyContext.Provider>
);
};
Этот код определяет объект контекста и компонент, предоставляющий контекст. Компонент MyContextProvider определяет переменную состояния для объекта пользовательских данных и функцию для обновления объекта пользовательских данных. Он также определяет объект значения контекста с объектом пользовательских данных и функцией обновления и возвращает компонент поставщика контекста со значением контекста и любыми дочерними компонентами.
Файл App.js
// Import the context provider component from MyContext.js
import { MyContextProvider } from './MyContext';
// Import the UserCard and UserData components
import UserCard from './UserCard';
import UserData from './UserData';
// Define the App component
function App() {
// Return the MyContextProvider component with child components
return (
<MyContextProvider>
<div className="App">
<h1>My App</h1>
{/* Render the UserCard component */}
<UserCard />
{/* Render the UserData component */}
<UserData />
</div>
</MyContextProvider>
);
}
// Export the App component
export default App;
этот код импортирует компоненты MyContextProvider, UserCard и UserData и определяет компонент приложения. Компонент App отображает дочерние компоненты UserCard и UserData в div, обернутом компонентом MyContextProvider. Компонент MyContextProvider предоставляет контекст для дочерних компонентов для доступа к объекту userData и функции updateUser.
Пользовательская карта.js
import React, { useContext, useState } from 'react';
import { MyContext } from './MyContext';
function UserCard() {
// Use the useContext hook to consume the MyContext context
const { userData, updateUser } = useContext(MyContext);
// Define state variables for the name and age input fields
const [nameInput, setNameInput] = useState('');
const [ageInput, setAgeInput] = useState('');
// Define event handlers for the name and age input fields
const handleNameChange = (event) => {
setNameInput(event.target.value);
};
const handleAgeChange = (event) => {
setAgeInput(event.target.value);
};
// Define a submit handler for the form
const handleSubmit = (event) => {
// Prevent the default form submission behavior
event.preventDefault();
// Call the updateUser function with the new name and age values
updateUser(nameInput, ageInput);
// Clear the input fields
setNameInput('');
setAgeInput('');
};
// Render the component with the userData and handleSubmit props
return (
<div>
<h2>User Card</h2>
<p>Name: {userData.name}</p>
<p>Age: {userData.age}</p>
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Name" value={nameInput} onChange={handleNameChange} />
<input type="text" placeholder="Age" value={ageInput} onChange={handleAgeChange} />
<button type="submit">Update</button>
</form>
</div>
);
}
// Export the UserCard component
export default UserCard;
Этот код определяет компонент UserCard, который использует контекст MyContext с помощью ловушки useContext. Компонент определяет переменные состояния для полей ввода имени и возраста, а также обработчики событий для обработки изменений в этих полях. Он также определяет обработчик отправки для формы, который вызывает функцию updateUser с новыми значениями имени и возраста и очищает поля ввода. Наконец, компонент отображает объект userDate и поля ввода и передает функцию handleSubmit в качестве свойства.
Наконец, давайте создадим файл UserData, который использует данные только из MyContext..
import React, { useContext } from 'react';
import { MyContext } from './MyContext';
function UserData() {
// Use the useContext hook to consume the MyContext context
const { userData } = useContext(MyContext);
// Render the component with the userData prop
return (
<div>
<h2>User Data</h2>
<p>Name: {userData.name}</p>
<p>Age: {userData.age}</p>
</div>
);
}
// Export the UserData component
export default UserData;
Этот код определяет компонент UserData, который использует контекст MyContext с помощью хука useContext. Компонент обращается к объекту userData из контекста и отображает свойства имени и возраста. Наконец, компонент возвращает визуализированные данные и экспортирует компонент userData.
Подводя итоги
React Context API используется для обмена данными между компонентами, которые не связаны напрямую в дереве компонентов. Объект контекста MyContext создается с помощью функции createContext и используется для определения данных, которые мы хотим разделить между компонентами — в данном случае объект userData и функция updateUser.
Компонент myContextProvide отвечает за предоставление доступа к контексту MyContext. Он инициализирует состояние userData и предоставляет объект userData и функцию updateUser своим дочерним компонентам. Это позволяет дочерним компонентам — UserCard и UserData — получать доступ к объекту userData и управлять им без необходимости передавать данные через несколько уровней компонентов в качестве реквизита.
Компонент UserCard использует контекст MyContext с помощью хука useContext и предоставляет форму для обновления объекта userData. Компонент UserData также использует контекст MyContext с помощью хука useContext и отображает объект userData.
Используя React Context API, мы можем создать более эффективный и гибкий способ обмена данными между компонентами без необходимости передавать данные через несколько уровней компонентов в качестве свойств. Это может сделать наш код более модульным и простым в обслуживании, особенно по мере роста сложности нашего приложения.
