Как хранит состояния react?

В React состояния компонентов хранятся в специальном объекте, называемом state. State - это объект, который содержит данные и информацию, специфичную для данного компонента. Каждый компонент может иметь свое собственное состояние.

Состояние компонента можно определить внутри его конструктора, используя метод super() для вызова конструктора родительского класса React.Component, а затем установив свойство this.state в объект, содержащий начальное состояние компонента.

Пример создания состояния компонента в React:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
      name: 'John'
    };
  }

  render() {
    return (
      <div>
        <p>Counter: {this.state.counter}</p>
        <p>Name: {this.state.name}</p>
      </div>
    );
  }
}

В данном примере мы создали компонент MyComponent с двумя свойствами в его состоянии: counter и name. Начальное значение counter установлено равным 0, а имя равно 'John'.

Чтобы получить доступ к состоянию компонента, мы используем синтаксис this.state.property, где property - это имя свойства, которое мы хотим получить.

React предоставляет метод setState(), который позволяет обновить состояние компонента. При вызове setState() React сливает новые данные состояния с текущим состоянием и перерисовывает компонент.

Пример обновления состояния компонента:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }

  incrementCounter() {
    this.setState({
      counter: this.state.counter + 1
    });
  }

  render() {
    return (
      <div>
        <p>Counter: {this.state.counter}</p>
        <button onClick={() => this.incrementCounter()}>Increment</button>
      </div>
    );
  }
}

В этом примере мы добавили метод incrementCounter(), который вызывается при клике на кнопку. Метод incrementCounter() обновляет состояние компонента, увеличивая значение counter на 1 при каждом вызове.

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