Как упростить управление состоянием с помощью контекстного API React.js — учебное пособие

Привет👋🏻, Эта статья специально создана для новичков, которые хотят изучить более эффективные методы управления состоянием между несколькими компонентами. Он также направлен на решение распространенной проблемы сверления опор, которая может затруднить поддержку и понимание вашего кода. Начнем с того, какие проблемы решает контекстный API. Если вы предпочитаете видеоформат, то вот мастер-класс, который вы можете посмотреть на моем канале YouTube.👇🏻 https://youtu.be/4p_VWn1AEvg?embedable=true Что такое винтовое бурение? Вы знаете, как иногда вам нужно передать данные из родительского компонента в дочерний, и в конечном итоге вам приходится передавать реквизиты через кучу промежуточных компонентов? Это называется , и оно может быстро запутаться. Давайте рассмотрим пример, чтобы прояснить это. винтовым бурением Как показано на диаграмме, представьте, что вы получили некоторые данные в компоненте , который находится в корне вашего приложения. Теперь, если глубоко вложенному компоненту, скажем, компоненту , необходим доступ к этим данным, вы обычно передаете их через компоненты и в качестве реквизитов, прежде чем они достигнут . Это может стать неприятным по мере роста вашего приложения. App Grandchild Parent Child Grandchild Вот еще одно визуальное представление: В приведенном выше примере компоненту требуются пользовательские данные, но эти данные сначала должны пройти через компоненты и , даже если эти промежуточные компоненты сами не используют данные. Итак, как нам это очистить? Вот тут-то и пригодится Context API. Profile App Navigation Бурение реквизита: Увеличивает повторный рендеринг компонентов. Увеличивает шаблонный код Создает зависимость компонента Снижает производительность Контекстный API реагирования Контекстный API в React.js позволяет передавать данные между компонентами без необходимости передавать их в качестве реквизита на каждом уровне дерева компонентов. Он работает как глобальная система управления состоянием, где вы определяете свое состояние в объекте контекста, а затем можете легко получить к нему доступ в любом месте дерева компонентов. Давайте разберемся в этом на примере. Как вы можете видеть на диаграмме, у нас есть объект контекста, в котором хранятся данные, к которым могут получить доступ несколько компонентов. Эти данные извлекаются из API или сторонних сервисов. Прежде чем получить доступ к этим данным контекста в любом компоненте, нам необходимо обернуть все компоненты, которым требуются эти данные, в компонент поставщика контекста. Если нам нужен доступ только к данным в компонентах навигации и профиля, нам не нужно оборачивать компонент приложения. После того как вы обернули соответствующие компоненты в , вы можете напрямую получить доступ к данным контекста в любом компоненте, который их использует. Не волнуйтесь, если вы еще этого не понимаете; давайте углубимся в код и посмотрим его в действии. ContextProvider Как использовать контекстный API? Сначала давайте создадим приложение React, используя Просто скопируйте следующие команды, чтобы настроить проект. Vite.js. npm create vite@latest Добавьте название вашего проекта Выберите Реагировать Выберите машинописный текст из вариантов cd project_name // to change to project directory npm install npm run dev Затем вы можете открыть свой сервер разработки в своем браузере. http://localhost:5173 Для начала создадим необходимые папки. Вот структура папок нашего проекта. src | components | context В папке компонентов создадим файл и добавим следующий код. Profile.jsx import React from 'react' const Profile = () => { return ( Profile ) } export default Profile Создайте еще один компонент под названием в папке компонентов. Navbar.jsx import Profile from './Profile' const Navbar = () => { return ( LOGO ) } export default Navbar Давайте импортируем этот компонент в файл . App.jsx import Navbar from "./components/Navbar"; function App() { return ( ); } export default App; Таким образом, по сути, компонент является дочерним элементом а является дочерним элементом компонента . Добавление контекстного API Давайте создадим файл в папке . Добавьте в файл следующий код. UserContext.jsx context import { createContext, useEffect, useState } from "react"; export const UserContext = createContext(); export const UserProvider = ({ children }) => { const [user, setUser] = useState(null); const fetchUserData = async (id) => { const response = await fetch( `https://jsonplaceholder.typicode.com/users/${id}` ).then((response) => response.json()); console.log(response); setUser(response); }; useEffect(() => { fetchUserData(1); }, []); return ( {children} ); }; Сначала мы создаем пустой объект с помощью . Мы обязательно импортируем его из . Мы можем добавить значения по умолчанию внутри объекта контекста, но пока оставляем его нулевым. UserContext createContext react Затем мы создаем , который возвращает поставщика, использующего , например . Он окружает дочерние компоненты, и в качестве значения мы можем передать все, что хотим использовать в дочерних компонентах. UserProvider UserContext UserContext.Provider Прямо сейчас мы используем для получения пользовательских данных. предоставляет поддельные конечные точки API для целей тестирования. Функция принимает и использует этот идентификатор для получения пользовательских данных. Затем мы сохраняем ответ в состоянии. API jsonplaceholder jsonplaceholder fetchUserData id user Мы вызываем функцию в , поэтому при загрузке страницы она вызывает функцию и вводит данные в состояние . fetchUserData useEffect user Теперь давайте используем этот контекст в компоненте . Оберните компонент с помощью ; то же, что следующий код: Давайте воспользуемся состоянием в компоненте . Для этого мы будем использовать хук . Это принимает и предоставляет значения, которые мы передали в , такие как состояние и функция . Помните, нам не нужно обертывать компонент поскольку он уже находится в компоненте , который уже обернут провайдером. user useContext UserContext UserProvider user fetchUserData Откройте и добавьте следующий код. Profile.jsx const { user } = useContext(UserContext); if (user) { return ( {user.name} ); } else { return Login ; } Здесь мы используем состояние из . Мы отобразим имя пользователя, если есть, в противном случае мы отобразим только сообщение для входа. Теперь, если вы видите результат, в компоненте навигационной панели должно быть имя пользователя. Таким образом мы можем напрямую использовать любое состояние, находящееся в контексте любых компонентов. Компонент, использующий это состояние, должен быть заключен в . user UserContext user Вы также можете использовать несколько контекстов. Вам просто нужно обернуть компоненты поставщика внутри другого компонента поставщика, как показано в следующем примере. В приведенном выше примере мы используем , который управляет состоянием темы. Вы можете посмотреть приведенное выше видео на YouTube, чтобы увидеть полный пример использования нескольких поставщиков контекста. Оптимизация повторного рендеринга в React Context API Существует одна проблема, которая возникает при использовании Context API в нескольких компонентах. Всякий раз, когда состояние или значение изменяется в Context API, он повторно отображает все компоненты, подписанные на этот конкретный контекст, даже если не все компоненты используют измененное состояние. Чтобы понять эту проблему повторного рендеринга, давайте создадим компонент , который использует контекст для хранения и отображения значений счетчика. Посмотрите следующий пример. Вы можете создать файл в папке компонентов и вставить следующий код. Counter.jsx import { createContext, memo, useContext, useState } from "react"; const CountContext = createContext(); const CountProvider = ({ children }) => { const [count, setCount] = useState(0); return ( {children} ); }; function CountTitle() { console.log("This is Count Title component"); return Counter Title ; } function CountDisplay() { console.log("This is CountDisplay component"); const { count } = useContext(CountContext); return Count: {count} ; } function CounterButton() { console.log("This is CounterButton component"); const { count, setCount } = useContext(CountContext); return ( <> setCount(count + 1)}>Increase ); } export default function Counter() { return ( ); } В приведенном выше коде: Сначала мы создаем один объект , используя CountContext createContext. В у нас есть одно состояние для хранения значений счетчика. Мы отправляем и метод дочерним компонентам через свойство value. CountProvider, count setCount Мы создали компоненты отдельно, чтобы увидеть, сколько раз отдельные компоненты перерисовываются. : этот компонент отображает только заголовок и даже не использует никаких значений из контекста. : этот компонент отображает значения счетчика и использует состояние из контекста. count : этот компонент отображает как вышеуказанный компонент, так и кнопку, которая увеличивает значения счетчика с помощью . setCount В конце мы оборачиваем компонент внутри компонента , чтобы другие компоненты могли получить доступ к значениям счетчика. CountProvider Теперь, если вы запустите код и нажмете кнопку , вы увидите в журналах, что каждый компонент выполняет повторную визуализацию каждый раз при изменении состояния. даже не использует значения счетчика, но выполняет повторный рендеринг. Это происходит потому, что родительский компонент который является использует и обновляет значение count и поэтому выполняет повторный рендеринг. Increase Как мы можем оптимизировать это поведение? Ответ — . React позволяет пропустить повторный рендеринг компонента, если его свойства не изменились. После компонента добавим следующую строку. memo memo const MemoizedCountTitle = React.memo(CountTitle) Теперь в компоненте , где мы визуализируем компонент , замените на как показано в следующем коде: <> setCount(count + 1)}>Increase Теперь, если вы увеличите счетчик и проверите журналы, вы увидите, что компонент больше не отображается. Redux против контекстного API — это библиотека управления состояниями для комплексного управления состояниями с более предсказуемыми переходами между состояниями. В то время как Context API предназначен для простого управления состоянием и передачи данных через дерево компонентов без детализации свойств. Итак, когда же выбирать? Redux Используйте для простого, локализованного управления состоянием, когда состояние не меняется часто. React Context API Используйте для сложных задач управления состоянием, особенно в крупных приложениях, где преимущества структурированного управления состоянием перевешивают дополнительные настройки. Redux Существует также еще одна библиотека, которая также является популярным вариантом управления состоянием. . Реакция отдачи — это библиотека управления состоянием для React, целью которой является обеспечение простоты Context API с мощью и производительностью Redux. React Recoil Если вам интересно узнать больше о , дайте мне знать в комментариях, и я создам подробные руководства по этой теме на основе ваших отзывов. React Recoil Заключение Контекстный API предлагает мощный и эффективный способ управления состояниями нескольких компонентов, эффективно решая проблему бурения винтов. Используя Context API, вы можете упростить свой код, уменьшить количество ненужных повторных рендерингов и повысить общую производительность приложения. React.js Хотя Context API идеально подходит для простого управления состоянием, более сложные приложения могут извлечь выгоду из использования или других библиотек управления состоянием, таких как . Понимание того, когда и как использовать эти инструменты, позволит вам создавать более удобные в обслуживании и масштабируемые приложения React. Redux React Recoil Спасибо за прочтение этой статьи, надеюсь, она была вам полезна. Если вы заинтересованы в изучении и создании проектов с использованием React, Redux и Next.js, вы можете посетить мой канал на YouTube здесь: CodeBucks. Вот другие мои статьи, которые вы, возможно, захотите прочитать: Как реализовать плавную прокрутку в Next.js с помощью Lenis и GSAP Как получить местоположение пользователя в React.js Топ-10 популярных тем VS Code, которые стоит попробовать Посетите мой личный блог: DevDreaming