forked from kay-is/react-from-zero
-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy path09-component-classes.html
More file actions
104 lines (84 loc) · 3.52 KB
/
09-component-classes.html
File metadata and controls
104 lines (84 loc) · 3.52 KB
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
104
<!doctype html>
<title>09 Classes Componentes - React do Zero</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/[email protected]/create-react-class.js">
// React.createClass foi removida do React 16 e agora está em seu próprio pacote
</script>
<div id="app"></div>
<script type="text/babel">
// Não é incomum que o componente deva manter um estado interno
// por exemlo se existir alguma interação
// nesse caso uma função componente não é o suficiente
// pois uma função componente tem apenas propriedades e nenhum estado
// precisamos de uma classe componente com uma função render
var MyComponent = createReactClass({
// usado para checagem de tipo das propriedades
// igual na função componente
propTypes: {
color: PropTypes.string,
},
// esse metodo define valores padrões para propriedades não passadas
// sera chamado pelo React
// antes que o componente seja montado no DOM
getDefaultProps: function() {
return {color: "green"}
},
// esse metodo define o estado inicial do componente
// será chamado pelo React
// antes que o componente seja montado no DOM
// se o metodo não existir, this.state será undefined
getInitialState: function() {
// The state can be any JavaScript value, often it is an object
return {times: 0}
},
// esse metodo maneja todos os cliques no elemento <span>
handleClick: function() {
// setState() pode ser chamada com um objeto que contem o novo estado
// normalmente isso engatilha uma chamada do render(), mas o React pode unir mutiplas
// chamadas e deferir a chamada render() (torna-la assíncrona)
// Para prevenir isso, setState pode receber um callback também
// Isso pode levar a comportamentos inesperados, caso confiemos no this.state ou
// this.props para nossos cálculos
// this.setState({times: this.state.times + 1})
// A versão de callback nao tem esse problema
// O callback pega o estado e as propriedades corretas no momento do uptade
this.setState(function(prevState, props) {
return {times: prevState.times + 1}
})
},
// esse método será chamado pelo React
// após que o componente seja montado no DOM
// e também toda vez que this.setState() foi chamado
// é como se fosse a mesma função componente de antes
// mas sem passagem de propriedades
render: function() {
// usando as propriedades dadas pelo criador desse componente
// elas estão em this.props agora ao invés do parâmetro propriedades
var style = {color: this.props.color}
// retorna um elemento com um handler de cliques e as propriedades e
// valores de estado. O estado é salvo em this.state
return (
<span onClick={this.handleClick} style={style}>
Clicked {this.state.times} times
</span>
)
},
})
// Criando algumas instâncias da Classe Componente interativa
// uma com cor padrão
// Tudo funciona exatamente como com funções componente simples
// A interface não mudou para o usuário deste componente
var reactElement =
<div>
<MyComponent color="red"/>
<br/>
<MyComponent color="blue"/>
<br/>
<MyComponent/>
</div>;
var renderTarget = document.getElementById("app")
ReactDOM.render(reactElement, renderTarget)
</script>