react-from-zero/13-element-refactor.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>13 Рефакторинг элементов - 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/create-react-class@15.6.3/create-react-class.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

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

<script type="text/babel">
// Рефакторинг элемента немного сложнее
// Во-первых, JSX определяет, является ли тег элементом или компонентом
// Если написано в нижнем регистре, значит это элемент
// Если стиль написания UpperCase, значит это компонент

var element = <div/>
// станет
element = React.createElement("div", null)

try {

var component = <Div/>
// станет
component = React.createElement(Div, null)

} catch(e) {}

// Во-вторых, преобразует все события, которые эти элементы вызывают,
// в синтетические события. Это часто не проблема, это просто события.
// Но вы не можете запускать свои события.
// Так что даже если ваш компонент <Input> принимает колбэк onClick в виде свойства
// Вы не можете вызвать его с тем же событием, что и элемент <input>


// Один из подходов может быть таким.
// Мы просто реализуем колбэк onChange
// Здесь мы создаем поле для ввода числа, который вызывает только onChange при таких типах полей
// (нечисловые входные данные генерируют пустое изменение)
var NumberInput = createReactClass({

  getInitialState: function() {
    return {value: ""}
  },

  handleInput: function(e) {

    // мы могли бы попытаться изменить событие, чтобы получить наши данные,
    // но это может всё запутать
    // вместо этого мы предотвращаем это событие от дальнейших действий
    e.preventDefault()

    var newNumber = e.target.value

    // фильтруем пустые изменения
    if (newNumber.length < 1 || newNumber === this.state.value) return

    this.setState({value: newNumber})

    // затем мы извлекаем наши данные и передаём их в onChange
    this.props.onChange(newNumber)

  },

  render: function () {

    return <input type="number" value={this.state.value} onChange={this.handleInput}/>

  },

})

function logChange(v) {
  console.log(v)
}


// Здесь мы видим, что новый NumberInput имеет другой интерфейс,
// поэтому свойство onChange означает, что события будут получены, но в данном случае
// это не так. Кроме того, даже если бы мы хотели назвать его как оригинальное поле ввода,
// нам нужно было бы использовать верхний регистр, но это не сработало бы.
var reactElement = <div style={{width: 300, margin: "auto"}}>

  <h2>Логирование входящих чисел</h2>

  <h2>До рефакторинга</h2>
  <input type="number" onChange={function(e) { logChange(e.target.value) }}/>

  <h2>После рефакторинга</h2>
  <NumberInput onChange={logChange}/>

</div>

ReactDOM.render(reactElement, document.getElementById("app"))

// Другие подходы включают в себя прежде всего не использовать имена свойств «по умолчанию»
// т.е. onUpdate вместо onChange
// Также может случиться так, что компонент использует onMouseDown для внутренних целей
// и запускает onChange, что может вызвать путаницу
// Часто компоненты обеспечивают более богатые взаимодействия, чем элементы в первую очередь
// поэтому их методы-свойства могут отражать это с именем
</script>