Что такое состояние в React и как им управлять
В данной статье мы рассмотрим с Вами, что такое состояние в React и как им управлять.
Итак, у каждого более-менее сложного React-компонента есть некоторое внутренние состояние. Это состояние может быть - массивом, объектом, простой строкой, числом или логическим типом.
Работают с состоянием в функциональных react-компонентах с помощью хуков. Вот один из таких хуков React.useState мы и рассмотрим далее на примере динамического переключения темы на странице.
Интерфейс у хука React.useState следующий: метод принимает на вход объект, массив, иное скалярное значение и возвращает переменную и функцию, с помощью, которой мы должны менять значение состояния.
А теперь непосредственно пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React State</title>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
html, body {
height: 100%;
user-select: none;
}
#root {
height: 100%;
}
.theme {
transition: all 0.5s;
}
.theme--light {
color: darkgrey;
background: #f0f0f0;
}
.theme--dark {
color: #eeeeee !important;
background: #222222 !important;
}
</style>
</head>
<body>
<div id="root"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- тип "text/babel" обязательно -->
<script type="text/babel">
function App() {
// инициализируем состояние приложения значением по умолчанию
// метод useState возвращает массив из переменной и функции
// переменная theme содержит текущее значение состояния
// а с помощью setTheme мы можем переключать это значение, т.е. менять состояние
// изменение состояния заставляет компонент перерисовываться, для отображения нового состояния на странице
const [ theme, setTheme ] = React.useState('light');
// обработчик, переключающий состояние компонента App
const handleClick = () => {
'dark' === theme ? setTheme('light') : setTheme('dark')
}
// динамически формируем имя класса блока, подставляя в него текущее значение theme
// как только мы кликнем на кнопке вызовется обработчик handleClick, который изменит состояние
// компонента, и все это перерисует React и покажет нам страницу с добавленной темой
let appClassName = `
container-fluid h-100
d-flex flex-row
justify-content-center align-items-center
theme theme--${theme}
`;
// возвращаем разметку (на самом деле это JSX, замена HTML в React)
return (
<div className={appClassName}>
<h3 style={{ cursor: 'pointer' }} onClick={handleClick}>
ПОМЕНЯТЬ ТЕМУ
</h3>
</div>
);
}
// добавляем компонент на страницу
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
Таким образом, с помощью хука в React.useState можно менять состояние компонента для динамической перерисовки компонента.
-
Создано 29.10.2020 13:59:42
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.