react-from-zero/09-component-classes.html at master · lex111/react-from-zero · GitHub

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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>