Как использовать state в React - UPROGER

Что такое state?

state – это объект JavaScript, который хранит динамические данные компонента и определяет его поведение. Поскольку state является динамическим, оно позволяет компоненту отслеживать изменение информации в промежутках между визуализацией и делать ее динамической и интерактивной.

Добавлении state обычно делается для компонента класса или функционального компонента.

Что такое компонент класса?

Компонент класса – это просто более функциональный способ определения компонента React. Он также действует как функция, которая получает реквизиты (параметры в реакции), но эта функция также рассматривает частный внутренний state как дополнительный ввод, который контролирует возвращаемый JSX (JavaScript XML). Интересный факт о компоненте класса заключается в том, что он требует от вас расширения от React.Component и создания функции рендеринга, которая возвращает элемент React.

Компоненты React имеют встроенный объект state. Объект state – это место, где вы храните значения свойств, принадлежащих компоненту. Когда объект state изменяется, компонент перерисовывается.

Примеры

Создание объекта state

Объект state инициализируется в нашем конструкторе:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Наш объект state может содержать сколько угодно свойств:
Укажите все свойства, которые нужны вашему компоненту:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Использование объекта state

Пытаясь получить доступ к свойствам state в нашем компоненте, мы обращаемся к объекту state в любом месте компонента, используя синтаксис this.state.propertyname.

Пример

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

Изменение объекта state

Чтобы изменить значение в объекте state, используйте метод this.setState (). Когда значение в объекте state изменяется, компонент будет повторно визуализирован, что означает, что вывод изменится в соответствии с новым значением.

Пример
Для этого нам понадобится дескриптор onClick even для кнопки, чтобы обновлять состояние при нажатии ее пользователем. Обработка событий с помощью элементов React очень похожа на обработку событий в элементах DOM. Однако есть некоторые различия в синтаксисе:

События React именуются с использованием camelCase, а не строчных букв.
С JSX вы передаете функцию в качестве обработчика события, а не строку.
Например, HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

В React:

<button onClick={activateLasers}>
  Activate Lasers
</button>

Продолжая наш пример, мы добавим кнопку с событием onClick, которое изменит свойство цвета:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

Примечание. Всегда используйте метод setState () для изменения объекта state, это гарантирует, что компонент знает, что он был обновлен, и вызывает метод render () и другие методы.

Что такое функциональная составляющая?

С другой стороны, функциональный компонент – это простая функция JavaScript, которая принимает реквизиты в качестве аргумента и возвращает элемент React. Она работает почти как компонент класса, только здесь у нас нет ключевого слова this, которое говорило бы, что мы получим что-то вроде следующего кода:

export default function Car() {
  const [state, setState] = React.useState({
    brand: "Ford",
    model: "Mustang",
    color: "red",
    year: 1964
  });

  const changeColor = () => {
    setState({ color: "blue" });
  };

  return (
    <div>
      <h1>My {state.brand}</h1>
      <p>
        It is a {state.color}
        {state.model}
        from {state.year}.
      </p>
      <button type="button" onClick={changeColor}>
        Change color
      </button>
    </div>
  );
}