<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики. Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Что такое состояние в React и как им управлять

Что такое состояние в 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/bootstrap@4.5.3/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 можно менять состояние компонента для динамической перерисовки компонента.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.