forked from kay-is/react-from-zero
-
Notifications
You must be signed in to change notification settings - Fork 4
/
09-component-classes.html
111 lines (90 loc) · 4.06 KB
/
09-component-classes.html
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
105
106
107
108
109
110
111
<!doctype html>
<title>09 Componentes y Clases - React Desde Cero</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 fue eliminado de la versión 16 de React
// y por eso debemos cargar su librería de forma independiente
</script>
<div id="app"></div>
<script type="text/babel">
// Frecuentemente un componente necesita mantener un estado `state` interno
// por ejemplo si hay alguna interacción envuelta.
// Los componentes de tipo función, solo pueden mantener propiedades y no ningún estado interno.
// En caso de que un componente tipo función no sea suficiente
// entonces necesitaremos un componente de tipo Clase con una función render
var MyComponent = createReactClass({
// del mismo modo que en los componentes de tipo función,
// usamos propTypes para validar el tipo de las propiedades.
propTypes: {
color: PropTypes.string,
},
// Este método asigna el valor por defecto de las propiedades que faltan.
// Este método será invocado por React antes de que el componente sea montado en el DOM
getDefaultProps: function() {
return {color: "green"}
},
// Este método asigna el estado inicial del componente
// será llamado por React antes de que ningún componente sea montado en el DOM
// si no es declarado este método, entonces `this.state` será undefined
getInitialState: function() {
// El estado puede ser cualquier valor de JavaScript,
// pero normalmente es un objecto
return {times: 0}
},
// maneja todos los clics sobre el elemento span
handleClick: function() {
// setState() puede ser llamado con un objeto,
// el cual será el nuevo valor del estado
// normalmente eso desencadena la llamada a render,
// pero React puede esperar a acumular varios cambios antes de renderizar
// lo que hace que la llamada a Render sea asíncrona
// Por este motivo, setState puede recibir una función callback
// Esto puede conducir a un comportamiento extraño, si confiamos solamente
// en this.state o this.props para nuestros cálculos
// this.setState({times: this.state.times + 1})
// Utilizando el callback, prevenimos los posibles errores
// El callback recibe el estado y los props correctos a la hora de actualizar.
this.setState(function(prevState, props) {
return {times: prevState.times + 1}
})
},
// este método será llamado por React
// solo después el componente será montado en el DOM
// also every time this.setState() was called
// también será llamado después de this.setState()
// it's like the component function from before
// Es como en ejemplos anteriores definíamos a los componentes como funciones
// pero sin props como argumento
render: function() {
// usando los props dados por el creator de este componente
// accedemos a los props desde la variable this
var style = {color: this.props.color}
// returning an element with a click-handler and the props and
// devolvemos un elemento con el click-handler
// el estado se accede desde this.state
return (
<span onClick={this.handleClick} style={style}>
Clicked {this.state.times} times
</span>
)
},
})
// creamos algunas instancias del componente creado basado en clases (class)
// uno con el color por defecto
// Everything works exactly like with the simpler component functions
// Todo funciona exactamente igual que en el ejemeplo con los componentes de funciones.
// La interfaz no ha cambiado para el usuario de este componente
var reactElement =
<div>
<MyComponent color="red"/>
<br/>
<MyComponent color="blue"/>
<br/>
<MyComponent/>
</div>;
var renderTarget = document.getElementById("app")
ReactDOM.render(reactElement, renderTarget)
</script>