ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Как переключать css класс в React
год назад·2 мин. на чтение
В этой статье рассмотрим, как динамически переключать css классы в приложении React.
Переключение ccs классов
Чтобы переключить css класс, нам нужно использовать логическое значение, например, в тернарном выражении.- Если логическое значение
true
, имя класса добавляется к элементу react. - Если логическое значение
false
имя класса удаляется из элемента react.
app
в элемент div
, когда мы нажимаем кнопку Toggle class
. Если мы нажмем эту кнопку еще раз, имя класса будет удалено из элемента div
.
// App.js import React, { useState } from "react"; import "./styles.css"; export default function App() { const [isActive, setActive] = useState(false); const handleToggle = () => { setActive(!isActive); }; return ( <div className={isActive ? "app" : null}> <h1>Hello react</h1> <button onClick={handleToggle}>Toggle class</button> </div> ); }
// App.js import React, { Component } from "react"; import "./styles.css"; class App extends Component { state = { isActive: false }; handleToggle = () => { this.setState({ isActive: !this.state.isActive }); }; render() { const isActive = this.state.isActive; return ( <div className={isActive ? "app" : null}> <h1>Hello react</h1> <button onClick={this.handleToggle}>Toggle class</button> </div> ); } } export default App;
Переключение между двумя именами классов
Вместо того, чтобы добавлять или удалять имя класса, мы также можем переключаться между двумя именами классов в приложении React. В приведенном ниже примере по умолчанию классcontainer
добавляется в элемент div
, когда мы нажимаем кнопку Toggle class
класс container
удаляется, а класс app
добавляется к элементу.
// App.js import React, { useState } from "react"; import "./styles.css"; export default function App() { const [isActive, setActive] = useState(false); const handleToggle = () => { setActive(!isActive); }; return ( <div className={isActive ? "app" : "container"}> <h1>Hello react</h1> <button onClick={handleToggle}>Toggle class</button> </div> ); }
Добавление имени класса к существующему имени класса
Вы также можете добавить новое имя класса к существующему имени класса следующим образом.Первоначальный вид html разметки:// App.js import React, { useState } from "react"; import "./styles.css"; export default function App() { const [isActive, setActive] = useState(false); const handleToggle = () => { setActive(!isActive); }; return ( <div className={`app ${isActive ? "danger" : ""}`}> <h1>Hello react</h1> <button onClick={handleToggle}>Toggle class</button> </div> ); }
После нажатия кнопки<div class="app"> <h1>Hello react</h1> <button>Toggle class</button> </div>
Toggle class
html выглядит следующим образом.
<div class="app danger"> <h1>Hello react</h1> <button>Toggle class</button> </div>
Одна из причин за что НЕ любят Redux
2 года назад·4 мин. на чтение
Зачем вообще нужно глобальное хранилище? Действительно ли наши веб-приложения настолько сложны, или мы пытаемся их переусложнить, используя Redux?
Redux был революционной технологией в экосистеме React. Это позволило нам иметь глобальное хранилище и устранило проблему prop drilling в нашем дереве компонентов. Для совместного использования иммутабельных данных в приложении он по-прежнему остается отличным инструментом, который очень хорошо масштабируется.
Граница между ответственностью бэкэнда и фротенда быстро стирается, когда мы начинаем воссоздавать базу данных на фротенде . Как фротенд-разработчикам, нам не нужно досконально разбираться в таблицах и их связях, чтобы создать простой пользовательский интерфейс. Нам также не нужно знать, как лучше всего нормализовать наши данные. Эта ответственность должна лежать на людях, которые сами проектируют таблицы — на бэкэнд-разработчиках. Бэкенд-разработчики затем могут предоставить абстракцию для фронтенд-разработчиков в виде документированного API.
В настоящее время существует множество библиотек (redux-observable, redux-saga и redux-thunk, и это лишь некоторые из них), построенных вокруг Redux, чтобы помочь нам управлять данными из бэкэнда, каждая из которых добавляет уровень сложности к уже и так сложной для инициализации библиотеке. Иногда нам нужно сделать шаг назад, прежде чем сделать шаг вперед.
Чтобы сравнить эту библиотеку с Redux, рассмотрим пример двух методов. Для примера используем простой список TODO, полученный с сервера.
Реализация с Redux.
Обратите внимание, что в этом коде еще даже нет повторной выборки данных, кэширования и инвалидации кэша. Это просто загрузка данные и сохранение их в глобальное хранилище.
Вот тот же пример, реализованный с помощью React Query.
По умолчанию код с React Query уже включают повторную выборку данных, кэширование и инвалидацию устаревших данных с предустановленной конфигурацией. Можно также установить конфигурацию кэширования на глобальном уровне.
Везде, где вам нужны эти данные, теперь вы можете использовать хук useQuery с уникальным ключом, который вы установили (в данном случае
Проблема одностраничных приложений
Появление фреймворков для создания одностраничных приложений (SPA), например, React, внесло множество изменений в то, как мы разрабатываем веб-приложения. Сильное разделение бэкэнда и фронтенда позволило нам сфокусироваться и разделить задачи между командами. Это также внесло много сложностей, особенно в сопровождении состояния веб-приложения. Асинхронный запрос данных теперь означает, что данные должны находиться в двух местах: во фронтенде и на бекенде. Мы должны подумать о том, как лучше всего хранить эти данные глобально, чтобы они были доступны для всех наших компонентов, сохраняя при этом кэш данных для экономии времени на частых запросах. Большая часть разработки фронтенда теперь включает поддержку глобального хранилища - денормализации данных, устаревание данных и различные специфические баги.Redux - это не кэш
Основная проблема, с которой сталкивается большинство из нас при использовании Redux и подобных библиотек управления состоянием, заключается в том, что мы рассматриваем его как кэш для нашего внутреннего состояния. Мы извлекаем данные, добавляем их в наше хранилище с помощью редьюсера/экшена и периодически обновляем их, чтобы убедиться, что они актуальны. Мы заставляем Redux делать слишком много и используем его как универсальное решение наших проблем. Одна важная вещь, которую следует помнить, это то, что данные на фронтенде и на бэкэнде никогда не синхронизированы по настоящему, это лишь иллюзия. Это один из недостатков модели клиент-сервер, и именно поэтому нам нужен кэш. Однако кэширование и синхронизация состояния чрезвычайно сложны, поэтому мы не должны воссоздавать это состояние бэкэнда с нуля.Более простой подход к хранению данных с бэкэнда
Есть пара библиотек, которые обладают преимуществами перед Redux (или аналогичной библиотекой управления состоянием) для хранения состояния бэкэнда.React Query
Это библиотека с очень простым API и парой хуков для управления запросами (выборка данных) и мутациями (изменение данных). Благодаря использованию React Query удается писать гораздо меньше шаблонного кода, чем с Redux. Становится проще сосредоточиться на UI/UX веб-приложения, не заботясь о проблемах поддержки состояния бэкэнда.import React, { useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import axios from 'axios'; const SET_TODOS = "SET_TODOS"; export const rootReducer = (state = { todos: [] }, action) => { switch (action.type) { case SET_TODOS: return { ...state, todos: action.payload }; default: return state; } }; export const App = () => { const todos = useSelector((state) => state.todos); const dispatch = useDispatch(); useEffect(() => { const fetchPosts = async () => { const { data } = await axios.get("/api/todos"); dispatch({ type: SET_TODOS, payload: data }); }; fetchPosts(); }, []); return ( <ul>{todos.length > 0 && todos.map((todo) => <li>{todo.text}</li>)}</ul> ); };
import React from "react"; import { useQuery } from "react-query"; import axios from "axios"; const fetchTodos = async () => { const { data } = await axios.get("/api/todos"); return data; }; const App = () => { const { data } = useQuery("todos", fetchTodos); return data ? ( <ul>{data.length > 0 && data.map((todo) => <li>{todo.text}</li>)}</ul> ) : null; };
todos
), и асинхронным вызовом для получения данных. Пока функция асинхронная, реализация не имеет значения — вы можете так же легко использовать Fetch API вместо Axios.
Для изменения внутреннего состояния React Query предоставляет хук useMutation
.
SWR
SWR концептуально почти идентичен React Query. React Query и SWR были разработаны примерно в одно и то же время, и оба положительно повлияли друг на друга. В документации по React Query также есть подробное сравнение этих двух библиотек. Как и React Query, SWR также имеет очень удобочитаемую документацию. По большей части вы не ошибетесь ни с одной из библиотек. Независимо от того, что в конечном итоге станет нормой в ближайшем будущем, будет намного проще провести рефакторинг.Apollo Client
SWR и React Query ориентированы на REST API, но если вам нужно что-то подобное для GraphQL, то явным претендентом является Apollo Client. Также приятно, что синтаксис почти идентичен React Query.Встроенные возможности для работы с состоянием
Как только вы начнете использовать одну из этих библиотек, вы обнаружите, что в подавляющем большинстве проектов Redux является излишним. Когда не придется самим заниматься запросом и кешированием данных в веб-приложении, на фронтенде останется лишь небольшая часть глобального состояния. То немногое, что осталось, можно обработать с помощью Context API илиuseContext
+ useReducer
, чтобы создать свой собственный псевдо-Redux.
Или, что еще лучше, для простых кейсов можно использовать встроенное состояние React.
// чисто, красиво и просто const [состояние, setState] = useState();