Что такое API контекста React?
React Context API — это мощная функция, которая позволяет вам управлять глобальным состоянием вашего приложения без необходимости детального изучения свойств. Он обеспечивает возможность совместного использования данных по всему дереву компонентов, что делает его особенно полезным для более крупных приложений, в которых реквизиты передаются через несколько уровней компонентов.
«Детализация реквизитов» в React относится к процессу передачи реквизитов через несколько слоев компонентов, чтобы добраться до глубоко вложенного компонента, которому необходим доступ к этим данным.
Хотя этот подход тоже работает, но по мере роста вашего приложения он становится менее эффективным. Именно здесь в Picture появляется React Context API. Это позволяет вам обойти необходимость в детализации реквизита, предоставляя возможность обмениваться данными между компонентами без необходимости передавать их вручную на каждом уровне.
Если ваше приложение предполагает сложное управление состоянием или совместное использование данных между многими компонентами, использование Context API или других решений для управления состоянием, таких как Redux, может значительно упростить ваш код и улучшить удобство обслуживания.
Что такое государственное управление?
В любом приложении крайне важно обеспечить бесперебойную совместную работу различных частей пользовательского интерфейса. Это означает, что когда пользователь взаимодействует с одной частью, это должно вызвать соответствующие изменения в других частях.
Представьте, что вы создаете интернет-магазин. Когда пользователь нажимает «Добавить в корзину», вы хотите, чтобы количество корзин обновилось соответствующим образом. В большом приложении со множеством компонентов управление этим взаимодействием может оказаться сложным. Именно здесь в игру вступают инструменты управления состоянием.
Для небольших одностраничных веб-сайтов, таких как базовые портфолио, управление состоянием может не представлять серьезной проблемы. Однако для более крупных и сложных приложений настоятельно рекомендуется использовать инструмент управления состоянием.
Некоторые популярные инструменты управления состоянием включают Context API и Redux. Эти инструменты предоставляют структурированные способы управления и синхронизации состояния различных частей вашего приложения, что делает его более организованным, эффективным и простым в обслуживании.
Как это работает ?
Контекстный API предоставляет возможность передавать данные через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне. Context API состоит из двух частей: объекта Context и компонента Provider. Объект Context используется для создания общего источника данных, а компонент Provider используется для предоставления данных компонентам, которым они необходимы.
Создание объекта контекста
Чтобы создать объект Context, вы используете метод createContext(), который доступен в модуле React. Вот пример того, как создать объект Context:
import { createContext } from "react";
const AppContext = createContext();
Примечание. Убедитесь, что корневое приложение должно быть помещено в
// App is a children of AppContext
<AppContextProvider>
<App />
</AppContextProvider>
Все иерархические компоненты могут использовать данные контекста. Проще говоря, данные контекста — это то, что называется централизованными данными. Эти данные Centrailise могут использоваться дочерним компонентом корневого компонента.
Предоставление данных компонентам
Чтобы предоставить данные компонентам, которым они необходимы, вы используете компонент Provider, который также доступен в объекте Context. Вот пример того, как предоставить данные компонентам с помощью компонента Provider:
export default function AppContextProvider({ children }) {
const [loading, setLoading] = useState(false);
const [post, setPost] = useState([]);
const [page, setPage] = useState(1);
const [totalPages, setTotalPages] = useState(null);
// Data Filling
async function fetchBlogPost(page = 1) {
setLoading(true);
// API Call
let url = `${baseUrl}?page=${page}`;
// console.log("this is data ", url)
try {
const result = await fetch(url);
const data = await result.json();
console.log(data)
setPage(data?.page);
setPost(data?.posts);
setTotalPages(data?.totalPages)
}
catch (error) {
console.log('Error in Ftching data ');
setPage(1);
setPost([]);
setTotalPages(null);
}
setLoading(false);
}
// This is a page handler
function handlePageChange(page) {
setPage(page);
fetchBlogPost(page);
}
// this data passed to consumer
const value = {
post,
setPost,
loading,
setLoading,
page,
setPage,
totalPages,
setTotalPages,
fetchBlogPost,
handlePageChange
};
// Pass the Data to Children
return <AppContext.Provider value={value}>
{children}
</AppContext.Provider>
}
Использование данных в компонентах
Чтобы использовать данные в компонентах, вы используете компонент Consumer, который также доступен в объекте Context. Вот пример того, как использовать данные в компонентах с помощью компонента Consumer:
import React, { useContext } from 'react'
import { AppContext } from '../context/AppContext'
import Spinner from './Spinner'
const Blogs = () => {
// Consume Context API Data
const { post, loading } = useContext(AppContext);
return (
<div>
{
loading ?
(<Spinner />) :
(
post.length === 0 ?
(
<div> No Post Found </div>
) : (
post.map((post) => (
<div key={post.id}>
<p >{post.title}</p>
<p >
By <span >{post.author}</span> on <span>{post.category}</span>
<p >posted on {post.date}</p>
<p>{post.content}</p>
<div>
{post.tags.map((tag, index) => {
return <span key={index}>{`#${tag}`}</span>
})}
</div>
</p>
</div>
))
)
)
}
</div>
)
}
export default Blogs
В этом примере я создаю веб-сайт блога, где хук использования компонента блога с именем useContext() для получения данных из {AppContext} предоставляет значение типа «Like post, loading» компонентам блога, которые являются дочерними элементами корня. Компонентный компонент.
Ссылка на GitHub: https://github.com/Aak172003/State-Management
Когда использовать контекст
Используйте Context API в React, когда у вас есть данные, к которым необходим доступ многим компонентам, но вы хотите избежать их передачи вручную через несколько уровней дерева компонентов. Он идеально подходит для глобальных настроек, таких как темы, аутентификация пользователя или языковые настройки. Context API упрощает обмен данными такого типа, делая ваш код более чистым и эффективным.
Преимущества контекстного API
- Меньше настроек и настроек.
- Более простой в использовании для приложений малого и среднего размера.
- Может быть хорошим вариантом, если вам нужно управлять лишь небольшим объемом глобального состояния.
Недостатки контекстного API
- Может стать сложнее отлаживать и поддерживать приложение по мере увеличения размера и сложности приложения.
Заключение
React Context API предоставляет простой и эффективный способ обмена данными между компонентами в ваших приложениях React. Создав объект Context и используя компоненты Provider и Consumer, вы можете передавать данные через дерево компонентов без необходимости передавать реквизиты вручную. Перехват useContext — еще одна полезная функция Context API, которая упрощает использование данных в ваших компонентах. Если вы работаете над приложением React и вам необходимо обмениваться данными между компонентами, вам обязательно следует рассмотреть возможность Context API.
