Привет! Я нахожусь в миссии, чтобы сделать 100 проектов React.js, заканчивающиеся 31 мая. Пожалуйста, следуйте My Dev.to Profile или моим Твиттер Для обновлений и не стесняйтесь обратиться, если у вас есть вопросы. Спасибо за вашу поддержку!
Ссылка на сегодняшнее развернутое приложение: Ссылка Ссылка на репо: GitHub
Еще в декабре я опубликовал этот простой проект, который был связан с использованием API Context React, расширяя предварительные компоненты React ((ссылка на проект) [https://dev.to/jwhubert91/project-24-100-dark-and-mode-cra-with-the-react-context-api-3e4k]).
Сегодня я возвращаюсь к контексту и создаю что -то подобное. Это коммутатор темы пользовательского интерфейса, использующий контекст- на этот раз с помощью крючков вместо компонентов класса.
USECONTEXT ()
В рамках относительно более нового подхода реагирования поэтапного класса Class Class, нам необходимо изучить способ реагирования, чтобы расширить базовые функции реагирования, такие как контекст или состояние. Есть дополнительное преимущество, что оно также выглядит лучше.
В этом проекте у нас есть наш Приложение компонент, а Кнопка компонент и Заголовок Анкет Все, что мы собираемся сделать, это переключаться между режимом света и темным режимом в вашем приложении, и API React Context API – отличный способ достичь этого.
При использовании USECONTEXT () Крюк нам не нужно расширять компоненты на основе класса. Как и в проекте 24, нам нужно создать чистый компонент реагирования для размещения нашего поставщика контекста и создания контекстного API. Мы используем этот компонент, чтобы затем экспортировать поставщика контекста и контекста где -либо еще в приложении.
import React, {useState} from 'react'
const ThemeContext = React.createContext();
function ThemeContextProvider(props) {
const [theme,setTheme] = useState("dark")
const toggleTheme = () => {
setTheme(prevTheme => prevTheme === "light" ? "dark" : "light")
}
return (
{props.children}
)
}
export {ThemeContextProvider,ThemeContext}
Выше мы создаем экземпляр контекста React, а затем назначаем его переменной Themecontext. Затем мы создаем состояние на этом компоненте с USESTATE зацепите и храните переменную тема в штате. Мы также создаем метод на этом функциональном компоненте с именем ToggleTheme () Это переключает состояние этого компонента.
Как и в нашем примере контекста компонента класса, мы используем свойство поставщика в нашем создании контекста Themecontext и использовать его предварительно построенный значение Опора для хранения переменной темы и метода ToggleTheme из этого функционального компонента.
Тогда вы можете предоставить Этот контекст для любой другой части вашего приложения, но, как правило, вы хотите, чтобы он был довольно высоко в иерархии компонентов, чтобы больше вашего приложения имело доступ к этому контексту. Мы ставим это так же высоко, как и в index.js файл. Это то же самое с нашим UseContext, так как он просто импортирует поставщика и завершает в него приложение.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {ThemeContextProvider} from './themeContext';
ReactDOM.render(
,
document.getElementById('root')
);
Потребление контекста с UseContext ()
Помните, что крутая вещь о контексте состоит в том, что вам действительно не нужно передавать что -либо до компонентов более низкого уровня с реквизитом, если поставщик для этого контекста позиционирует более высокое дерево компонентов. Так как мы сделали это, наш Приложение Компонент не имеет никакого упоминания о контексте, несмотря на то, что мы знаем, что собираемся потреблять данные из него ниже в Кнопка и Заголовок .
import React from 'react';
import Header from './Header';
import Button from './Button';
function App() {
return (
Чтобы на самом деле потребовать контекста, мы перейдем к компонентам, где хотим его использовать. Давайте начнем с заголовка, так как это чисто изменение пользовательского интерфейса.
import React, {useContext} from "react"
import {ThemeContext} from "./themeContext"
function Header(props) {
const {theme} = useContext(ThemeContext)
return (
{theme === "light" ? "Light" : "Dark"} Theme
)
}
export default Header
Чтобы потреблять данные наших тем из ТЕМЕКТОК Мы просто вводим USECONTEXT React Hook затем сохраните экспортируемую тему в переменной в функциональном компоненте, выше возврата. Мы импортируем Themecontext, а затем можем использовать USECONTEXT () Чтобы указать, какой контекст мы хотим использовать:
const {theme} = useContext(ThemeContext)
Поскольку мы разрушили тема Переменная, теперь мы можем использовать его как любая другая переменная в нашем компоненте. Мы будем использовать его для отправки данных о том, какую тему (свет или темный) мы сохранили в контексте для приложения, и изменить имя класса Заголовок соответственно. В наших CSS два класса имеют разные цвета, связанные с ними:
.dark-theme {
background-color: #333333;
color: whitesmoke;
}
.light-theme {
background-color: whitesmoke;
color: #333333;
}
В нашем Кнопка Компонент Мы также потребляем контекст темы, но также импортируем функцию в кнопку, чтобы переключить тему.
import React, {useContext} from "react"
import {ThemeContext} from "./themeContext"
function Button(props) {
const {theme, toggleTheme} = useContext(ThemeContext)
return (
)
}
export default Button
Этот синтаксис намного более чистый, чем обертывание компонента кнопки в потребительском компоненте, как в моем более раннем проекте с использованием контекста.
Кнопка теперь переключает тему на протяжении всего приложения, и мы сделали это, используя данные из функционального компонента ThemeContext и немного USECONTEXT () Анкет Довольно легко! Я определенно люблю реагировать крючки.
Если вам нравятся такие проекты и вы хотите оставаться в курсе большего, проверьте мой Twitter @jwhubert91 , Я следую назад! Увидимся завтра для другого проекта, на этот раз на пользовательских крючках.
Оригинал: “https://dev.to/jwhubert91/project-62-of-100-simplify-context-components-with-the-usecontext-hook-in-react-449j”