В этой статье предполагается, что у вас есть базовые знания в области управления состоянием и бурения винтов.
Допустим, у вас есть приложение с несколькими компонентами, которым требуется доступ к одним и тем же данным, однако данные управляются родительским компонентом, расположенным на несколько уровней выше в дереве компонентов. Вместо того, чтобы «просверливать» данные через несколько уровней компонентов, вы можете использовать контекстный 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, мы можем создать более эффективный и гибкий способ обмена данными между компонентами без необходимости передавать данные через несколько уровней компонентов в качестве свойств. Это может сделать наш код более модульным и простым в обслуживании, особенно по мере роста сложности нашего приложения.