Будучи начинающим разработчиком, я никогда не понимал состояний в коде. Это было похоже на этот абстрактный скрытый слой кода, поэтому я пошел и написал этот учебник, чтобы помочь людям понять, что происходит за кулисами для тех, кто только начинает понимать эти знания.
Поскольку свойства и состояние передаются в одном и том же месте и действуют одинаково при передаче через функцию, для человека, не обладающего знаниями, это может немного сбить с толку.
React — это библиотека JavaScript, используемая для создания пользовательских интерфейсов. Это одна из самых популярных библиотек, используемых в современной веб-разработке, и ее часто используют вместе с HTML, CSS и JavaScript для создания сложных веб-приложений. Он используется для создания интерактивных пользовательских интерфейсов, а также для организации и упрощения кода. React — это библиотека, основанная на компонентах, что означает, что она состоит из компонентов, которые используются для создания пользовательского интерфейса.
Компоненты — это фрагменты кода, содержащие набор инструкций, которые используются для отображения пользовательского интерфейса. Компоненты состоят из двух основных частей: свойств и состояния. Реквизиты — это данные, передаваемые из родительского компонента в дочерний, а состояние — это данные, относящиеся к конкретному компоненту, которые могут меняться со временем. В этом уроке мы обсудим свойства и состояние, а также то, как они используются в React.
Реквизит
Реквизиты — это данные, которые передаются от родительского компонента к дочернему компоненту. Они используются для передачи информации между компонентами и предоставления дочернему компоненту данных, необходимых для отображения. Реквизитом может быть любой тип данных, включая строки, числа, объекты, массивы и функции. Реквизиты обычно передаются как атрибуты компонента. Например, если вы хотите передать свойство с именем «имя» компоненту, вы должны сделать это, добавив к компоненту атрибут с именем «имя».
<Component name="John" />
Затем компонент может получить доступ к реквизиту, используя ключевое слово «props». Реквизиты передаются компоненту в качестве аргумента.
function MyComponent(props) { const name = props.name; // ... }
Реквизиты также можно передавать как объект JavaScript. Например, если вы хотите передать компоненту несколько реквизитов, вы можете сделать это, передав объект в качестве аргумента.
function MyComponent({name, age}) { const name = name; const age = age; // ... } <MyComponent name="John" age={30} />
Состояние
Состояние — это специфичные для компонента данные, которые могут меняться со временем. Он используется для хранения и управления данными внутри компонента. Когда состояние компонента изменяется, компонент будет повторно отображаться с обновленными данными. Состояние может быть любым типом данных, включая строки, числа, объекты, массивы и функции.
Состояние управляется внутри самого компонента и не передается между компонентами. Для доступа и обновления состояния компонент должен использовать методы «setState» и «getState». Метод setState используется для обновления состояния компонента, а метод getState используется для получения текущего состояния компонента.
Использование состояний и реквизита
- Создайте компонент React с методом конструктора, который устанавливает начальное состояние кнопки. Начальное состояние кнопки должно быть установлено в false.
class MyButton extends React.Component { constructor(props) { super(props); this.state = { isClicked: false }; } // ... }
- Создайте метод обработчика событий в компоненте React, который будет вызываться при нажатии кнопки. Обработчик события обновит состояние кнопки до true.
handleClick = () => { this.setState({ isClicked: true }); };
- Добавьте обработчик события onClick к элементу кнопки. Обработчик события onClick должен вызывать метод handleClick при нажатии кнопки.
<button onClick={this.handleClick}>Click Me!</button>
- Добавьте оператор if в метод рендеринга компонента React, который будет условно отображать кнопку в зависимости от состояния. Если состояние кнопки истинно, то кнопка должна отображаться как отключенная. Если состояние кнопки ложно, то кнопка должна отображаться как включенная.
render() { let buttonText; let buttonStyle; if (this.state.isClicked) { buttonText = 'Clicked!'; buttonStyle = 'disabled'; } else { buttonText = 'Click Me!'; buttonStyle = 'enabled'; } return ( <button className={buttonStyle} onClick={this.handleClick}> {buttonText} </button> ); }
Вот и все! Теперь у вас есть кнопка, которая меняет свое состояние при нажатии.