Состояние

Давайте напишем простой счетчик, а ниже разберем его более подробно

class Counter extends Component { constructor(props, context) { super(props, context) this.state = { counter: 0 } } handleClick(event) { event.preventDefault() this.setState({ counter: this.state.counter + 1 }) } render() { const { div, a, p } = html return ( div({}, p({}, this.state.counter), a({ href: '#click', onClick: event => this.handleClick(event) }, 'Click me!' ) ) ) } }

Состояние по умолчанию

Чтобы установить состояние счетчика по умолчанию нам необходимо реализовать метод constructor и передать базовому классу его аргументы props и context через метод super. Теперь можно установать начальное состояние в this.state.

Новое состояние

В методе handleClick мы устанавливаем новое состояние через метод this.setState.

При его установке происходит следующее:

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

Обработчик клика

В методе render для ссылки устанавливаем свойство onClick обработчик handleClick. И чтобы this ссылался на текущий объект оборачиваем его в стрелочную функцию.


Наш счетчик готов.