Как использовать состояние компонента в React.js?

Пользователь

от kurt , в категории: JavaScript , год назад

Как использовать состояние компонента в React.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jamey.kohler , год назад

@kurt 

Состояние компонента в React.js используется для хранения и управления данными, которые могут изменяться во время работы приложения. Состояние компонента является внутренним и может быть изменено только компонентом, который его содержит.


Для использования состояния в React.js нужно:

  1. Определить начальное состояние в конструкторе компонента с помощью метода this.state = {initialState}.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      message: 'Hello World'
    };
  }
  //...
}


  1. Обновить состояние компонента с помощью метода this.setState({newState}). Этот метод обновляет только те свойства состояния, которые передаются в качестве аргумента.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      message: 'Hello World'
    };
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1
    });
  }
  //...
}


  1. Использовать состояние в методе render().
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      message: 'Hello World'
    };
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={() => this.handleClick()}>
          Click me ({this.state.count})
        </button>
      </div>
    );
  }
}


В этом примере мы определили начальное состояние компонента с помощью метода this.state в конструкторе. Затем мы обновили состояние, когда пользователь нажал кнопку, используя метод this.setState(). Наконец, мы использовали состояние в методе render(), чтобы отобразить его значение на экране.


Запомните, что изменение состояния вызывает перерисовку компонента. Поэтому следует использовать setState() только тогда, когда нужно изменить состояние компонента.