09-component-classes.html

<!doctype html>

<title>09 Классы компонентов - React с нуля</title>

<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js">
// React.createClass удалён из React 16 и теперь является отдельным пакетом
</script>

<div id="app"></div>

<script type="text/babel">
// Часто компоненту требуется поддерживать некоторое внутреннее состояние,
// например, если в этом случае вовлечено взаимодействие, то
// функции-компонента недостаточно
// У функции-компонента может быть только свойства, а не состояние
// Нам нужен класс компонента с функцией отрисовки
var MyComponent = createReactClass({

  // используется для проверки типов свойств,
  // как и в функции-компоненте
  propTypes: {
    color: PropTypes.string,
  },

  // Этот метод устанавливает значения по умолчанию для отсутствующих свойств
  // Он вызывается React
  // перед монтированием компонентов в DOM
  getDefaultProps: function() {
    return {color: "green"}
  },

  // Этот метод устанавливает начальное состояние компонента
  // Он вызывается React
  // перед монтированием компонентов в DOM
  // если этот метод отсутствует, this.state будет undefined
  getInitialState: function() {
    // Состояние может быть любым значением JavaScript, часто это объект
    return {times: 0}
  },

  // Этот метод обрабатывает все нажатия на элемент <span>
  handleClick: function() {
    // setState() может вызываться с объектом, который содержит новое состояние,
    // обычно это вызывает render(), но React может группировать несколько
    // вызовов и откладывать вызов render() (сделать асинхронный вызов)
    // Для предотвращения этого, setState может вместо этого выполнить колбэк

    // Это может привести к неожиданному поведению, если мы полагаемся на this.state или
    // this.props для наших вычислений
    // this.setState({times: this.state.times + 1})

    // У версии с колбэком нет такой проблемы
    // Колбэк получает правильное состояние и свойство во время обновления
    this.setState(function(prevState, props) {
      return {times: prevState.times + 1}
    })

  },

  // Этот метод будет вызываться React
  // после того, как компонент примонтирован к DOM,
  // а также каждый раз при вызове this.setState()
  // Это как функция-компонент, но без аргумента props
  render: function() {

    // используя props в компоненте,
    // теперь свойства компонента находятся в this.props вместо аргумента props
    var style = {color: this.props.color}

    // Возвращается элемент с обработчиком нажатия, а также с значениями
    // свойства и состояния. Состояния хранятся в this.state
    return (
      <span onClick={this.handleClick} style={style}>
        Нажато {this.state.times} раз
      </span>
    )

  },

})

// Создание пару экземпляров классов компонента с состоянием
// и один со значением цвета по умолчанию
// Все работает точно так же, как с помощью более простых функций-компонентов
// Интерфейс не изменился для пользователя этого компонента
var reactElement =
  <div>
    <MyComponent color="red"/>
    <br/>
    <MyComponent color="blue"/>
    <br/>
    <MyComponent/>
  </div>;

var renderTarget = document.getElementById("app")

ReactDOM.render(reactElement, renderTarget)
</script>