Будучи начинающим разработчиком, я никогда не понимал состояний в коде. Это было похоже на этот абстрактный скрытый слой кода, поэтому я пошел и написал этот учебник, чтобы помочь людям понять, что происходит за кулисами для тех, кто только начинает понимать эти знания.

Поскольку свойства и состояние передаются в одном и том же месте и действуют одинаково при передаче через функцию, для человека, не обладающего знаниями, это может немного сбить с толку.

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 используется для получения текущего состояния компонента.

Использование состояний и реквизита

  1. Создайте компонент React с методом конструктора, который устанавливает начальное состояние кнопки. Начальное состояние кнопки должно быть установлено в false.
class MyButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: false
    };
  }
  // ...
}
  1. Создайте метод обработчика событий в компоненте React, который будет вызываться при нажатии кнопки. Обработчик события обновит состояние кнопки до true.
handleClick = () => {
  this.setState({
    isClicked: true
  });
};
  1. Добавьте обработчик события onClick к элементу кнопки. Обработчик события onClick должен вызывать метод handleClick при нажатии кнопки.
<button onClick={this.handleClick}>Click Me!</button>
  1. Добавьте оператор 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>
  );
}

Вот и все! Теперь у вас есть кнопка, которая меняет свое состояние при нажатии.